'Type 'Color' is not a subtype of 'MaterialColor' error appears every time I build my Flutter app on the simulator (Android and iOS) in Android Studio

Question

I'm putting together a demo app, to help me learn various features of Flutter but at the moment, I am experiencing a recurring error I have not come across before.

Each time I build the app in Android Studio on any simulator (Android or iOS) an error is generated:

Type 'Color' is not a subtype of type 'MaterialColor'

Here is the exception and console output:

Launching lib/main.dart on iPhone 11 Pro Max in debug mode...
Running Xcode build...
Xcode build done.                                           16.9s
flutter: ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
flutter: The following assertion was thrown building MyApp(dirty):
flutter: type 'Color' is not a subtype of type 'MaterialColor'
flutter:
flutter: Either the assertion indicates an error in the framework itself, or we should provide substantially
flutter: more information in this error message to help you determine and fix the underlying cause.
flutter: In either case, please report this assertion by filing a bug on GitHub:
flutter:   https://github.com/flutter/flutter/issues/new?template=BUG.md
flutter:
flutter: The relevant error-causing widget was:
flutter:   MyApp
flutter:   file:///Users/JGolding/Desktop/Desktop/Work/App-and-Web-Development/App-Development/1-Demo-App/demo_app/lib/main.dart:4:23
flutter:
flutter: When the exception was thrown, this was the stack:
flutter: #0      MyApp.build (package:demoapp/main.dart:13:35)
flutter: #1      StatelessElement.build (package:flutter/src/widgets/framework.dart:4291:28)
flutter: #2      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4223:15)
flutter: #3      Element.rebuild (package:flutter/src/widgets/framework.dart:3947:5)
flutter: #4      ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4206:5)
flutter: #5      ComponentElement.mount (package:flutter/src/widgets/framework.dart:4201:5)
flutter: #6      Element.inflateWidget (package:flutter/src/widgets/framework.dart:3194:14)
flutter: #7      Element.updateChild (package:flutter/src/widgets/framework.dart:2988:12)
flutter: #8      RenderObjectToWidgetElement._rebuild (package:flutter/src/widgets/binding.dart:1028:16)
flutter: #9      RenderObjectToWidgetElement.mount (package:flutter/src/widgets/binding.dart:999:5)
flutter: #10     RenderObjectToWidgetAdapter.attachToRenderTree.<anonymous closure> (package:flutter/src/widgets/binding.dart:942:17)
flutter: #11     BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2412:19)
flutter: #12     RenderObjectToWidgetAdapter.attachToRenderTree (package:flutter/src/widgets/binding.dart:941:13)
flutter: #13     WidgetsBinding.attachRootWidget (package:flutter/src/widgets/binding.dart:819:7)
flutter: #14     WidgetsBinding.scheduleAttachRootWidget.<anonymous closure> (package:flutter/src/widgets/binding.dart:804:7)
flutter: #23     _Timer._runTimers (dart:isolate-patch/timer_impl.dart:384:19)
flutter: #24     _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:418:5)
flutter: #25     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:174:12)
flutter: (elided 8 frames from package dart:async and package dart:async-patch)
flutter:
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════
Debug service listening on ws://127.0.0.1:60030/z8ejaMsnyI0=/ws
Syncing files to device iPhone 11 Pro Max...

This seems to suggest that the issue is in the main.dart file, which is here:

import 'package:demoapp/screens/home/home_page.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.blue[200],
      ),
      home: HomePage(),
    );
  }
}

At the moment, in ThemeData() I am using primaryColor: Colors.blue[200]. For some reason, the app builds if I change that to primarySwatch: Colors.blue and then back again to primaryColor: Colors.blue[200]. This has never happened to me before and I'm not sure why it keeps happening on the first build of the app in the simulator. Why might this be happening? Is there a way to sort it?

I am using primaryColor since I want to use that specific shade of blue as the main color. If this is an issue with primaryColor, is there perhaps a way to use primarySwatch and be able to select the specific color in a family?

Answer 1

If you want to use custom color from hex like this color 0xFF0E7AC7

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

theme: ThemeData(
    primarySwatch: kPrimaryColor,
),