[英]How do I use the different shades of a color swatch in Flutter?
在默認的 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): ════════════════════════════════════════════════════════════════════════════════════════════════════
如何使用陰影?
TLDR
做
ThemeData(primarySwatch: Colors.lime),
不要
ThemeData(primarySwatch: Colors.lime.shade700),
primarySwatch 不是一種顏色。 這是所有可能的材料色調。
如果您查看ThemeData
的文檔,它會說:
主要調色板([primarySwatch]),從材料設計規范定義的色板之一中選擇。 這應該是 [Colors] 類中名稱中沒有“accent”的地圖之一。
這意味着在需要時,材質組件將使用 primary[500] 但也可能使用其他色調!
實際上, primarySwatch
是設置一堆不同顏色的快捷方式:
但是你可以根據你的需要單獨覆蓋它們,使用Color
(而不是 primarySwatch 需要的MaterialColor
)
在 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,
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.