CODEWITHSUNDEEP
androidvisual-studioflutterdart
Megantara
Megantara

Reputation: 377

The argument type 'Color?' can't be assigned to the parameter type 'MaterialColor?

enter image description here

I want to set the background Colors.yellow[700] in flutter,but when i add symbol "[]" or Colors.yellow.shade600, but i can't set the value for background. It shows error & the error is

The argument type 'MaterialColor' can't be assigned to the parameter type 'Paint'

Upvotes: 36

Views: 51481

Answers (5)

Criss Gibran
Criss Gibran

Reputation: 104

if you want to use your own custom colors in the primarySwatch of a theme, then declare this:

    MaterialColor mainAppColor = const MaterialColor(0xFF89cfbe, <int, Color>{
         50: Color(0xFF89cfbe),
         100: Color(0xFF89cfbe),
         200: Color(0xFF89cfbe),
         300: Color(0xFF89cfbe),
         400: Color(0xFF89cfbe),
         500: Color(0xFF89cfbe),
         600: Color(0xFF89cfbe),
         700: Color(0xFF89cfbe),
         800: Color(0xFF89cfbe),
         900: Color(0xFF89cfbe),
   },

);

then in your themeData, apply this color to the primarySwatch like that:

    @override
       Widget build(BuildContext context) {
          return MaterialApp(
       theme: ThemeData(
       primarySwatch: mainAppColor,
     ),
     home: const SomeBlaBlaPage(),
   );
 }

Upvotes: 3

just.a.guy
just.a.guy

Reputation: 300

I was having the same problem, in a situation where I was trying to pass the color value as a parameter to a flutter class.

My problem is that there are multiple uses of the words "Color", "color", and "Colors" as used in the default application.

In the "Material You" framework there is a class named MaterialColor. This is not stated. All colors in Material classes are of type MaterialColor. The "Colors" class is a Material class that has public elements having the primary colors are names. Each of these elements is a List of type "MaterialColor".

The problem is that Dart the base language of flutter.

It too has a class named Color. Because of type safety the two classes MaterialColor and Color are incompatible.

Therefore whenever you want to create or reference a color in the Material frame work, use the type MaterialColor rather than the Dart type "Color"

And be careful when you read a parameter named color or colors! Think to yourself that this parameter is really of type MaterialColor, and not the Dart Color type. All elements of type color in the Material framework are of type MaterialColor!

Color dColor = const Color(0xFF42A5F5); // Dart

MaterialColor mColor = Colors.green; // Material

dColor = mColor; // Error;

mColor = dColor // Error;

There is no automatic conversion for these two different types

Upvotes: 1

Mahdi
Mahdi

Reputation: 1060

Also you can use colorScheme property and set like below :

theme: ThemeData(
    colorScheme: ColorScheme.fromSwatch().copyWith(

      primary: const Colors.yellow[700],
      secondary: const Colors.yellow.shade700,

      // or from RGB

      primary: const Color(0xFF343A40),
      secondary: const Color(0xFFFFC107),

    ),
  ),

Upvotes: 54

Yashawant
Yashawant

Reputation: 1150

If you want primarySwatch with Colors.yellow[700] as primaryColor you would have to create your own MaterialColor from color Colors.yellow[700] like this

final Map<int, Color> _yellow700Map = {
  50: Color(0xFFFFD7C2),
  100: Colors.yellow[100],
  200: Colors.yellow[200],
  300: Colors.yellow[300],
  400: Colors.yellow[400],
  500: Colors.yellow[500],
  600: Colors.yellow[600],
  700: Colors.yellow[800],
  800: Colors.yellow[900],
  900: Colors.yellow[700],
};

final MaterialColor _yellow700Swatch =
  MaterialColor(Colors.yellow[700].value, _yellow700Map);

and then add it as primarySwatch: _yellow700Swatch, or if you want only your background to be Colors.yellow[700] you can use canvasColor like this canvasColor: Colors.yellow[700],.

Upvotes: 17

Apb
Apb

Reputation: 819

primarySwatch only takes a ColorSwatch not a colorShade

if you want to use a shade you can try

    ThemeData(
        primaryColor: Colors.yellow[700]
    )

for more info primaryColor

Upvotes: 6

Related Questions