CODEWITHSUNDEEP
dartflutterflutter-layout
Vineeth Mohan
Vineeth Mohan

Reputation: 2864

How can we change appbar background color in flutter

I am trying to set a common theme for app so I need to change appbar color as a color that indicates hex code #0f0a1a 

const MaterialColor toolbarColor = const MaterialColor(
    0xFF151026, const <int, Color>{0: const Color(0xFF151026)});

I try this piece of code to make a custom color but fails. How can I do this from themeData?

Upvotes: 76

Views: 196953

Answers (14)

Muhammed Nawaf M V
Muhammed Nawaf M V

Reputation: 1

if you want to change the background color of AppBar in the whole app you should change the MaterialApp PrimaryColor

return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.red,
      ),
      home: HomeScreen(),
    );

or you want too change the background color of specific widget level. You should change the backgroundColor of AppBar

return Scaffold(
      backgroundColor: Colors.green,
      appBar: AppBar(
        backgroundColor: Colors.red,
      ),
    );

Upvotes: 0

Yuriy N.
Yuriy N.

Reputation: 6067

  1. If you don't have a very special case -- don't change the app bar per screen, change it per app (for all screens).

  2. Only use colors specified in your ColorScheme: background or surface:

     themeData = themeData.copyWith(
       appBarTheme: AppBarTheme(
     //  color: themeData.primaryColor,
     backgroundColor: themeData.colorScheme.background, //or surface
     foregroundColor: themeData.colorScheme.primary,
     elevation: 0,
   ));

Above code allows to change appBar dynamically.

Upvotes: 5

Madhanprasath
Madhanprasath

Reputation: 1

For Changing Background color of the appbar in flutter:

return Scaffold(
      appBar: AppBar(
        backgroundColor:Colors.black,
      ),
),

Upvotes: -1

Jorgesys
Jorgesys

Reputation: 126445

For the background color, you can use backgroundColor property, for the text color you can apply a style.

Example:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Jorgesys', style: TextStyle(color: Colors.cyanAccent),),
        backgroundColor: Colors.green, //App Bar background color.            
      ),
      body: Column(
      ...
      ...

enter image description here

Upvotes: 0

WSBT
WSBT

Reputation: 36323

In the current version of Flutter, to comply with the new "Material You" design, we should try to use ColorScheme whenever possible. The app bar color is controlled by:

  1. If theme brightness is light, use primary color.

  2. If theme brightness is dark, use surface color.

For examples:

Light Mode

Set brightness to light, then set primary and onPrimary to yellow and black, and set all other colors to grey to showcase that they are not relevant to AppBar:

light mode demo

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme(
      brightness: Brightness.light,
      primary: Colors.yellow,
      onPrimary: Colors.black,
      // Colors that are not relevant to AppBar in LIGHT mode:
      primaryVariant: Colors.grey,
      secondary: Colors.grey,
      secondaryVariant: Colors.grey,
      onSecondary: Colors.grey,
      background: Colors.grey,
      onBackground: Colors.grey,
      surface: Colors.grey,
      onSurface: Colors.grey,
      error: Colors.grey,
      onError: Colors.grey,
    ),
  ),
  home: Scaffold(
    appBar: AppBar(title: Text("Light Mode Demo")),
  ),
)

Dark Mode

Set brightness to dark, then set surface and onSurface to yellow and black, all others to grey to showcase that they are not relevant to AppBar.

enter image description here

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme(
      brightness: Brightness.dark,
      surface: Colors.yellow,
      onSurface: Colors.black,
      // Colors that are not relevant to AppBar in DARK mode:
      primary: Colors.grey,
      onPrimary: Colors.grey,
      primaryVariant: Colors.grey,
      secondary: Colors.grey,
      secondaryVariant: Colors.grey,
      onSecondary: Colors.grey,
      background: Colors.grey,
      onBackground: Colors.grey,
      error: Colors.grey,
      onError: Colors.grey,
    ),
  ),
  home: Scaffold(
    appBar: AppBar(title: Text("Dark Mode Demo")),
  ),
)

Upvotes: 25

sourav pandit
sourav pandit

Reputation: 9105

