Question

我正在尝试为应用设置通用主题，因此我需要将应用栏颜色更改为指示十六进制代码＃0f0a1a的颜色

const MaterialColor toolbarColor = const MaterialColor(
    0xFF151026, const <int, Color>{0: const Color(0xFF151026)});

我尝试用这段代码制作自定义颜色，但失败了。我该如何从themeData做到这一点？

Answer 1

像这样声明您的颜色

const PrimaryColor = const Color(0xFF151026);

，然后在MaterialApp级别（将更改整个应用程序中的AppBar颜色）更改PrimaryColor

return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
   primaryColor: PrimaryColor,
   ),
  home: MyApp(),
);

，如果要在Widget级别进行更改，只需更改backgroundColor

  appBar: AppBar(
    backgroundColor: PrimaryColor,
  ),

Answer 2

包括backgroundColor：到应用栏

   appBar: AppBar(
      title: const Text('Example'),
      backgroundColor: Colors.black,
    ),

Answer 3

如果您不想更改整个PrimaryColor，也可以在AppBarTheme中定义ThemeData：

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
       appBarTheme: AppBarTheme(
     color: Color.fromARGB(200, 255, 255, 255),
  )),
  home: myApp(),
)

我们如何在Flutter中更改Appbar背景颜色

3 个答案: