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 i

Answer 1

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 2

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 3

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