如何在Flutter中使用不同色调的色样？

Question

我正在尝试使用颤振来学习应用程序开发.在默认的flutter应用程序代码中,我尝试将以下代码更改为

primarySwatch: Colors.blueGrey

primarySwatch: Colors.blueGrey[500]

但这会引发错误

 ??? EXCEPTION CAUGHT BY WIDGETS LIBRARY ????????????????????????????????????????????????????????????
I/flutter ( 4512): The following assertion was thrown building MyApp(dirty):
I/flutter ( 4512): type 'Color' is not a subtype of type 'MaterialColor' of 'primarySwatch' where
I/flutter ( 4512):   Color is from dart:ui
I/flutter ( 4512):   MaterialColor is from package:flutter/src/material/colors.dart
I/flutter ( 4512):   int is from dart:core
I/flutter ( 4512): 
I/flutter ( 4512): Either the assertion indicates an error in the framework itself, or we should provide substantially
I/flutter ( 4512): more information in this error message to help you determine and fix the underlying cause.
I/flutter ( 4512): In either case, please report this assertion by filing a bug on GitHub:
I/flutter ( 4512):   https://github.com/flutter/flutter/issues/new
I/flutter ( 4512): 
I/flutter ( 4512): When the exception was thrown, this was the stack:
I/flutter ( 4512): #0      new ThemeData (package:flutter/src/material/theme_data.dart:78:19)
I/flutter ( 4512): #1      MyApp.build (/data/user/0/com.hackathon.gunbanana/cache/gun_bananaEMVSSI/gun_banana/lib/main.dart:11:18)
I/flutter ( 4512): #2      StatelessElement.build (package:flutter/src/widgets/framework.dart:3678:28)
I/flutter ( 4512): #3      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3625:15)
I/flutter ( 4512): #4      Element.rebuild (package:flutter/src/widgets/framework.dart:3478:5)
I/flutter ( 4512): #5      ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3605:5)
I/flutter ( 4512): #6      ComponentElement.mount (package:flutter/src/widgets/framework.dart:3600:5)
I/flutter ( 4512): #7      Element.inflateWidget (package:flutter/src/widgets/framework.dart:2890:14)
I/flutter ( 4512): #8      Element.updateChild (package:flutter/src/widgets/framework.dart:2693:12)
I/flutter ( 4512): #9      RenderObjectToWidgetElement._rebuild (package:flutter/src/widgets/binding.dart:852:16)
I/flutter ( 4512): #10     RenderObjectToWidgetElement.mount (package:flutter/src/widgets/binding.dart:823:5)
I/flutter ( 4512): #11     RenderObjectToWidgetAdapter.attachToRenderTree.<anonymous closure> (package:flutter/src/widgets/binding.dart:769:17)
I/flutter ( 4512): #12     BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2205:19)
I/flutter ( 4512): #13     RenderObjectToWidgetAdapter.attachToRenderTree (package:flutter/src/widgets/binding.dart:768:13)
I/flutter ( 4512): #14     BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding&WidgetsBinding.attachRootWidget (package:flutter/src/widgets/binding.dart:657:7)
I/flutter ( 4512): #15     runApp (package:flutter/src/widgets/binding.dart:699:7)
I/flutter ( 4512): #16     main (/data/user/0/com.hackathon.gunbanana/cache/gun_bananaEMVSSI/gun_banana/lib/main.dart:3:16)
I/flutter ( 4512): #17     _startIsolate.<anonymous closure> (dart:isolate-patch/dart:isolate/isolate_patch.dart:279)
I/flutter ( 4512): #18     _RawReceivePortImpl._handleMessage (dart:isolate-patch/dart:isolate/isolate_patch.dart:165)
I/flutter ( 4512): ????????????????????????????????????????????????????????????????????????????????????????????????????

我该如何使用阴影？

Answer 1

TLDR

做

ThemeData(primarySwatch: Colors.lime),

别

ThemeData(primarySwatch: Colors.lime.shade700),

primarySwatch不是一种颜色.这是所有可能的物质色调.

如果你看一下ThemeData它的文档,它会说:

主要调色板([primarySwatch]),从材料设计规范定义的其中一个样本中选择.这应该是[Colors]类中其中一个名称中没有"重音符号"的地图.

这意味着在需要时材料组件将使用primary [500],但也可能使用其他阴影!

实际上,primarySwatch是设置一堆不同颜色的快捷方式:

• primaryColor
• primaryColorLight /暗
• 强调色彩
• ...

但你可以根据你的需要分别覆盖它们,Color而不是(而不是MaterialColor那个primarySwatch要求)

Answer 2

在 main.dart 文件中，在 MyApp 类之外制作自定义颜色，如下所示：

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

MaterialColor colorCustom = MaterialColor(0xFFFF5C57, color);

然后将其设置为 ThemeData 中的 primarySwatch 属性，如下所示

primarySwatch: colorCustom,