为什么primaryColorDark比primaryColor更亮？

Question

我添加了一个自定义的primarySwatch，并注意到了这种情况。我共享了从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(),
      ),
    );
  }
}

我的ServicesScreen（）：

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使用所有颜色

我建议您移至此选项，因为这可能是您的主要错误来自让色板决定您给它的颜色之间的区别，并且它不会区分阴影。