Material 3へのサポート
前回まで利用してきたウィジェットはMaterial 2でした。これらのウィジェットがバージョンアップし、Flutter 3では、Material 3がサポートされるようになりました。
Material 3のサイトとMaterial 2のサイトを見比べると大きな違いがあるように感じます。そこで、これまで作ってきたコードはどうなるのかという視点を中心に、変更点や特徴などを見ていきます。
ただし、現時点（2022年5月30日）ではすべてのコンポーネントでMaterial 3への対応が終わったわけではなく、まだ、対応中のものもあります。また、Flutter3になると自動的にMaterial 3のコンポーネントに置き換わる訳ではありません。従って、現在、開発しているアプリであれば、引き続きMaterial 2をそのまま利用しても構いません。
Material 3の特徴
Material 3の大きな大きな特徴は、アプリ利用者がボタンの色や形状を好みのスタイルにカスタマイズできるということです。それは、もともとの名称「Material You」からも見てとれます。
最近、利用者がUIやデザインのテーマをカスタマイズできるアプリなどが増えつつあります。しかし、これは同時にアプリ側からのブランド色を伝えにくくなることを意味しています。もちろん、Material 3を使っても、部品をそのまま利用することは可能です（＝カスタマイズは必須ではありません）。
カラーテーマとテキストフォントテーマ
Material 3では、カラーテーマ（ColorTheme）とテキストテーマ（TextTheme）も変更になります。もちろん、Material 2でも存在していますが、多少カテゴリの追加や変数名の変更が行われています。
ただし、Flutterでのテキストテーマについては、まだ対応中であり、今後、Material 3への対応がどのような形になるのかははっきり分かりません。
また、Material 3ではカラーテーマを作成するためのMaterial Theme Builderというツールが用意されています。これらのツールを使えば、カラーテーマの設定がしやすくなるはずです。
Material 3で変わったコンポーネントスタイル
Material 3ではコンポーネントについても見た目が多少変わっています。図3は同じコードをMaterial 2と3でカラーテーマをデフォルトのlightテーマとdarkテーマを適用して実行してみたときの実行結果です。
Material3にするとスタイルが変わっているコンポーネントがあることがわかると思います。ただし、実際に実行した結果を見ると、思ったよりも大きな変更という感触ではありませんでした。また、デフォルトではトップメニュー以下のタブメニュー（AppBarのbottomプロパティに指定したコンポーネント）が正しく表示されませんでした。このような部分は、今後改善されていくと思いますが、まだ対応中である感じは否めません。
もちろん、上で挙げたのはデフォルトでのスタイルなので、個別に指定していれば異なる見え方になるはずです。
Material 3への対応方法
現時点（2022年5月時点）でのFlutter3ではMaterial 3はデフォルトで有効になっていません。そのため、利用にあたっては以下のようにMaterial 3を使うための設定を追加する必要があります。
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
// （1） Material3を使う
useMaterial3: true,
colorScheme: ColorScheme.light(),
),
home: const MyHomePage(title: 'Material 3 Demo'),
);
（1）のようにuseMaterial3の指定を追加します。追加しない場合には、falseを指定した場合と同じになり、Material 2のコンポーネントが使われます。
また、Material 3を有効にするとこれまでと若干サイズやパディングなども変わるので、場合によっては、ページ全体の配置にも影響があるかもしれません。その場合には、個別に対応しなければならないので、実際の対応は（1）の指定をすれば終了ということにはならないとは思います。
