primarySwatch: Colors.white => type 'Color' is not a subtype of type 'MaterialColor'

[TamerB]

When defining my ThemeData as follows the code runs perfectly:

(in file:///home/tamer/AndroidStudioProjects/flutter_app/lib/main.dart):

    final ThemeData _androidTheme = ThemeData( 
        brightness: Brightness.light,
        primarySwatch: Colors.pink, // or Colors.green or any color darker than white (this is line 66)
        accentColor: Colors.black,
    );

Now I'm trying to make my appbar color white. However, when I replace primarySwatch: Colors.pink with primarySwatch: Colors.white the code throws the following:

    I/flutter ( 6397): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY╞═══════════════════════════════════════════════════════════
    I/flutter ( 6397): The following assertion was thrown attaching to the render tree:
    I/flutter ( 6397): type 'Color' is not a subtype of type 'MaterialColor'
    I/flutter ( 6397): Either the assertion indicates an error in the framework itself, or we should provide 
    substantially
    I/flutter ( 6397): more information in this error message to help you determine and fix the underlying cause.
    I/flutter ( 6397): In either case, please report this assertion by filing a bug on GitHub:
    I/flutter ( 6397):   https://github.com/flutter/flutter/issues/new
    I/flutter ( 6397): When the exception was thrown, this was the stack:
    I/flutter ( 6397): #0      new _MyAppState (file:///home/tamer/AndroidStudioProjects/flutter_app/lib/main.dart:66:27) // ()
    I/flutter ( 6397): #1      MyApp.createState (file:///home/tamer/AndroidStudioProjects/flutter_app/lib/main.dart:34:12)
    I/flutter ( 6397): #2      new StatefulElement (package:flutter/src/widgets/framework.dart:3723:23)
    I/flutter ( 6397): #3      StatefulWidget.createElement (package:flutter/src/widgets/framework.dart:789:42)
    I/flutter ( 6397): #4      Element.inflateWidget (package:flutter/src/widgets/framework.dart:2918:40)
    I/flutter ( 6397): #5      Element.updateChild (package:flutter/src/widgets/framework.dart:2723:12)
    I/flutter ( 6397): #6      RenderObjectToWidgetElement._rebuild (package:flutter/src/widgets/binding.dart:884:16)
    I/flutter ( 6397): #7      RenderObjectToWidgetElement.mount (package:flutter/src/widgets/binding.dart:855:5)
    I/flutter ( 6397): #8      RenderObjectToWidgetAdapter.attachToRenderTree.<anonymous closure> (package:flutter/src/widgets/binding.dart:801:17)
    I/flutter ( 6397): #9      BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2235:19)
    I/flutter ( 6397): #10     RenderObjectToWidgetAdapter.attachToRenderTree (package:flutter/src/widgets/binding.dart:800:13)
    I/flutter ( 6397): #11     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding&WidgetsBinding.attachRootWidget (package:flutter/src/widgets/binding.dart:689:7)
    I/flutter ( 6397): #12     runApp (package:flutter/src/widgets/binding.dart:731:7)
    I/flutter ( 6397): #13     main (file:///home/tamer/AndroidStudioProjects/flutter_app/lib/main.dart:27:3)
    I/flutter ( 6397): #14     _startIsolate.<anonymous closure> (dart:isolate/runtime/libisolate_patch.dart:286:19)
    I/flutter ( 6397): #15     _RawReceivePortImpl._handleMessage (dart:isolate/runtime/libisolate_patch.dart:169:12)
    I/flutter ( 6397):════════════════════════════════════════════════════════════════════════════════════════════════════

[zoechi]

#15658 (comment) should help

[TamerB]

Does this mean I can't chose my primary swatch to be white or black?

[zoechi]

As the comment says. White or black is not a swatch.
You can create a swatch where all entries are black or all are white if that is what you want.

[zoechi]

Please consider asking support questions in one of the other channels listed at http://flutter.io/support .

Feel free to add more comments and I try to help if I can but I think StackOverflow would be the right place for this question. GitHub issues are for bug reports and feature requests.

[rknell]

Right.

So using the Panache aka Flutterial theme browser, it actually has a white / black option.

And that option looks surprisingly good - at least for white anyway. So I did some digging to find out why and how it works, and I can answer the why not, and how to, below.

The Flutterial app makes a new MaterialColor widget, and everything is set to white:

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

So, you would expect everything to be white right? No, its actually quite a nice, toned back design.

To test it out yourself, copy and paste that code into your main.dart file and set primarySwatch to white

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'MyApp',
      theme: ThemeData(
        primarySwatch: white,

Of course, having a swatch with every colour the same seems logically stupid, and so that is why its not included.

[HsattWintHtet]

Right.

So using the Panache aka Flutterial theme browser, it actually has a white / black option.

And that option looks surprisingly good - at least for white anyway. So I did some digging to find out why and how it works, and I can answer the why not, and how to, below.

The Flutterial app makes a new MaterialColor widget, and everything is set to white:

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

So, you would expect everything to be white right? No, its actually quite a nice, toned back design.

To test it out yourself, copy and paste that code into your main.dart file and set primarySwatch to white

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'MyApp',
      theme: ThemeData(
        primarySwatch: white,

Of course, having a swatch with every colour the same seems logically stupid, and so that is why its not included.

Thank You

[VincentBayliss]

Thanks for the info guys. I used this and it's great for what I want. One thing I would like to ask is (and keep in mind that I am new to Flutter/Dart (or programming in general)):
Q: How do I use this globally? I have a dart file that I have named 'globals' and I hold my global variable in there for use across all pages. I tried to put this in there and it wouldn't accept it as it is not a class.

The problem is that I don't have the nous to turn this into something that can be used globally.

Q: Anyone able to enlighten me?

Cheers and thanks in advance,
Vincent.

[MewX]

Right.

So using the Panache aka Flutterial theme browser, it actually has a white / black option.

And that option looks surprisingly good - at least for white anyway. So I did some digging to find out why and how it works, and I can answer the why not, and how to, below.

The Flutterial app makes a new MaterialColor widget, and everything is set to white:

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

So, you would expect everything to be white right? No, its actually quite a nice, toned back design.

To test it out yourself, copy and paste that code into your main.dart file and set primarySwatch to white

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'MyApp',
      theme: ThemeData(
        primarySwatch: white,

Of course, having a swatch with every colour the same seems logically stupid, and so that is why its not included.

Thanks!

Also, to make it more extensible, reuse the same variable might be a good idea:

    const MaterialColor white = const MaterialColor(
      Colors.white.value,
      const <int, Color>{
        50: Colors.white,
        100: Colors.white,
        200: Colors.white,
        300: Colors.white,
        400: Colors.white,
        500: Colors.white,
        600: Colors.white,
        700: Colors.white,
        800: Colors.white,
        900: Colors.white,
      }
    );

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.