web-dev-qa-db-ja.com

Flutterで色見本のさまざまな色合いを使用するにはどうすればよいですか？

Flutterを使用してアプリ開発を学習しようとしています。デフォルトのフラッターアプリケーションコードで、次のコードを

primarySwatch: Colors.blueGrey

primarySwatch: Colors.blueGrey[500]

しかし、これはエラーをスローします Message on the mobile

 ══╡ 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): ════════════════════════════════════════════════════════════════════════════════════════════════════

シェードの使い方は??

androiddartmaterial-designflutter
14
Kaushik Vijayakumar

[〜＃〜] tldr [〜＃〜]

行う

ThemeData(primarySwatch: Colors.Lime),

しない

ThemeData(primarySwatch: Colors.Lime.shade700),

primarySwatchはone色ではありません。可能なすべてのマテリアルシェードです。

ThemeDataのドキュメントを見ると、次のように書かれています。

マテリアルデザインの仕様で定義されたスウォッチの1つから選択されたプライマリカラーパレット（[primarySwatch]）。これは、名前に「アクセント」が含まれていない[Colors]クラスのマップの1つである必要があります。

これは、必要なときにマテリアルコンポーネントがプライマリ[500]を使用することを意味しますが、他のシェードも使用する可能性があります。

実際、primarySwatchは、さまざまな色を設定するためのショートカットです。

  • primaryColor
  • primaryColorLight/Dark
  • アクセントの色
  • ...

ただし、Color（primarySwatchが必要とするMaterialColorではなく）を使用して、ニーズに応じて個別にオーバーライドできます。

14
Rémi Rousselet