ThemeData PrimaryColor 不改变 appBar 背景颜色

Question

 class BMICalculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.red,
      ),
      home: InputPage(),
    );

我正在学习这门课程：https://www.udemy.com/course/flutter-bootcamp-with-dart/

在主题部分，她使用这个确切的代码将她的 appBar 变成红色。我的代码没有显示任何错误，但是我的 appBar 仍然是默认主题。

原色的描述在这里：https://api.flutter.dev/flutter/material/ThemeData-class.html

它没有说它已折旧，也没有表明任何最近的变化。

我的问题不是“如何使我的应用程序栏变为红色”，而是“为什么此代码未按预期执行？”

Answer 1

PrimaryColor

不能直接在

themeData

中工作，你必须在

colorScheme

中声明它

theme: ThemeData(colorScheme: ColorScheme.light(primary: Colors.red)),

您可以使用

primarySwatch

theme: ThemeData(primarySwatch: Colors.red),

或者你可以使用

appBarTheme

appBarTheme: AppBarTheme(
    backgroundColor: Colors.red
),

primarySwatch

不是颜色。是

MaterialColor

。这意味着它是材质应用程序将使用的不同深浅的颜色。

primaryColor

就是其中一种色调。准确地说，

primaryColor

通常等于

primarySwatch[500]

ThemeData

是保存所有主题设置的一个，也是控制应用程序外观的一个，但

ColorScheme

只是您创建的一组颜色，用于轻松维护应用程序的颜色。请注意，

ThemeData

类有一个参数

colorScheme

，因此您可以创建自己的

colorScheme

并将其添加到

ThemeData object

。

所有小部件样式继承自

ThemeData

（在 MaterialApp 中定义）而不是

ColorScheme

的颜色或主题，

colorScheme

只是您定义在

ThemeData

或应用程序中任何地方使用的额外颜色。

Answer 2

AppBar

背景颜色来自

appBarTheme(color:..)

。

我更喜欢扩展父主题，

return MaterialApp(
  primaryColor: Colors.green,// no effect on AppBar
  theme: Theme.of(context).copyWith(
    appBarTheme: Theme.of(context).appBarTheme.copyWith(
          color: Colors.red,
        ),
  ),

更多关于主题。

Answer 3

MaterialApp(
  theme: ThemeData.dark().copyWith(
    primaryColor: Color(0xFF090C22),
    backgroundColor: Color(0xFF090C22),
    scaffoldBackgroundColor: Color(0xFF090C22),
    appBarTheme: AppBarTheme(
      backgroundColor: Color(0xFF090C22),
    ),
  ),
);

Answer 4

我也在 udemy 上做同样的课程，并使用下面的颜色方案对我有用。应用栏应用原色。

colorScheme：const ColorScheme.light（主要：Colors.red，次要：Colors.white）

Answer 5

我遇到了同样的问题，问题是我正在使用primarySwatch并且它没有改变appBar的backgroundColor。查看我的代码。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const RootPage(),
    );
  }
}

class RootPage extends StatefulWidget {
  const RootPage({super.key});

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Hi you"),
      ),
    );
  }
}

有人可以帮我解决这个问题吗？