flutter - 为什么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使用所有颜色

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