Flutter,Material2→Material3で困ったところ

※こちら個人メモです。
今回、題名の通りですね。
結構前から、Material2→Material3になりますよーっていうアナウンスはあったんですが、「まぁ、Material2と大差ないやろ（雑」と放置しておりましたところ。

Flutter　Updateしたら、ですね、Material3が適用されたようで、
わっしのかわいいアプリちゃんの色指定やらなんやらが

ごっちゃりごっちゃり

してしまいまして、、、

しゃぁないと。

Material3について学ぼうとした事態でありませう。

はい。頑張るマス。

Material3

これ、何かと言いますと、Googleが提供しているオープンソースデザインシステムってやつです。
いくつかの色を指定することで自動でいろんな色を決定してくれるという便利なヤロウであります。
背景はこの色～、テキストはこの色ーーーとしなくても、メインカラー一色選択してあげるだけで全部決まってしまうという画期的システム✨

・・・というのはアプリ作成の入り口に立つ人の視点ですね。
今回、Material２→Material３への更新でそこそこ変更されているので、それらを直さないと元の色指定には戻らないという事態に陥っておりませう。
（たぶんMaterial2の状態で動かせるみたいな処理もあるでしょうからそれも含めてみていきたいですね。）

ということで、
まずは

Material3を無効にする方法

こちらを取り急ぎｗ
こちらですね、「こうするとMaterial3が有効になるぜ！」という記事を見つけましたが設定しないと無条件有効なので、なので！（憤慨
コードはこちら

MaterialApp(
      theme: ThemeData(
        useMaterial3: false,
～～

ええ、簡単ですね、MaterialApp、theme指定の中でuserMaterial3をfalseにするだけです。
これで一安心ではあります。。。
しかしまぁ、Material3もぼちぼち取り込まないと置いて行かれますのでね、
そのうち強制適用って書いていたし。

とはいえ、なんというか、どこを見ても情報が整理されておりません。
いや、されているのかもしれない。
わたしの知っている範囲が狭いから、こうみえて全体はめちゃくちゃキレーに整っているのかもしれませんが、
わたしには全然わかりません。
Material２と３の違いを見せてくれる早見表があればいいのに。。。
ないんだもの。。。。

はぁ、、Javaで作った方のアプリもMaterial3への移行が必要っぽいので、、そちらも気が重いですわ。。。
年末にこんなところに気づくなんて、、ほかにやることあるのに。。。
はぁ、、英語人になりたい。。

んで、いろいろ引っかかりそうなところについて記述

Cardや、Appbarや、Dialogの背景が思った通りにならない！

今回一番困惑したのがこちら。
それぞれのBackgroundColorを指定しても、どうも微妙に色が違う、、、なぜだ！と、調べておりましたら以下原因がわかりましたので。メモ。
犯人：elevation＋surfaceTintColor
elevationという項目がありますね。Card、Appbar,Dialogなどなど、
こちら、設定するとそれぞれの要素のBackColorに自動でsurfaceTintColorの色が上乗せされるようになっております。
物によっては初期値としてelevationに値が入っているものもあるので、、ほんとうに、、もう・・うん。
で、対応方法ですが、こちら、（MaterialAppのThemeDataでセットします

surfaceTintColor: Colors.transparent

例:
appBarTheme: const AppBarTheme(
  surfaceTintColor: Colors.tranparent,
)

これ、elevationが設定されているときにその数値によってここの色をのせるようになっているようで、ここに透明色「Colors.transparent」をセットすると、透明しかのらなくなる為、BackgroundColorがそのままきれいに出てくれるようになります。

ほか、、、ほかは、
あぁ、これもだ。

Autocompleteの表示される入力候補リスト

こちらも、色ががっつり変わります（困惑。
ドロップダウンで表示するエリアも同様に色が変わります(´・ω・`)
対応は（MaterialAppのThemeDataでセット

canvasColor: Colors.white,

こいつですね、
どうやらcanvasColorの内容がMaterial2と大きく異なるようで
Material2では白で表示されていたものがMaterial3だと、PrimaryColorに近い色がセットされてしまいます。
こちらを変更することで、autocompleteや、ドロップダウンで選択式にしているようなエリアについても色を指定することができます。

いったんこんなもんかなぁ、、
FloatingActionButtonもsecondaryの色が入っていたはずがそうじゃなくなったようです。
いやぁ、面倒でしたｗ
一括指定したいから、どこから色取ってくるのか調べるんですが、すごい時間かかるのです（調べるの下手）
目ぇシパシパしますわ。