質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.80%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 134

Elmogawa

score 4

カラーテーマの設定について

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に変更
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

エラーの原因

自分も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),
);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/08/29 17:24

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る