Flutter 3.16 アップグレード後のUI変更

問題点

Flutterをバージョン3.16にアップグレードした後、次のようなUIの変更が発生します：

1. アプリバーのデザイン変更

   • スクロール時のシャドウが消失
   • 代わりに色調が付いた状態で表示される

2. 背景色の変化

   • 以前は白色だった背景に色調が付く

3. ボタンと余白のサイズ拡大

   • ボタンのサイズが大きくなり、余白が拡大

4. ダイアログ系コンポーネントの見た目変更

   • アラートダイアログ、タイムピッカー、デートピッカーなど
   • テーマ色（薄紫色など）が反映されたデザインに

原因

これらの変更は、Material 3 デザインがデフォルトで有効化されたことによるものです。Flutter 3.16以降、以下の変更が導入されました：

• すべてのMaterialコンポーネントでMaterial 3がデフォルトに変更
• 視覚的な刷新（新しいカラースキーム、コンポーネントデザイン）
• デフォルトのパディングとサイズの増加

解決方法

方法 1: Material 3 を無効化（暫定対策）

最も簡単な解決策は、ThemeData で useMaterial3 フラグを false に設定することです：

MaterialApp(
  theme: ThemeData(
    useMaterial3: false, // Material 2 スタイルを復活
  ),
  // ...その他の設定
);

注意点

この方法は一時的な対策です。Flutterチームは将来的にMaterial 3のみをサポートする予定であるため、長期的にはMaterial 3への移行を推奨しています。

方法 2: 特定コンポーネントの個別修正

Material 3を有効にしたまま、特定のコンポーネントだけ以前の見た目に戻す方法：

アプリバーの変更を修正

AppBar(
  surfaceTintColor: Colors.white, // 背景色を白色に固定
)

またはテーマ全体で設定

ThemeData(
  appBarTheme: AppBarTheme(
    surfaceTintColor: Colors.white,
  ),
)

透明効果を強制的に無効化

AppBar(
  forceMaterialTransparency: true, // 透明効果を無効化
)

方法 3: カスタムテーマによる詳細調整

Material 3を有効にした状態で、各コンポーネントのスタイルを詳細に調整する例：

ThemeData customTheme = ThemeData(
  useMaterial3: true, // Material 3を有効にしつつ
  appBarTheme: AppBarTheme(
    surfaceTintColor: Colors.white,
  ),
  scaffoldBackgroundColor: Colors.white,
  elevatedButtonTheme: ElevatedButtonThemeData(
    style: ButtonStyle(
      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
        RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(50.0),
        )
      ),
    ),
  ),
  // ...その他のカスタマイズ
);

長期的な対策：Material 3への移行

Flutterが推奨する解決策は、アプリを完全にMaterial 3に移行することです：

1. 公式移行ガイドを参照
   Material 3 移行ガイド（英語）

2. デザインの違いを比較
   Material 2 vs Material 3 インタラクティブデモ

3. 変更点を網羅的に確認
   Flutter 3.16 破壊的変更リスト

まとめ

アプローチ	具体的方法	適切なケース
Material 3無効化	useMaterial3: false	即時の復旧が必要な場合
コンポーネント個別調整	surfaceTintColor設定	特定の部分だけ修正したい場合
完全移行	Material 3仕様へ適合	長期的なメンテナンス性を重視する場合

最終的にはMaterial 3へ移行することが推奨されますが、プロジェクトの状況に応じて段階的な対応を行ってください。