このサイトはアドセンスやアフィリエイト広告を利用しています

Flutter&Dart

【Flutter】CardTheme と CardThemeData の違いと「The argument type 'CardTheme' can't be assigned to the parameter type 'CardThemeData?'」エラーの解決法

Flutter のバージョンを上げたら突然ビルドエラーが出た──そんな経験、ありませんか？
最近のアップデートで CardTheme に関する仕様変更が入り、次のようなエラーが発生することがあります。

The argument type 'CardTheme' can't be assigned to the parameter type 'CardThemeData?'

この記事では、このエラーの原因と解決法、そして Flutter バージョンアップ時に注意したい点をまとめます。

🔍 1. エラーの原因

このエラーは Flutter のテーマ API の変更 が原因です。

変更内容（Flutter 3.27〜3.32 頃）

ThemeData.cardTheme の型が
CardTheme → CardThemeData に変更されました。

つまり、以前は以下のような書き方が許されていたのに：

ThemeData(
  cardTheme: CardTheme(
    color: Colors.white,
    elevation: 2,
  ),
);

新しいバージョンでは、
CardTheme（ウィジェット）ではなく、CardThemeData（データクラス）を渡す必要があります。

💡 2. CardTheme と CardThemeData の違い

クラス名役割用途
CardThemeテーマを適用するウィジェット特定のウィジェットツリーにカードテーマをかけたいとき
CardThemeDataテーマの設定値（データクラス）ThemeData に直接指定する

例：CardTheme の使いどころ（ウィジェットとして）

CardTheme(
  data: const CardThemeData(
    color: Colors.white,
    elevation: 4,
  ),
  child: Column(
    children: [
      Card(child: Text('A')),
      Card(child: Text('B')),
    ],
  ),
);

特定の範囲だけテーマを変えたい場合に使うのがこちらです。

🧭 3. 解決方法（ThemeData に正しい型を渡す）

エラーを消すには、単純に CardTheme → CardThemeData に書き換えましょう。

ThemeData(
  cardTheme: const CardThemeData(
    color: Colors.white,
    elevation: 2,
  ),
);

もしくは copyWith を使って部分的に変更する場合：

ThemeData(
  cardTheme: const CardThemeData().copyWith(
    color: Colors.white,
    elevation: 2,
  ),
);

これでエラーは解消します。

🧩 4. 読み出し側の修正も必要な場合

Flutter の新しいバージョンでは、
Theme.of(context).cardTheme や CardTheme.of(context) の戻り値の型も CardThemeData に統一されています。

旧：

final CardTheme cardTheme = Theme.of(context).cardTheme; // ❌

新：

final CardThemeData cardTheme = Theme.of(context).cardTheme; // ✅

または、型推論に任せて書くと安全です。

final cardTheme = Theme.of(context).cardTheme;

⚙️ 5. Flutter バージョンアップで同様の変更が起きるケース

今回の CardTheme だけでなく、Flutter の Material 3 対応ではテーマ API が広く統一されつつあります。

  • DialogTheme → DialogThemeData
  • AppBarTheme → AppBarThemeData
  • TabBarTheme → TabBarThemeData

このように、「*ThemeData に統一」 する流れになっています。

対策ポイント

  1. flutter upgrade 後に flutter doctor を実行
  2. 依存パッケージも flutter pub upgrade で最新化
  3. エラーが出た箇所の「型名」に注目して、古いクラス（*Theme）が残っていないか確認

🚨 6. Flutter のバージョンアップで注意したいこと

Flutter は頻繁に更新され、Material 3 対応のために既存クラスの型や構造が変更されることがあります。

よくあるトラブル

  • テーマ関連のクラスの型変更（今回のようなもの）
  • デフォルトの色指定や TextStyle の初期値の変更
  • useMaterial3: true によるスタイル崩れ
  • Widget のパラメータ名の変更・非推奨化

バージョンアップ時の安全手順

  1. changelog を確認： Flutter 公式 release notes をチェック。
  2. ステージング環境で試す： いきなり本番プロジェクトをアップデートせず、コピーでテスト。
  3. 型エラーは「APIの仕様変更」を疑う： “The argument type ‘X’ can’t be assigned to parameter type ‘Y’” は、その典型。

✨ 7. まとめ

項目内容
エラーの原因ThemeData.cardTheme の型が CardThemeData に変わった
修正方法CardTheme → CardThemeData に書き換える
防止策バージョンアップ前に changelog 確認＆型チェック
覚えておきたい原則*Theme はウィジェット、*ThemeData はデータクラス

🌙 結び

Flutter の進化は速く、ときにエラーも置き土産としてやってきます。
けれどその多くは、フレームワークがより洗練されていく過程の副作用。

「動かなくなった」ではなく、「構造が整理された」と捉えると、
コードの理解も深まり、より長く Flutter と付き合っていけます。

-Flutter&Dart