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