0

Im applying a global theme to the IconButtons within a MaterialApp, so I set up an iconButtonTheme. This theme handles color changes to the IconButtons when the IconButton is disabled. This appears to be working.

However, I want my action iconButtons in my appBar actions (and preferably the back button in the appBar) to be a different color.

How can I override the iconButtonTheme value in different places within the app? Does Flutter use the concept of cascade in styling widgets?

return MaterialApp(
   theme: ThemeData(
      useMaterial3: true,
      iconButtonTheme: IconButtonThemeData(
          style: ButtonStyle(
            iconColor: MaterialStateProperty.resolveWith((states) {
              if (states.contains(MaterialState.disabled)) {
                return Color(Colors.grey.value);
              } else {
                return Color(Colors.purple.value);
              }
            }),
          ),
        ),

...
      appBarTheme: AppBarTheme(
             actionsIconTheme: IconThemeData(
               color: Color(Colors.red.value),
               size: 30,
             ),
            ),

On the page widgets, I have even tried to override the theme values locally like this:


@override
  Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text('My Title'),
    actions: <Widget>[
        IconButton(
          onPressed: () {
          },
          icon: const Icon(Icons.delete),
          color: Colors.red,
        ),

...

but the local color setting is not being honored.

Ive tried setting the actionsIconTheme value in appBarTheme, but the IconButtons in the appBar display as the same color as the rest of the IconButtons on the page. I've even tried setting a color value on the individual IconButton widgets on the screen, but that didnt work either. It's as if any IconButton in the entire app gets forced the theme value regardless of another theme value is being set.

Even if I could manually ignore the iconButtonTheme value on the appBar IconButtons and instead provide colors directly on the individual widgets would be fine at this point. But everything I've tried just seems to be overwritten by the iconButtonTheme color value.

sails
  • 11
  • 3

1 Answers1

0

iconTheme will apply to the IconButton.

theme: ThemeData(
    appBarTheme: AppBarTheme(
      iconTheme: IconThemeData(color: Colors.red),
    ),
    iconTheme: IconThemeData(
      color: Colors.purple,
    )),
Md. Yeasin Sheikh
  • 54,221
  • 7
  • 29
  • 56
  • Tried this and it didn't work either. Is there any way to do this in my theme instead of having to make repetitive changes thoughout the app? – sails Mar 23 '23 at 22:18
  • try `iconTheme` and `appBarTheme` for theme level – Md. Yeasin Sheikh Mar 24 '23 at 08:53
  • I dont want all icons to change color, only those on iconButtons. – sails Mar 24 '23 at 13:33
  • well I am thinking you will have finite appBar, you can do it manually – Md. Yeasin Sheikh Mar 24 '23 at 13:38
  • Thanks Yeasin. I wish your solution for manual changes was working but even the local color setting on the widget is being overridden by the iconButton theme so it doesnt look like Im able to make the changes manually. – sails Mar 24 '23 at 13:46