Open7

Flutterについて勉強する

Flutter
フミフミ

Flutterの特徴

  • Googleが開発
  • 言語：Dart
  • クロスプラットフォーム開発：一つのコードベースで複数のプラットフォームの開発ができる。
    • iOS
    • Android
    • Web
    • Windows
    • macOS
    • Linux
  • ホットリロード：コードの変更を即座に反映できる。
  • パフォーマンス：ネイティブコードにコンパイルされるのでパフォーマンスが優れている。
  • UIデザイン；マテリアルデザイン
  • ウィジットとよばれるUI要素で構築される。「StatelessWidget」（不変のUI）と「StatefulWidget」（状態を持つUI）の二つがあるらしい。
フミフミ

FlutterSDKのインストール

  1. 公式サイトからFlutterをダウンロード
  2. Rosettaをインストール。(Appleシリコン、つまりM1とかM2チップを使用しているMacはRosettaという翻訳レイヤーが必要らしい。Intel向けに開発された多くのアプリがそのままではAppleシリコン上で動作しないため)
  3. VSCodeにFlutterの拡張機能をインストール
  4. VSCodeのコマンドパレットで「flutter」を入力。
  5. 「Flutter: New Project」を選択
  6. VSCodeのプロンプトからFlutter SDKをインストール
  7. インストール後のプロンプトからFlutterのパスをコピー

Flutterのパスを通す

echo export PATH="$PATH:<コピーしたパス>/bin" >> ~/.zshrc

FlutterCLIがターミナルから使用可能か確認

flutter --version

バージョンが表示されればOK

Flutter doctor

flutter doctorで表示された項目全てにパスするように設定する。(詳細は割愛)

プロジェクトの作成

VSCodeのコマンドパレットで「Flutter: New Project」を選択し適当な場所でディレクトリを作成

環境構築完了。思ったよりむずかしくなかった。

フミフミ

[公式]初めてのFlutterアプリ

公式ページのhttps://docs.flutter.dev/get-started/codelabをやってみる

Androidエミュレータでデバッグモードを起動しようとしたらエラーで起動できない。エラーをググってみると、原因はVPNに接続しているからだった。VPNから接続を切って再度試すとビルドできた。

ホットリロード機能はWebだと機能しない。

Dartでは行末のセミコロンが必須。VSCodeの自動フォーマットでdart言語にはセミコロンを自動で付与するようにした。

特定の処理をリファクタしたい時：
カーソルを合わせて、command + .。「Extract Widget」を選択する。

フミフミ

React Nativeとの違い

Flutter

Fluuterが動作するFlutter EngineはC++で書かれたレンダリングエンジンでDartコードはネイティブコード(Swift, Kotlin)に変換されない。スマホにインストールされたFlutter Engine上でどうさする
Flutter Engineの性能が良いからネイティブ挙動に近いパフォーマンスが出る。

React Native

Javascriptをネイティブコードに変換して動作する。デメリットとしてはこの変換時にバグが出るとうまく動作しなくなる。
また、常にiOSとAndroid OSのアップデートに追従しないといけない。

フミフミ

Widgeとの種類

デザイン観点から2つに分かれる

Material

Androidアプリのマテリアルデザインに沿ったデザイン

Cupertino

iOSらしいデザイン

Widgetの種類はMaterialの方が豊富らしい。

フミフミ

その他Tips

  • VSCodeでWidgeに追加可能なパラメータを表示する Command + Space
  • Control + Optionで型を表示できる
フミフミ

アニメーション

  • パラメータ設定するだけで簡単に使えるAnimatedXXX系
    しかし単純なアニメーションにしか向いていない。複雑なパターンのアニメーションは難しい。

  • AnimationControllerとセットで利用して細かい制御ができるTransition系
    forward, stop, reverseなどで再生、ストップ、逆再生などもできるので複雑なアニメーションを再現できる。

Vsync: thisとは

  • vsync は アニメーションの更新を最適化 するための仕組み。
  • vsync: this を指定すると、画面が 非表示のときはアニメーションのリソース消費を抑える。
  • this を渡すには、クラスに TickerProviderStateMixin を追加する必要がある。

disposeメソッドとは

@override
void dispose() {
  _animationController.dispose();
  super.dispose();
}

何をしているのか？

  1. _animationController.dispose(); を呼び出す
    AnimationController は 内部でリソースを消費 するので、dispose で適切に解放 する。
  2. super.dispose(); を呼び出す
    State のクリーンアップ処理を親クラスに任せる。

dispose を忘れるとどうなる？

AnimationController のメモリが 解放されずリーク する。
不要なアニメーションの処理が動き続ける 可能性がある。