【Icon】Flutterにてアイコンボタンの色を変更する方法

はじめに

Flutterでアイコンボタンの色を変更する方法を２つ紹介しています。

Flutterは直感的にコードが記述できていいですね=(^.^)=

それでは紹介していきます。

【AppBar】Flutterでヘッダーを作成する方法とカスタム例

今回はアプリの上部によくあるヘッダーについて学んだので、基本的な使い方とそのカスタム例を紹介していこうと思います。ズバリ！ヘッダー部分を作るには「AppBar」というウィジェットクラスを使いましょう。

atsu-developer.net

2022.06.09

【2通り紹介】Flutterでサイドバーを作成する方法

はじめに最近Flutterを学んでいます。今日はFlutterでサイドバーを作ってみました。公式にて一つのサイドバーを紹介していますが、少し変わり種のサイドバーも紹介しようと思います。サイドバー２選...

atsu-developer.net

2022.06.08

アイコンボタンの色を変更する方法

調べてみたところ、大まかには２通りの方法があると思います。

１つ目はテーマ全体のアイコンの色を変えてしまう方法です。

以下のコードを見てください。

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Food UI Kit',
      theme: buildThemeData(),
      home: Scaffold(
        appBar: AppBar(
          iconTheme: IconThemeData(
            color: Colors.black,
          ),
          title: Text('Hello'),
          actions: [
            IconButton(
              onPressed: () {},
              icon: Icon(
                Icons.search,
              ),
            )
          ],
          leading: IconButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            icon: Icon(Icons.arrow_back_ios),
          ),
        ),
      ),
    );
  }

黄色くハイライトされた部分にてcolorフィールドに黒色を定義しています。

それによりアプリ全体のアイコンの色が変わっていることがわかります。

２つ目はアイコンの一部を変更する方法を紹介します。

以下のコードを見てください。

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Food UI Kit',
      theme: buildThemeData(),
      home: Scaffold(
        appBar: AppBar(
          iconTheme: IconThemeData(
            color: Colors.black,
          ),
          title: Text('Hello'),
          actions: [
            IconButton(
              onPressed: () {},
              icon: Icon(
                Icons.search,
              ),
              color: Colors.amberAccent,
            )
          ],
          leading: IconButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            icon: Icon(Icons.arrow_back_ios),
          ),
        ),
      ),
    );
  }

テーマ全体は先ほどのiconThemeにて黒色を定義していますが、黄色くハイライトされた箇所にて「search」アイコンのcolorフィールドをオレンジ色に定義しています。

全体的なテーマ色と個別に定義できることを覚えておきます！

終わり∧( ‘Θ’ )∧

Attention Required! | Cloudflare

stackoverflow.com