如何改变文字颜色的 AppBar，图标颜色的 FAB 普遍使用的主题？

小开

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

小开

最佳答案

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

小开

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,

小开

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

小开

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

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

小开

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

小开

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

小开

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

小开

This was the answer for me:

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

小开

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

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

小开

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.

小开

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