はじめに
2020年6月28日にZoomにてFlutterもくもく会を実施したので、
そのレポートになります。個人的所感メインです。
何かご意見などありましたらよろしくお願いします。
話題になった内容をトピックとして記載します。
もし良ければ過去のものもご覧ください。
トピック
今回のもくもく会で出た話題の一部をピックアップ。
Flutterを使った状態管理について
状態管理の関心についてはウィジェット（スクリーン）間で共有したいかでアプローチを変えたほうが良いよねという話になりました。
ログイン情報とかは共有するはずなのでそういうのはちゃんとしたほうが後々楽そうだと思います。
Widget間で共有しない場合
入力中のチェックボックスの状態なんかは他のウィジェットと共有しておく必要はなさそうなのでStatefulWidgetをカジュアルに使ってsetState()で呼び出すアプローチが楽で良さそうだと思います。
Widget間で共有する場合
基本的に
state_notifier + イミュータブル化 するなにかが良さそうに思っています。MVVMなので、そこまで複雑にならない形で組めるのかなーとは思います。
イミュータブル化はequatableやfreezedが有名ですかね。
他プロジェクト（特にAngluar）で使用する場合
Blocを使ったアプローチは検討の余地ありだと思います。
現在実装中のアプリは、これらのライブラリを使ってますが楽でした。
- https://pub.dev/packages/bloc
- https://pub.dev/packages/flutter_bloc
- https://pub.dev/packages/bloc_test
ただ全体的にカロリー高めなので本当に使い回すのか？という疑問は持ったほうが良さかなと思います。
Angularとロジック使い回すとかじゃない限り複雑性があるだけで、あまりリターンは感じられなかったですね。
ライブラリのおかげで複雑性は隠蔽できましたが、
BlocからBlocへの連携部分はStreamの複雑性から逃げられなかったので。
Flutterのカラーテーマについて
筆者が作成中のアプリのレイアウトなどの設定項目をどうしようと思ってたところ、
https://github.com/rxlabz/panache
を見つけました。
ブラウザ版も用意されてるのですが、結構エラー吐いてて悲しみを背負いました。
※ 修正点は大き3つありました。
- パラメータ名の修正
公式のマイグレーションガイドを参考にdisplay4をheadline1などにする必要があった
TextTheme(
// display4:TextStyle( # 公式のマニュアルを参考に置換
headline1: TextStyle(
color: Color(0xb3ffffff),
fontSize: 96.0,
fontWeight: FontWeight.w300,
fontStyle: FontStyle.normal,
),
-
UnderlineInputBorderをborderSide指定にする
UnderlineInputBorder(
//--- side: BorderSide( この記述方法は古い
borderSide: BorderSide(
color: Color(0xff000000),
width: 1.0,
style: BorderStyle.solid,
),
-
hasFloatingPlaceholderをfloatingLabelBehavior指定にする
hasFloatingPlaceholderと変更後のFloatingLabelBehaviorを見比べるともともと非表示・表示の2値から３値になったため移行推奨になったみたいですね。例では always にしましたが auto が妥当な可能性はあるので、適宜使い分けですね。
InputDecorationTheme(
//hasFloatingPlaceholder: true 厳密には新機能みたいなので、alwaysかどうかは要検討
floatingLabelBehavior: FloatingLabelBehavior.always,
)
おわりに次回開催と宣伝
こちらで定期的にもくもく会を隔週の頻度で実施予定です。次回は7月上旬を予定しています。
LTなど発表したい方いましたら @glassmonekeyにご連絡いただけますと嬉しいです。LTの練習とかも大歓迎です。
下記のコンパスも良ければ登録お願いします。これを機に一緒に始めましょう
https://flutter-okurayama.connpass.com/
感想というかメモ
個人開発のロジック部分はほぼ出来たのであとはデザイン頑張れそう。