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

Question

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,
  ),
),

Answer 1

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

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

Answer 2

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,
),

Answer 3

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),
    ),
  ),
);

Answer 4

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,

Answer 5

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,
     ),);
 }

Answer 6

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)
      )
    )
  ),
),

Answer 7

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

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

Answer 8

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,
          ),
        ),
      ),
    ),
  )

Answer 9

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),));

Answer 10

This was the answer for me:

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