CODEWITHSUNDEEP
flutter
ryanafrish7
ryanafrish7

Reputation: 3410

How to change text color of AppBar, icon color of FAB universally using theme?

I am able to set the background color of AppBar to Colors.amber. This automatically sets the text color to Black. I am aware of the accessibility issues that may arise but anyways I want the text color to be White.

I am still able to set the text color from the AppBar but I would like to set it universally.

Here's the theme I'm using for my app.

title: 'Flutter Demo',
theme: new ThemeData(
  primarySwatch: Colors.amber,
  textTheme: Theme.of(context).textTheme.apply(
    bodyColor: Colors.white,
    displayColor: Colors.white,
  ),
),

Upvotes: 88

Views: 138412

Answers (14)

Nader Dabit
Nader Dabit

Reputation: 53681

I think the most straightforward way of doing this is to adjust the title color for the theme that you are working with:

theme: ThemeData(
  primarySwatch: Colors.grey,
  primaryTextTheme: TextTheme(
    headline6: TextStyle(
      color: Colors.white
    )
  )
)

Upvotes: 91

Dev Pandey
Dev Pandey

Reputation: 1

Just use appbar theme : ThemeData( useMaterial3: true, primarySwatch: Colors.purple, appBarTheme: AppBarTheme(foregroundColor: Colors.white), scaffoldBackgroundColor: Colors.black, shadowColor: Colors.black, textTheme: Theme.of(context) .textTheme .apply(fontSizeFactor: 1.3, displayColor: Colors.white),

    // textTheme: TextTheme(titleLarge: TextStyle(color: Colors.white)),
  ),

Upvotes: 0

Enough Technology
Enough Technology

Reputation: 795

If you are smart developer then you will also try this code😊

 appBar: AppBar(

    title: const Text("Layout Project" , style: TextStyle(color: Colors.black),),
    leading: const Icon(Icons.close, color: Colors.black,),
    actions: const [
      Icon(Icons.file_upload),
      Padding(padding: EdgeInsets.symmetric(horizontal: 16),
      child: Icon(Icons.delete, color: Colors.black,),),
      Icon(Icons.more_vert,color: Colors.black,)
    ],
    backgroundColor: Colors.amber,
  ) ,

Upvotes: 0

Mina Samir
Mina Samir

Reputation: 1609

After updating to Flutter 2.5.1 stable channel

They added a lot of updates to the theme. Also, you almost can theme everything for the float action button and app bar use the following attributes ..

ThemeData(
        floatingActionButtonTheme: FloatingActionButtonThemeData(
            foregroundColor: Coolor.FLOAT_ACTION_BTN_ICON,
            backgroundColor: Coolor.FLOAT_ACTION_BTN_BACKGROUND),
        appBarTheme: AppBarTheme(
            titleTextStyle: TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.bold,
                color: Coolor.APP_BLUE),
            backgroundColor: Coolor.WHITE,
            foregroundColor: Coolor.APP_BLUE));

and in your material app widget, you can pass the theme we have just implemented.

MaterialApp(
        title: 'FMS',
        theme: your_theme);

Hoping that helped.

Upvotes: 6

Pavan Kumar V
Pavan Kumar V

Reputation: 787

So far the solution I tested is using a foregroundColor in appBarTheme

This worked fine for me Universally

MaterialApp(
     theme: ThemeData(
          appBarTheme: AppBarTheme(
          backgroundColor: Colors.blue,
          foregroundColor: Colors.white //here you can give the text color
          )
     )
)

enter image description here

MaterialApp(
     theme: ThemeData(
          appBarTheme: AppBarTheme(
          backgroundColor: Colors.white,
          foregroundColor: Colors.black//here you can give the text color
          )
     )
)

enter image description here

Upvotes: 45

AhmedElsherif
AhmedElsherif

Reputation: 11

This was the answer for me:

  theme: ThemeData(
  primaryTextTheme: TextTheme(
    headline6: TextStyle(
      color: Colors.blue,
    )
  )
)

Upvotes: 0

Newaj
Newaj

Reputation: 4450

title of AppBar uses headline6 and floatingActionBar uses color from primarySwatch. Though it is not documented in TextTheme, but I tested it. For example : to have red FloatingActionButton and blue title text in AppBar your theme inside MaterialApp should look like the following :

  MaterialApp(
    theme: ThemeData(
      primarySwatch: Colors.red,
      appBarTheme: AppBarTheme(            
        textTheme: TextTheme(
          headline6: TextStyle(
            color: Colors.blue,
            fontWeight: FontWeight.bold,
            fontSize: 28.0,
          ),
        ),
      ),
    ),
  )

Upvotes: 2

Jorge Wander Santana Ureña
Jorge Wander Santana Ureña

Reputation: 1272

You can set it with AppBarTheme

