Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flutterで簡単なアプリを作ってみる
Search
okinari
October 10, 2018
Technology
0
21
Flutterで簡単なアプリを作ってみる
okinari
October 10, 2018
Tweet
Share
More Decks by okinari
See All by okinari
AWS Lambda(+API Gateway)でバイナリを扱う話
okinari
0
61
僕の家からリモコンが消えた話(NatureRemoについて)
okinari
0
46
コンストラクタ、知ってますよね?
okinari
1
94
スマートスピーカーのすゝめ
okinari
0
38
最近のNAS製品事情
okinari
0
18
Webマーケティングとは?
okinari
0
30
エンジニアにも知ってほしいWebマーケティングの世界
okinari
2
340
データ収集のすゝめ
okinari
1
250
FlutterをWEBエンジニアが扱ってみたお話
okinari
0
420
Other Decks in Technology
See All in Technology
Mocking in Rust Applications
taiki45
2
410
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
230
サプライチェーン攻撃に備える
ryunen344
0
300
たった1人からはじめる【Agile Community of Practice】~ソース原理とFearless Changeを添えて~
ktc_corporate_it
1
500
開発生産性を始める前に開発チームができること / optim-improve-development-productivity.pdf
optim
0
130
ロリポップ! for Gamersを支えるインフラ/lolipop for gamers infrastructure
takumakume
0
140
eBPFのこれまでとこれから
yutarohayakawa
10
3.2k
なにもしてないのにNew Relicのデータ転送量が増えていたときに確認したこと
tk3fftk
2
230
技術的負債解消の取り組みと専門チームのお話
bengo4com
0
340
「認証認可」という体験をデザインする ~Nekko Cloud認証認可基盤計画
logica0419
2
450
忙しい人のためのLangGraph概要まとめ
__ymgc__
1
200
Google CloudのLLM活用の選択肢を広げるVertex AIのパートナーモデル
nayuts
0
130
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
31
6.2k
KATA
mclloyd
27
13k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
YesSQL, Process and Tooling at Scale
rocio
167
14k
What's new in Ruby 2.0
geeforr
340
31k
The Invisible Side of Design
smashingmag
296
50k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Designing with Data
zakiwarfel
98
5k
Faster Mobile Websites
deanohume
304
30k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
Transcript
Flutterで簡単なアプリを 作ってみる
Self-introduction Name: okinari Twitter:@okinari Job: Web Engineer (Marketing Engineer) Interested:Flutter(Dart)
/ Elixir / Python / node.js Flutter歴: 1ヶ月くらい 2
1. Flutterって何?
Flutterとは? ・クロスプラットフォームモバイルUIフレームワーク - iOSとAndroidのネイティブアプリが 1つのコードで作れる ・Google製 ・Dartlang(プログラミング言語) ・FLOSS(Free/Libre and Open
Source Software) 4
Flutterとは? ・豊富なWidget(UIパーツ)が準備されている - Widgetを組み合わせていき、画面を作成する ・ホットリロード機能 - かなり高速(少しの修正なら1秒程度)で、 状態を保存したままリロード可能 ・ステートフル(状態を保持) 5
Flutterとは? ・Google製だから、それなりに安心 ・公式リファレンスが全部英語で… ・環境構築のための依存関係確認ツールがついてる - flutter doctor コマンド - 問題があるとこの指摘、解決法を教えてくれる
・豊富なプラグイン(https://pub.dartlang.org/) pub:npm、gem、composer、pip等と同じ 6
Flutterで簡単なアプリを作ってみる Flutterで WebSocketを使ってみた
WebSocket使ってみた ・main関数 - 特殊関数、最初に呼び出し(dartlang) ・StatelessWidget、StatefulWidget - 状態を管理するために使用 ・State<T> - 実際の各状態を表す
・setState関数内部で変数等を変更することで、 状態を変更する 8
WebSocket使ってみた ・公式のCookbookに情報あります https://flutter.dev/docs/cookbook/networking/web-sockets 9
WebSocket使ってみた ・WebSocketの接続 IOWebSocketChannel.connect('ws://echo.websocket.org'); ・送信 channel.sink.add('send string'); 10
WebSocket使ってみた ・受信 11 StreamBuilder( stream: widget.channel.stream, builder: (context, snapshot) {
return Text(snapshot.hasData ? '${snapshot.data}' : ''); }, );
WebSocket使ってみた demo 12
PRタイム
14 Thanks! 質問は下記までお願いします。 ◂ @okinari (Twitter)