web-dev-qa-db-fra.com

Comment utiliser les différentes nuances d'un échantillon de couleur dans Flutter?

J'essaie d'apprendre le développement d'applications à l'aide de flutter. Dans le code d'application de flottement par défaut, j'ai essayé de changer le code suivant en

primarySwatch: Colors.blueGrey

primarySwatch: Colors.blueGrey[500]

mais cela jette une erreur 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): ════════════════════════════════════════════════════════════════════════════════════════════════════

comment utiliser les teintes ??

androiddartmaterial-designflutter
8
Kaushik Vijayakumar

TLDR

Faire

ThemeData(primarySwatch: Colors.Lime),

Ne le fais pas

ThemeData(primarySwatch: Colors.Lime.shade700),

primarySwatch n'est pas une couleur. Ce sont toutes les nuances de matériaux possibles.

Si vous regardez dans le doc de ThemeData, il dit:

La palette de couleurs primaires (le [primarySwatch]), choisie parmi l'un des échantillons définis par les spécifications de conception du matériau. Cela devrait être l'une des cartes de la classe [Couleurs] qui n'ont pas "d'accent" dans leur nom.

Cela implique qu'en cas de besoin, le composant matériel utilise le primaire [500] mais peut également utiliser d'autres teintes!

En fait, primarySwatch est un raccourci pour définir un tas de couleurs différentes:

  • couleur primaire
  • primaryColorLight/Dark
  • accentColor
  • ...

Mais vous pouvez les remplacer séparément en fonction de vos besoins, avec un Color (et non le MaterialColor requis par primarySwatch)

14
Rémi Rousselet