Question

我可以将AppBar的背景颜色设置为Colors.amber。这会自动将文本颜色设置为黑色。我知道可能出现的可访问性问题，但无论如何我希望文本颜色为白色。

我仍然可以设置AppBar的文字颜色，但我想将其设置为普遍。

这是我用于我的应用程序的主题。

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

Answer 1

我认为最简单的方法是为正在使用的主题调整标题颜色：

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

Answer 2

我使用了一种稍有不同的技术，我没有使用主题，只是自定义了它的外观，因此在创建它时，它看起来像这样：

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

Answer 3

以下是设置AppBar标题颜色的方法。

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

我将写出ThemeData的属性更改会产生什么影响。

此处编写的内容是尽可能不影响其他小部件的一种方式。

如果您想更改应用栏标题的颜色，

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

如果您想更改应用栏的图标颜色，

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

如果要更改FAB的图标颜色。

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

此外，当您想要更改FAB的颜色时。
仅通过ThemeData的属性是不可能的。因此，您需要直接指定它。但是，最好使用Theme.of(context)。

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

Answer 5

您可以使用AppBarTheme进行设置

var myApi = {"Author": "..", "Description": "..", "Image": "data://...."};
document.getElementById("myImg").src = myApi["Image"];

Answer 6

到目前为止，我测试的解决方案是在 appBarTheme

中使用 foregroundColor

这对我来说普遍适用

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

Answer 7

在首次调用main.dart文件时运行的小部件中，您可以添加一个命名参数主题，该主题使您可以添加全局样式

在小部件的构建方法中，

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

在这里我为主题创建了一个单独的方法，称为_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()
   );
}

对于appBarTheme，我有一个单独的方法_appBarTheme

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

Answer 8

简单高效，更少代码的方法。使用具有所需颜色的浅色主题。

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

Answer 9

首先，我想让您知道有3种方法可以在颤动中设置颜色。

因此，您问您要在应用栏中设置颜色还是文字。因此，如果您在Text方法的style属性中设置颜色，则可以使用。让我告诉你它是如何工作的。我还将向您展示3种设置颜色的方法。您是否使用主题属性都没有关系，因为将文本的颜色设置为不同的颜色。这样一来，我就没有在示例中使用Theme属性。

第1个：

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

第二个：

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

title中的

AppBar使用headline6，而floatingActionBar使用primarySwatch中的颜色。尽管没有在TextTheme中进行记录，但是我对其进行了测试。例如：要在FloatingActionButton中用红色AppBar和蓝色标题文本，您在theme中的MaterialApp应该看起来像这样：

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

Answer 11

这是给我的答案

主题：主题数据（主文本主题：文本主题（标题 6：文本样式（颜色：Colors.blue， ) ) )

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

11 个答案: