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製だから、それなりに安心・公式リファレンスが全部英語で… ・環境構築のための依存関係確認ツールがついてる - ﬂutter 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://ﬂutter.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)

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

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

okinari

More Decks by okinari

Other Decks in Technology

Featured

Transcript