Flutterを始める
kabewallFlutterの環境構築から
zipファイルをダウンロードして、解凍
~/Develop/ に移動させる
~/.zprofile に以下を追記
export PATH="$PATH:$HOME/Development/flutter/bin"
以下のコマンドを実行して、それっぽい表示でたらとりあえずOK
flutter doctor
flutter doctor で出たエラーを一つずつ解消
iOS
xcodeダウンロードしてても、いくつかアクションが必要らしい
以下の2行実行して、flutterでxcodeのコマンドラインツールを使えるようにする。
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -license
cocoapodのバージョンエラーが出てたので、以下でアップデート
gem update cocoapod
pod setup
Android
Android Studioをダウンロードした後、いくつかアクションする。
Android SDK Command-line Toolsをダウンロードする
FlutterでAndroidStudioを使えるようになるようにする。
flutter doctor --android-licenses
こうなったらOK
$ flutter doctor
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 darwin-x64, locale
ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.69.2)
[✓] Connected device (2 available)
[✓] HTTP Host Availability
• No issues found!
VSCodeでの開発環境
Flutterの拡張機能入れる。(Dartも勝手に入る)
コマンドパレット(⌘+Shift+P)からFlutterで新プロジェクト立ち上げられる。
kabewallTest Drive
シミュレータでテストする
ここのmacosのところをクリックしてiOS, Androidをクリック。
シミュレータが起動してないときはよしなに起動してくれる。
hot reload
保存すると、即座にシミュレータに反映される。
NextJSみたい。
kabewallWrite your first Flutter app, part 1
Stateful widgetとStateless widget
widgetは何かしらのパーツの概念っぽい。
statefulとstatelessの2パターンがあって、
widgetのライフサイクル中に状態の変更があるかどうかで別れるらしい。
Stateful widgets maintain state that might change during the lifetime of the widget.
Stateful Widget
Stateful widgetは2つのクラスで構成される
Stateクラスと、そのインスタンスを作るStatefulWidgetクラス。
kabewallFlutterのWidgetがいまいち掴めなかったので、Flutter for iOS developerを読む。
WidgetsとUIViewとの比較
- Widgetsはimmutableで、widget本体とかwidgetの中身(state)が変わる時はWidget自体をrewriteするらしい。
- Widgetsはimmutableだから、めちゃ軽い。
- FlutterはMaterial Designを導入しているが、iOSデザインに寄せたCupertino Widgetも
Widgetsの更新方法
- UIViewでは、UIの更新をするときに直接パーツの更新をできるが、Fultter Widgetsはimmutableだから、widgetのstateを操作することで間接的にUIの更新を行う。
- StatelessWidgetはWidgetをinitializeするときの情報だけで構築するwidget。
- StatefullWidgetはWidgetを動的に更新したいときに、widgetのstateを更新してUIを再構築するwidget
WIdgetのレイアウトの仕方、Storyboardとの違い
- Flutterではレイアウトをコードで宣言する。
- やり方はwidget catalogを見てね、らしい。
コンポーネントを追加したり消したりするには
- iOSでは、addSubview()やremoveFromSuperview()でUIパーツを動的に追加したり消したりできたけど、flutterはimmutableだから、それと同じ方法はない。
- その代わり、widgetにフラグを付けることで実現できる。
bool toggle = true;
Widget _getToggleChild() {
if (toggle) {
return const Text('Toggle One');
}
return CupertinoButton(
onPressed: () {},
child: const Text('Toggle Two'),
);
}
Widgetにアニメーションをつける
- iOSでは、animate(withDuration: animations:)を呼べば、アニメーションをつけられたけど、Flutterではanimation libraryでwidgetをラップする。
Widgetのopacityの操作
- iOSでは、すべてのUIにopacityやalphaの変数があったが、Flutterの場合、Opacity Widgetでwidgetをラップする必要がある。
ページの遷移
- iOSではUINavigationConrtollerでページ間の遷移をコントロールできた。Flutterでは、NavigatorとRouterという似た方法で遷移をコントロールできる。
- Routeはページのabstractで、Navigatorはrouteを整理するwidget。
- iOSと同じようにpush, popで遷移のコントロールができる。
外部アプリへの遷移
- Flutter単体ではできない。
- Native Platform Integrationで各々のネイティブ開発に任せるか、プラグインを導入する。
非同期コードの書き方
- Dartは単一スレッド処理モデルで、Isolates(Dartのコードを別スレッドで実行する方法)や非同期プログラミングをサポートしている。
- Isolatesがなければ、DartはずっとメインUIスレッドで処理される。
- Flutterのevent loopはiOSのmain loopみたいなもん。
- Dartが単一スレッドモデルだからと言って、UIをフリーズさせるような処理を書く必要はない。
- 代わりに、Dartが提供するasync/awaitを使用して、非同期処理を機能させる。