Flutter/Material 3: AppBar ignores icon themes

SouthbayDev 0
Viewed 77

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!

android-appbarlayout flutter-theme material3 flutter-appbar flutter
1 Answers

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-Stepien0
Related