为什么 primaryColorDark 比 primaryColor 浅？

Question

我添加了一个自定义的 primarySwatch 并注意到发生了这种情况。我将 link 分享到我从 Theme.of(context) 获得的颜色的屏幕截图，primaryColorDark 明显比 primaryColor 亮，这显然违背了目的。谁能给我一个解决方案？

此外，有没有办法为 Theme.of(context) 手动设置 primaryColor、primaryColorDark、highlightColor 等？

我的 main.dart 文件：

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations(
    [DeviceOrientation.portraitUp],
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  static const Map<int, Color> color =
  {
    50: Color.fromRGBO(44,108,176, .1),
    100: Color.fromRGBO(44,108,176, .2),
    200: Color.fromRGBO(44,108,176, .3),
    300: Color.fromRGBO(44,108,176, .4),
    400: Color.fromRGBO(44,108,176, .5),
    500: Color.fromRGBO(44,108,176, .6),
    600: Color.fromRGBO(44,108,176, .7),
    700: Color.fromRGBO(44,108,176, .8),
    800: Color.fromRGBO(44,108,176, .9),
    900: Color.fromRGBO(44,108,176, 1),
  };

  final MaterialColor themeColor = MaterialColor(0xff2C6CB0, color);

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (_) => AuthProvider(),
        ),
      child: MaterialApp(
        title: 'Flutter App',
        theme: ThemeData(
          primarySwatch: themeColor,
        ),
        routes: {
          ServicesScreen.routeName: (ctx) => ServicesScreen(),
        },
        home: SplashScreen(),
      ),
    );
  }
}

我的服务屏幕():

class ServicesScreen extends StatelessWidget {
  static const routeName = '/services-screen';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('My Services'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Container(
            height: 50,
            color: Theme.of(context).primaryColorLight,
            child: Text('Primary Light'),
          ),
          Container(
            height: 50,
            color: Theme.of(context).primaryColor,
            child: Text('Primary'),
          ),
          Container(
            height: 50,
            color: Theme.of(context).primaryColorDark,
            child: Text('Primary Dark'),
          ),
          Container(
            height: 50,
            color: Theme.of(context).accentColor,
            child: Text('Accent'),
          ),
          Container(
            height: 50,
            color: Theme.of(context).highlightColor,
            child: Text('Highlight'),
          ),
          Container(
            height: 50,
            color: Theme.of(context).backgroundColor,
            child: Text('Background'),
          ),
        ],
      ),
    );
  }
}

Link to the output i get

Answer 1

首先，有一种方法可以像这样在主题中设置 primaryColor 和 primaryDarkColor 的颜色：

  static Color lightPrimary = //This is color;
  static Color darkPrimary = //This is color;
  static Color lightAccent = //This is color;
  static Color darkAccent = //This is color;
  static Color lightBG = //This is color;
  static Color darkBG = //This is color;
  static Color badgeColor = //This is color;

  static ThemeData appTheme = ThemeData(
    backgroundColor: lightBG,
    primaryColor: lightPrimary,
    accentColor: lightAccent,
    cursorColor: lightAccent,
    scaffoldBackgroundColor: lightBG,
    buttonColor: lightBG);

然后在您的 MaterialApp 中将主题设置为这个： theme: appTheme,

并且您可以通过 Theme.of(context).//exampleColor

使用所有颜色

我建议您改用此选项，因为这可能是您的主要错误是让样本在您给它的颜色之间做出决定，并且它不区分阴影。

为什么 primaryColorDark 比 primaryColor 浅？

Why is primaryColorDark lighter than the primaryColor?

themes

colors

dart

flutter