Can't create custom colorswatch

Question

I'm trying to use a custom color theme for an app.

Here is the main.dart file

import 'package:flutter/material.dart';

import 'pages/HomePage.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: new ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or press Run > Flutter Hot Reload in IntelliJ). Notice that the
        // counter didn't reset back to zero; the application is not restarted.
        primarySwatch: MaterialColor(0xFF990000, {
          50: Color(0xFF990001),
          300: Color(0xFF990002),
          900: Color(0xFF990003)
        }),
      ),
      home: new HomePage(),
    );
  }
}

I get the following error:

flutter: ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ flutter: The following NoSuchMethodError was thrown building MyApp(dirty): flutter: The method 'computeLuminance' was called on null. flutter: Receiver: null flutter: Tried calling: computeLuminance()

What I'm I doing wrong?

user_5722463 · Answer

You should define all the values if you want it to work, i had the same error when i defined just one or two values too.

From official documentation we find that

MaterialColor class Defines a single color as well a color swatch with ten shades of the color.

for example:

 primarySwatch: MaterialColor(0xFFFFFFFF, {
  50:  Color(0xFFFFFFFF),
  100: Color(0xFFFFFFFF),
  200: Color(0xFFFFFFFF),
  300: Color(0xFFFFFFFF),
  400: Color(0xFFFFFFFF),
  500: Color(0xFFFFFFFF),
  600: Color(0xFFFFFFFF),
  700: Color(0xFFFFFFFF),
  800: Color(0xFFFFFFFF),
  900: Color(0xFFFFFFFF),
    });

user_7924072 · Answer

you can not assign MaterialColor to primaryswatch infect primaryswatch used to assign different types of colors such as primaryColor, primaryColorLight/Dark, accentColor etc..

you can get further more details from similar types of question. How do I use the different shades of a color swatch in Flutter?

user_3126790 · Answer

You need to create one MaterialColor object as a whole, providing all color values for the ten different luminance values. Please consider using this solution for a better approach.

Flutter: Creating a custom color swatch for MaterialColor

Can't create custom colorswatch

3 Answers