7

In my AppBar the title is displayed with white text, but the icons are a dark grey or something. I Would like to have the icons white, too.

But the colors in the icon themes have no effect!

Not when added directly to the AppBar...

Scaffold(
  appBar: AppBar(automaticallyImplyLeading: false,
      actionsIconTheme: IconThemeData(color: Colors.white),
      iconTheme: IconThemeData(color: Colors.white),

and also not in the theme...

appBarTheme: AppBarTheme(
    backgroundColor: Colors.blue,
    foregroundColor: Colors.white,
    actionsIconTheme: IconThemeData(color: Colors.white),
    iconTheme: IconThemeData(color: Colors.white),

),

I would like to get the themes working! Setting the color individually on the icons is not an option.

What am I doing wrong? Is Material 3 really production ready?

Thanks!

Note: This is a Material 3 problem! In Material 2 everything works as expected!

SouthbayDev
  • 698
  • 5
  • 10

3 Answers3

2

I've tested your code and it all seems to work, are you sure you didn't provide null to onPressed? this way it may be disabled

child: Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false,
          actionsIconTheme: IconThemeData(color: Colors.white),
          iconTheme: IconThemeData(color: Colors.white),
          title: const Text('Screen A'),
          actions: [
            IconButton(
              icon: Icon(Icons.add),
              onPressed: () {},
            ),
            const IconButton(
              icon: Icon(Icons.add),
              onPressed: null,
            )
          ],
        ),

enter image description here

@Edit

In material3 also works - are you sure you dont override the Theme of icon?

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false,
          actionsIconTheme: IconThemeData(color: Colors.white),
          iconTheme: IconThemeData(color: Colors.white),
          title: const Text('Screen A'),
          actions: [
            IconButton(
              icon: Icon(Icons.add),
              onPressed: () {},
            ),
            const IconButton(
              icon: Icon(Icons.add),
              onPressed: null,
            )
          ],
        ),
      ),
    );
  }
}

enter image description here

Update:

You are right - its not working properly:

According to documentation Material3 for IconButton is in progress for Flutter

Jan-Stepien
  • 349
  • 2
  • 9
  • Interesting! No, the buttons are working. They just have the wrong color. Are you sure you are using Material 3? – SouthbayDev Sep 09 '22 at 11:02
  • Ok, I created a new default Flutter project and copied your code into it and I still don't get a blue background with white icon. In fact, the background is white and the icons black (the second + is grey, because deaktivated). Like in the screenshot you added. So your example, too, isn't working! The white icon color is ignored. – SouthbayDev Sep 09 '22 at 18:35
  • Could you change your example, so that the AppBars background is blue and the text and icons are white? – SouthbayDev Sep 09 '22 at 18:39
  • I have reported a bug for this... https://github.com/flutter/flutter/issues/111339 – SouthbayDev Sep 10 '22 at 06:18
  • Seems to be fixed for the next Flutter update – SouthbayDev Sep 12 '22 at 08:43
  • It seems I was a little bit to early with using Material 3... – SouthbayDev Sep 12 '22 at 08:46
0

Wrap your AppBar widget with Theme widget and customize iconTheme to your intended design inside the ThemeData object.

For example:

Theme(
    data: ThemeData(
        appBarTheme: const AppBarTheme(
            iconTheme: IconThemeData(color: ColorsPalette.white),
        ),
    ),
    child: AppBar(
        automaticallyImplyLeading: false,
        ...
    )
)
Moaz El-sawaf
  • 2,306
  • 1
  • 16
  • 33
  • 1
    I don't want to use Theme-Widgets everywhere. As I wrote above, this is a bug in Flutter that will hopefully be fixed with one of the next updates. – SouthbayDev Jan 09 '23 at 09:01
0

I had the same problem, I used a little trick until Flutter did not fix the bug!

appBarTheme: const AppBarTheme(
  centerTitle: true,
  iconTheme: IconThemeData(
    color: Color(0xFFFFFFFE),
  ),
),
Shajko
  • 107
  • 2
  • 8