第6回Flutterもくもく会@Zoom 実施レポート（Flutterテーマ設定編）

# はじめに 

2020年6月28日にZoomにて[Flutterもくもく会](https://flutter-okurayama.connpass.com/event/179680/)を実施したので、
そのレポートになります。個人的所感メインです。
何かご意見などありましたらよろしくお願いします。
話題になった内容をトピックとして記載します。


もし良ければ過去のものもご覧ください。

* [第1回](https://qiita.com/glassmonkey/items/7dd8cf2037e17c5131f8)
* [第2回](https://qiita.com/glassmonkey/items/9ed36f0e8f27952c7c6d)
* [第3回](https://qiita.com/glassmonkey/items/95d470bc780e35d079fa)
* [第4回](https://qiita.com/glassmonkey/items/75f6df813d0458e9cf5b)
* [第5回](https://qiita.com/glassmonkey/items/84bf4810e10fbaa199af)


# トピック
今回のもくもく会で出た話題の一部をピックアップ。

# Flutterを使った状態管理について
状態管理の関心についてはウィジェット（スクリーン）間で共有したいかでアプローチを変えたほうが良いよねという話になりました。
ログイン情報とかは共有するはずなのでそういうのはちゃんとしたほうが後々楽そうだと思います。

## Widget間で共有しない場合
入力中のチェックボックスの状態なんかは他のウィジェットと共有しておく必要はなさそうなので`StatefulWidget`をカジュアルに使って`setState()`で呼び出すアプローチが楽で良さそうだと思います。
 
## Widget間で共有する場合 
### 基本的に
　[state_notifier](https://pub.dev/packages/state_notifier)  + イミュータブル化 するなにかが良さそうに思っています。MVVMなので、そこまで複雑にならない形で組めるのかなーとは思います。

 イミュータブル化は[equatable](https://pub.dev/packages/equatable)や[freezed](https://pub.dev/packages/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
を見つけました。

[ブラウザ版](https://www.moongift.jp/2020/05/panache-flutter%E3%81%AE%E3%83%86%E3%83%BC%E3%83%9E%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF/)も用意されてるのですが、結構エラー吐いてて悲しみを背負いました。

![open-source-panache-5_thumb.10cfb8a1dd285974ee33d53370102dab.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152938/7b3181c2-e664-6d7f-f35b-ccd789dfbb78.jpeg)

引用: https://www.moongift.jp/2020/05/panache-flutter%E3%81%AE%E3%83%86%E3%83%BC%E3%83%9E%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF/

※ 修正点は大き3つありました。

* パラメータ名の修正
[公式のマイグレーションガイド](https://api.flutter.dev/flutter/material/TextTheme-class.html)を参考に`display4`を` headline1`などにする必要があった

```dart

 TextTheme(
//  display4:TextStyle( # 公式のマニュアルを参考に置換
    headline1: TextStyle(
      color: Color(0xb3ffffff),
      fontSize: 96.0,
      fontWeight: FontWeight.w300,
      fontStyle: FontStyle.normal,
    ),
```

* `UnderlineInputBorder` を `borderSide` 指定にする


```dart

 UnderlineInputBorder(
//---     side: BorderSide( この記述方法は古い
        borderSide: BorderSide(
        color: Color(0xff000000),
        width: 1.0,
        style: BorderStyle.solid,
      ),
```

* `hasFloatingPlaceholder`を `floatingLabelBehavior` 指定にする

[hasFloatingPlaceholder](https://api.flutter.dev/flutter/material/InputDecoration/hasFloatingPlaceholder.html)と変更後の[FloatingLabelBehavior](https://api.flutter.dev/flutter/material/FloatingLabelBehavior-class.html)を見比べるともともと非表示・表示の2値から３値になったため移行推奨になったみたいですね。例では `always` にしましたが `auto` が妥当な可能性はあるので、適宜使い分けですね。

```dart
InputDecorationTheme(
//hasFloatingPlaceholder: true 厳密には新機能みたいなので、alwaysかどうかは要検討
floatingLabelBehavior: FloatingLabelBehavior.always, 
) 

```


# おわりに次回開催と宣伝
こちらで定期的にもくもく会を隔週の頻度で実施予定です。次回は7月上旬を予定しています。

LTなど発表したい方いましたら [@glassmonekey](https://twitter.com/glassmonekey)にご連絡いただけますと嬉しいです。LTの練習とかも大歓迎です。

下記のコンパスも良ければ登録お願いします。これを機に一緒に始めましょう
https://flutter-okurayama.connpass.com/


# 感想というかメモ
個人開発のロジック部分はほぼ出来たのであとはデザイン頑張れそう。