Flutter導入メモ

Satoru Higa

とりあえずインストール。 https://flutter.dev/docs/get-started/install/windows を見ながら適当なパスにコピーしてパスを通せばOK

C:\SDK\flutter にflutter SDKを入れたので、C:\SDK\flutter\bin をPATHに追加
パスを通すときは Rapid Environment Editor が便利

ターミナルから flutter と打ってパスが通ってるようだったらインストールできてる

flutter doctor とすると何か問題がないかを報告してくれる。Android toolchain でエラーが出てたけどAndroid開発をする気がないならスルーでOK

この状態ですでに [✓] Chrome - develop for the web となっているので、何もしないでもWebアプリ開発ならいける状態になってるくさい

Satoru Higa

https://flutter.dev/docs/get-started/test-drive?tab=terminal を見ながらとりあえずコマンドラインでプロジェクトを作ってみる

デスクトップとか適当なフォルダで、

flutter create myapp
cd myapp

として flutter のプロジェクトを作成して階層を移動する
Webアプリとして起動するのをまず見たかったので、

flutter run -d chrome

とするとChromeが立ち上がって表示された。なにこれ超簡単

Satoru Higa

ホットリロードがウリのはずなんだけどコード変更しても何もおきなかったので調べる。

ホットリロードをするにはIDEから立ち上げないといけないっぽい。VSCodeに必要そうな機能拡張を入れる。

Run and Debug を押すとまたChromeが立ち上がって、こんどはホットリロードが効くようになった。
ただ、ホットリロードが入ると状態がクリアされるっぽい？ボタンを押した回数が0にもどるっぽい挙動をしていた

Satoru Higa

デスクトップ版を試してみる

https://flutter.dev/desktop を見ていると Visual Studio 2019 が必要とのこと。すでにインストールされていたので環境的にはOK

プロジェクトのフォルダで

flutter config --enable-windows-desktop

を実行。これでデスクトップ開発しますよ設定が入るみたい。

flutter run -d windows

をするとWindows版でWebと同じアプリケーションが立ち上がる。何コレ、、ものすごい。。。
VSCodeの右下のところでターゲットとするプラットフォームを選ぶ所があるんだけど、一回VSCodeを再起動しないと出てこなかった。

再起動後、Windowsを選んで Build and Run を押すとVSCodeから立ち上がる。ホットリロードも可能、日本語も絵文字も通る。まじかよ

Satoru Higa

UIだけ作れても拡張性がないと意味ないので外部ライブラリをインポートしてみることにした

【Flutter】パッケージ導入手順 - Qiita にFlutter (というかdart?) のパッケージインストールのお作法が書いてあったので参考にする

各パッケージのページの install の所を見ると手順が書いてあるとのことなので、UDP通信のライブラリを入れることにする

udp | Dart Package を見ながら、pubspec.yaml の dependencies に udp: ^3.0.3 を追加、ファイルを保存するとライブラリのインストール → ホットリロードまでやってくれる。まじかよ、、、

main.dart の頭のほうに

import 'package:udp/udp.dart';

を追加する。エラーなし

example を見ながら+ボタンを押したら実行されそうな所にUDP送信のコードを仕込む

  void _incrementCounter() async {
    var sender = await UDP.bind(Endpoint.any());
    await sender.send("Test $_counter\n".codeUnits,
        Endpoint.unicast(InternetAddress("127.0.0.1"), port: Port(7000)));

    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

dartの仕様で変数名の頭に $ をつけると Pythonのf文字列的な挙動をするみたいなので、それでカウンターの値を送信して TouchDesigner の UDP In DATで見ることにした

一瞬でできた。まじかよ、、、