【Flutter】カラーテーマの設定方法

Question

###カラーテーマの設定について
Flutterで簡単なTodoListを作成しているのですが，iOSでダークテーマの際は問題ないのですが，ライトテーマの時に以下の画像のようなUIになり，テキストとアイコンが見えなくなってしまいます．
特に指定した覚えがないのですが，なぜこうなるのかをご回答頂けると幸いです．
よろしくお願いします．

###UI

###ソースコード

//main.dart
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: themeDataLight,
      darkTheme: themeDataDark,
      ...(中略）
  }

  final themeDataLight = ThemeData.light().copyWith(
      primaryColor: Colors.blue,
      iconTheme: IconThemeData.fallback().copyWith(
        color: Colors.blueGrey
      ),
      textTheme: TextTheme(
          button: TextStyle(fontSize: 18, color: Colors.white)
      )
  );

  final themeDataDark = ThemeData.dark().copyWith(
      primaryColorDark: Colors.black,
      iconTheme: IconThemeData.fallback().copyWith(
        color: Colors.blueGrey,
      ),
      textTheme: TextTheme(
          button: TextStyle(fontSize: 18, color: Colors.white)
      )
  );

}

//Listの文字の部分
            ListTile(
              key: Key(key),
              leading: _defaultIcon,
              title: Text(tableName),
              trailing: AppIcon.buildArrowIcon(),
              onTap: () {
                MyToDoListPage.push(context, tableName: tableName, index: int.parse(key));
              },
            ),

//BottomNavigationBar
  @override
  Widget build(BuildContext context) {
    //print(widget.key);
    return Scaffold(
      ...(中略)
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Theme.of(context).primaryColor,
        currentIndex: _page,
        onTap: onTapBottomNavigation,
        items: [
          _buildBottomNavigationBarItem(Icon(Icons.home), 'TodoList'),
          _buildBottomNavigationBarItem(Icon(Icons.settings), 'TodoList'),
          _buildBottomNavigationBarItem(Icon(Icons.money_off), 'Expense')
        ],
      ),
    );
  }

###追記
試したこと

• main.dartのprimaryColorLightが全く反映されてないので，primaryColorに変更

Answer 1

エラーの原因

自分もThemeの挙動についてはあまり詳しくないのですが、ThemeData.light()のドキュメントを見ると

This theme does not contain text geometry. Instead, it is expected that this theme is localized using text geometry using ThemeData.localize.

と書かれており、これが関係しているのではないかと思います。

解決策1

解決策としては、以下のようにThemeData()で宣言して、Brightnessを自分で設定する方法があります。

final themeDataLight = ThemeData(
  brightness: Brightness.light,
  primaryColor: Colors.blue,
  iconTheme: IconThemeData.fallback().copyWith(color: Colors.blueGrey),
  textTheme: TextTheme(
    button: TextStyle(fontSize: 18, color: Colors.white),
  ),
);

解決策2

もしくは、ThemeData.from()を使うことでも解決できると思います。
ThemeData.from()のには、以下のような記述があり、公式はこちらの使用を推奨しているようです。

This is the recommended method to theme your application.

final themeDataLight = ThemeData.from(
  colorScheme: ColorScheme.light(
    primary: Colors.blue,
  ),
  textTheme: TextTheme(
    button: TextStyle(fontSize: 18, color: Colors.white),
  ),
).copyWith(
  iconTheme: IconThemeData.fallback().copyWith(color: Colors.blueGrey),
);

Comments

[Elmogawa]

非常にわかりやすい回答，ありがとうございます．
１度試してみようと思います，