theme: new ThemeData(
  textTheme: Theme.of(context).textTheme.apply(
    appBarTheme: AppBarTheme(
      textTheme: TextTheme(
        // center text style
        headline6: TextStyle(
          color: Colors.black
        ),
        // Side text style
        bodyText2: TextStyle(color: Colors.black)
      )
    )
  ),
),

Upvotes: 4

Hussnain Haidar
Hussnain Haidar

Reputation: 2258

Easy and efficient and, less code method. Use light theme with desired color.

theme: ThemeData.light().copyWith(
    accentColor: Colors.amber,
    primaryColor: Colors.amber,
),

Upvotes: 1

Arthur Facredyn
Arthur Facredyn

Reputation: 1148

I used a slightly different technique, I didn't use a theme, I just customized its appearance, so that when I created it looked like this: 

appBar: new AppBar(
  iconTheme: IconThemeData(
    color: Colors.white
  ),
  title: const Text('Saved Suggestions', style: TextStyle(
    color: Colors.white
  )),
  backgroundColor: Colors.pink,
),

Upvotes: 89

Ozmen Celik
Ozmen Celik

Reputation: 169

Firstly I wanna let u know that there are 3 ways to set colors in flutter.

So u asked u wanna set color or text in app bar. So it works if u set color in style property of Text method. Let me show you how it works. And also I will show you 3 ways of setting color. It doesn't matter if u use theme property or not because setting color of Text works as diffrent. Thats way I didn't use Theme property in examples.

1th:

Scaffold(
  appBar: AppBar(
    title: Text("App Name",
    style: TextStyle(color: Colors.colorname),);

2th : 

Scaffold(
  appBar: AppBar(
    title: Text("App Name",
    style: TextStyle(color: Color(0xffffff),));

3th :

Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.white,
    title: Text("App Name",
    style: TextStyle(color: Color.fromRGBO(0, 0, 0, 0, 0),));

Upvotes: 1

Blacksmith
Blacksmith

Reputation: 762

In the widget that runs when you first call main.dart file, you can add a named parameter theme which enables you to add global styles

In the build method of the widget,

Widget build(BuildContext context) {

return MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: _buildLightTheme(),
    title: 'title of app',
    home: LoginPage(app: app),
    initialRoute: '/login',
    routes: <String, WidgetBuilder>{
      "/login": (BuildContext context) => LoginPage(app: app,)
    });
 }

Here I have created a separate method for my themes called _buildLightTheme

ThemeData _buildLightTheme() {
   final ThemeData base = ThemeData.light();
    return base.copyWith(
     accentColor: kUndaGreen,
     scaffoldBackgroundColor: kUndaWhite,
     cardColor: Colors.white,
     textSelectionColor: Colors.amberAccent,
     errorColor: Colors.green,
     textSelectionHandleColor: Colors.black,
    appBarTheme:_appBarTheme()
   );
}

For the appBarTheme I have a separate method _appBarTheme

AppBarTheme _appBarTheme(){
  return AppBarTheme( 
     elevation: 0.0,
     color: kUndaGreen,
     iconTheme: IconThemeData(
       color: Colors.white,
     ),);
 }

Upvotes: 4

ko2ic
ko2ic

Reputation: 2092

I will write what the change in the property of ThemeData affects.

The content written here is a way that does not affect other widgets as much as possible.

If you want to change the color of appbar's title,

  primaryTextTheme: TextTheme(
    title: TextStyle(
      color: Colors.white
    )
  ),

If you want to change the icon color of the appbar,

  primaryIconTheme: const IconThemeData.fallback().copyWith(
    color: Colors.white,
  ),

If you want to change icon color of FAB.

  accentIconTheme: const IconThemeData.fallback().copyWith(
    color: Colors.white,
  ),

In addition, when you want to change the color of FAB.
It is impossible only by the property of ThemeData. So you need to specify it directly. However, it would be better to use Theme.of(context).

  floatingActionButton: FloatingActionButton(
    backgroundColor: Theme.of(context).primaryColor,

Upvotes: 13

Dhrumil Shah - dhuma1981
Dhrumil Shah - dhuma1981

Reputation: 15789

Here is the way you can set the AppBar Title color.

return new MaterialApp(
  theme: Theme.of(context).copyWith(
      accentIconTheme: Theme.of(context).accentIconTheme.copyWith(
        color: Colors.white
      ),
      accentColor: Colors.amber,
      primaryColor: Colors.amber,
      primaryIconTheme: Theme.of(context).primaryIconTheme.copyWith(
        color: Colors.white
      ),
      primaryTextTheme: Theme
          .of(context)
          .primaryTextTheme
          .apply(bodyColor: Colors.white)),
  home: Scaffold(
    appBar: AppBar(
      title: Text("Theme Demo"),
      leading: IconButton(
        onPressed: (){},
        icon: Icon(Icons.menu),
      ),
    ),
    floatingActionButton: FloatingActionButton(
      child: Icon(Icons.add),
    ),
  ),
);

Upvotes: 16

Related Questions