If you are using material 3. you have to take care of tint and forground color also.

Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.white //your color,
      surfaceTintColor: Colors.white // for material 3 you have to make it transparent,
 )

Upvotes: 2

Dhruvam Sharma
Dhruvam Sharma

Reputation: 1793

With the new Material 3 and Flutter 3 updates, background color for AppBar can be changed using surfaceTintColor.

Either inside the AppBar like this:

return AppBar(
  ...
  surfaceTintColor: backgroundColor ?? CommonColors.lightColor,
 );

Or inside the ThemeData class like this:

ThemeData.light().copyWith(
  ...
  appBarTheme: AppBarTheme(
    backgroundColor: CommonColors.lightColor,
    surfaceTintColor: CommonColors.lightColor,
    actionsIconTheme: const IconThemeData(color: Colors.white),
  ),
),

Upvotes: 7

Viacheslav Tolstopiatenko
Viacheslav Tolstopiatenko

Reputation: 21

To change Appbar backgroundColor in the whole app:

MaterialApp(theme: ThemeData(appBarTheme: AppBarTheme(backgroundColor: Colors.blueGrey),),);

Upvotes: 2

mondayrris
mondayrris

Reputation: 724

Since flutter 2.5+, the working solution will be simply use ColorScheme in ThemeData:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: const AppBarWidget(),
      theme: ThemeData.light().copyWith(
        colorScheme: ColorScheme.fromSwatch().copyWith(
          // change the appbar color
          primary: Colors.green[800],
        ),
      ),
    );
  }
}

class AppBarWidget extends StatelessWidget {
  const AppBarWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AppBar'),
      ),
    );
  }
}

Upvotes: 0

RileyManda
RileyManda

Reputation: 2641

You can use Flutter ThemeData,if you want to set a theme for your entire application:

class HomePage extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'MyApp',),
    );
  }
}....

Then if you want to change certain elements of your primary and secondary colors,you can achieve this using the colorScheme from Swatch.

Learn More Here

Here is an example using colorScheme :

    class HomePage extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'MyApp',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSwatch(
              primarySwatch: Colors.blue,//the color of your Appbar will be blue
            ).copyWith(
              secondary: Colors.green,
//your accent color-floating action will appear green
            ),
          ),
          home: MyHomePage(title: 'MyApp',),
        );

Upvotes: 0

Raouf Rahiche
Raouf Rahiche

Reputation: 31316

Declare your Color:

const primaryColor = Color(0xFF151026);

In the MaterialApp level (will change the AppBar Color in the whole app ) change primaryColor

return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
   primaryColor: primaryColor,
   ),
  home: MyApp(),
);

and if you want to change it on the Widget level modify the backgroundColor

  appBar: AppBar(
    backgroundColor: primaryColor,
  ),

Upvotes: 99

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63559

According to AppBar description On Flutter 2.5, it uses ColorScheme.primary by default.

The default app bar [backgroundColor] is the overall theme's [ColorScheme.primary] if the overall theme's brightness is [Brightness.light]. Unfortunately this is the same as the default [ButtonStyle.foregroundColor] for [TextButton] for light themes. In this case a preferable text button foreground color is [ColorScheme.onPrimary], a color that contrasts nicely with [ColorScheme.primary]. to remedy the problem, override [TextButton.style]:

try using colorScheme

 MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch(
          primarySwatch: const Color(0xFF151026),
        ),
      ),
      home: MyApp(),
    ),

And to use somewhere else

 Theme.of(context).colorScheme.primary,

Or you can just call backgroundColor on Appbar.

For more, visit ThemeData-class

Upvotes: 2

Hugo H
Hugo H

Reputation: 6362

If you don't want to change the whole PrimaryColor you can also define AppBarTheme in your ThemeData:

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
       appBarTheme: AppBarTheme(
     color: const Color(0xFF151026),
  )),
  home: myApp(),
)

Upvotes: 73

ALEXANDER LOZANO
ALEXANDER LOZANO

Reputation: 2034

include backgroundColor: to appbar

   appBar: AppBar(
      title: const Text('Example'),
      backgroundColor: Colors.black,
    ),

Upvotes: 10

Related Questions