Flutter自定义颜色报错：Color类型无法转换为MaterialColor

嘿，我看你在尝试自定义Flutter AppBar颜色时碰了壁，运行后收到了如下错误提示：

type Color is not of subtype MaterialColor

咱们来拆解下问题出在哪，以及怎么快速解决它。

你当前的自定义颜色与主题代码 #

import 'package:flutter/material.dart';
final ThemeData CompanyThemeData = new ThemeData(
 brightness: Brightness.light,
 primaryColorBrightness: Brightness.light,
 accentColor: CompanyColors.black[500],
 accentColorBrightness: Brightness.light
);
class CompanyColors {
 CompanyColors._(); // 避免实例化该类
 static const _blackPrimaryValue = 0xFF000000;
 static const MaterialColor black = const MaterialColor(
 _blackPrimaryValue,
 const <int, Color>{
 50: const Color(0xFFe0e0e0),
 100: const Color(0xFFb3b3b3),
 200: const Color(0xFF808080),
 300: const Color(0xFF4d4d4d),
 400: const Color(0xFF262626),
 500: const Color(_blackPrimaryValue),
 600: const Color(0xFF000000),
 700: const Color(0xFF000000),
 800: const Color(0xFF000000),
 900: const Color(0xFF000000),
 },
 );
}

main.dart中的主题使用代码 #

Widget build(BuildContext context) {
 return new MaterialApp(
 title: 'Flutter Demo',
 theme: new ThemeData(
 primarySwatch:Theme1.CompanyColors.black[50], // 这里是问题核心
 ),
 home: new MyHomePage(title: 'Flutter Demo Home Page'),
 );
}

问题根源 #

primarySwatch 参数要求传入的是 MaterialColor类型（也就是你定义的CompanyColors.black这种包含不同亮度色阶的完整对象），但你传入的Theme1.CompanyColors.black[50]返回的是单个Color类型的具体颜色值，这就导致了类型不匹配的错误。

解决方案 #

有两种实用的解决方式，你可以根据需求选择：

方式1：直接传入自定义的MaterialColor对象

如果你想让整个App主题都使用这个自定义的黑色系色阶，直接把primarySwatch的值改为CompanyColors.black即可：

Widget build(BuildContext context) {
 return new MaterialApp(
 title: 'Flutter Demo',
 theme: new ThemeData(
 primarySwatch: CompanyColors.black, // 直接传完整的MaterialColor对象
 ),
 home: new MyHomePage(title: 'Flutter Demo Home Page'),
 );
}

这样AppBar会自动使用该MaterialColor的500色阶作为默认背景色，同时主题内的其他组件也会遵循这个色系的配色规则。

方式2：单独指定AppBar的背景色（或主题主色）

如果你只想给AppBar设置某个特定的颜色，不需要整个主题套用色阶，可以选择以下两种子方式：

• 子方式A：通过ThemeData的primaryColor全局设置

Widget build(BuildContext context) {
 return new MaterialApp(
 title: 'Flutter Demo',
 theme: new ThemeData(
 primaryColor: CompanyColors.black[50], // 直接传入单个Color值
 ),
 home: new MyHomePage(title: 'Flutter Demo Home Page'),
 );
}

• 子方式B：在单个AppBar组件中单独设置
  如果只是某个页面的AppBar需要特殊颜色，直接在AppBar属性里指定即可：

AppBar(
 title: Text('Flutter Demo Home Page'),
 backgroundColor: CompanyColors.black[50], // 单独设置该AppBar的背景色
)

内容的提问来源于stack exchange，提问作者Karishma