CODEWITHSUNDEEP
flutter
Kosh
Kosh

Reputation: 1246

flutter: custom color for App Bar with ThemeData

How can I make a custom color for App Bar with ThemeData? accentColor is deprecated while colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.indigo)) expects type MaterialColor.

I know that I can make it this way

Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xFF0A0E21),
        title: Text('CAPTION'),
      ),

But I want to specify it in ThemeData

Upvotes: 0

Views: 560

Answers (2)

Kirill Bubochkin
Kirill Bubochkin

Reputation: 6343

As you mentioned, the first way is to set it with backroundColor property.

If this property is null, then the AppBarTheme.backgroundColor is used. AppBarTheme can be set using appBarTheme property of ThemeData.

If AppBarTheme.backgroundColor is also null, then AppBar uses the overall theme's ColorScheme.primary if the overall theme's brightness is Brightness.light, and ColorScheme.surface if the overall theme's brightness is Brightness.dark.

Upvotes: 1

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63594

Rather than overriding everything, it often makes sense to extend the parent theme. You can handle this by using the copyWith() method.

More about extending-the-parent-theme.

return MaterialApp(
  home: const T1(),
  theme: Theme.of(context).copyWith(
    appBarTheme: Theme.of(context).appBarTheme.copyWith(
          backgroundColor: const Color(0xFF0A0E21),
        ),
  ),

Upvotes: 1

Related Questions