Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

okinari
October 10, 2018

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

okinari

October 10, 2018
Tweet

More Decks by okinari

Other Decks in Technology

Transcript

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

    View full-size slide

  2. Self-introduction
    Name: okinari
    Twitter:@okinari
    Job: Web Engineer (Marketing Engineer)
    Interested:Flutter(Dart) / Elixir / Python / node.js
    Flutter歴: 1ヶ月くらい
    2

    View full-size slide

  3. 1.
    Flutterって何?

    View full-size slide

  4. Flutterとは?
    ・クロスプラットフォームモバイルUIフレームワーク
    - iOSとAndroidのネイティブアプリが
     1つのコードで作れる
    ・Google製
    ・Dartlang(プログラミング言語)
    ・FLOSS(Free/Libre and Open Source Software)
    4

    View full-size slide

  5. Flutterとは?
    ・豊富なWidget(UIパーツ)が準備されている
    - Widgetを組み合わせていき、画面を作成する
    ・ホットリロード機能
    - かなり高速(少しの修正なら1秒程度)で、
     状態を保存したままリロード可能
    ・ステートフル(状態を保持)
    5

    View full-size slide

  6. Flutterとは?
    ・Google製だから、それなりに安心
    ・公式リファレンスが全部英語で…
    ・環境構築のための依存関係確認ツールがついてる
    - flutter doctor コマンド
    - 問題があるとこの指摘、解決法を教えてくれる
    ・豊富なプラグイン(https://pub.dartlang.org/)
    pub:npm、gem、composer、pip等と同じ
    6

    View full-size slide

  7. Flutterで簡単なアプリを作ってみる
    Flutterで
    WebSocketを使ってみた

    View full-size slide

  8. WebSocket使ってみた
    ・main関数
    - 特殊関数、最初に呼び出し(dartlang)
    ・StatelessWidget、StatefulWidget
    - 状態を管理するために使用
    ・State
    - 実際の各状態を表す
    ・setState関数内部で変数等を変更することで、
     状態を変更する
    8

    View full-size slide

  9. WebSocket使ってみた
    ・公式のCookbookに情報あります
    https://flutter.dev/docs/cookbook/networking/web-sockets
    9

    View full-size slide

  10. WebSocket使ってみた
    ・WebSocketの接続
    IOWebSocketChannel.connect('ws://echo.websocket.org');
    ・送信
    channel.sink.add('send string');
    10

    View full-size slide

  11. WebSocket使ってみた
    ・受信
    11
    StreamBuilder(
    stream: widget.channel.stream,
    builder: (context, snapshot) {
    return Text(snapshot.hasData ? '${snapshot.data}' : '');
    },
    );

    View full-size slide

  12. WebSocket使ってみた
    demo
    12

    View full-size slide

  13. 14
    Thanks!
    質問は下記までお願いします。
    ◂ @okinari (Twitter)

    View full-size slide