Flutterで簡単なアプリを作ってみる

Transcript

1. Flutterで簡単なアプリを 作ってみる
2. Self-introduction Name： okinari Twitter：@okinari Job： Web Engineer (Marketing Engineer) Interested：Flutter(Dart) / Elixir / Python / node.js Flutter歴： 1ヶ月くらい 2
3. 1. Flutterって何？
4. Flutterとは? ・クロスプラットフォームモバイルUIフレームワーク - iOSとAndroidのネイティブアプリが 　1つのコードで作れる ・Google製 ・Dartlang(プログラミング言語) ・FLOSS(Free/Libre and Open Source Software) 4
5. Flutterとは? ・豊富なWidget(UIパーツ)が準備されている - Widgetを組み合わせていき、画面を作成する ・ホットリロード機能 - かなり高速(少しの修正なら1秒程度)で、 　状態を保存したままリロード可能 ・ステートフル(状態を保持) 5
6. Flutterとは? ・Google製だから、それなりに安心 ・公式リファレンスが全部英語で… ・環境構築のための依存関係確認ツールがついてる - flutter doctor コマンド - 問題があるとこの指摘、解決法を教えてくれる ・豊富なプラグイン(https://pub.dartlang.org/) pub：npm、gem、composer、pip等と同じ 6
7. Flutterで簡単なアプリを作ってみる Flutterで WebSocketを使ってみた
8. WebSocket使ってみた ・main関数 - 特殊関数、最初に呼び出し(dartlang) ・StatelessWidget、StatefulWidget - 状態を管理するために使用 ・State<T> - 実際の各状態を表す ・setState関数内部で変数等を変更することで、 　状態を変更する 8
9. WebSocket使ってみた ・公式のCookbookに情報あります https://flutter.dev/docs/cookbook/networking/web-sockets 9
10. WebSocket使ってみた ・WebSocketの接続 IOWebSocketChannel.connect('ws://echo.websocket.org'); ・送信 channel.sink.add('send string'); 10
11. WebSocket使ってみた ・受信 11 StreamBuilder( stream: widget.channel.stream, builder: (context, snapshot) { return Text(snapshot.hasData ? '${snapshot.data}' : ''); }, );
12. WebSocket使ってみた demo 12
13. PRタイム
14. 14 Thanks! 質問は下記までお願いします。 ◂ @okinari (Twitter)