【转载】自定义Flutter MaterialApp主题色(primarySwatch)

最新推荐文章于 2025-05-04 22:28:40 发布

moon清泉

最新推荐文章于 2025-05-04 22:28:40 发布

阅读量927

点赞数

分类专栏： flutter 文章标签： flutter

flutter 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了在Flutter中自定义MaterialColor的方法。通过官方注释可知，自定义需传入颜色初始值及十个级别的颜色映射。给出了三种解决办法，包括函数生成自定义色板、改变透明值生成不同亮度级别（不推荐）、手动选择不同亮度级别颜色，并给出了使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文由WPBKJ原创

通过官方给MaterialColor类的注释发现，要自定义MaterialColor我们需要传入一个颜色初始值primary及从亮到暗共十个级别的Map<int, Color>

这里有一张来自Flutter官方给出的Colors.blue的颜色卡

在这里插入图片描述

解决办法

目前公认的解决办法有如下几种

1、函数生成自定义色板

MaterialColor createMaterialColor(Color color) {
    List strengths = <double>[.05];
    Map<int, Color> swatch = {};
    final int r = color.red, g = color.green, b = color.blue;

    for (int i = 1; i < 10; i++) {
      strengths.add(0.1 * i);
    }
    strengths.forEach((strength) {
      final double ds = 0.5 - strength;
      swatch[(strength * 1000).round()] = Color.fromRGBO(
        r + ((ds < 0 ? r : (255 - r)) * ds).round(),
        g + ((ds < 0 ? g : (255 - g)) * ds).round(),
        b + ((ds < 0 ? b : (255 - b)) * ds).round(),
        1,
      );
    });
    return MaterialColor(color.value, swatch);
  }

使用时仅需要在设置primarySwatch时调用该函数即可
示例

primarySwatch: createMaterialColor(Colors.blueAccent) // 第一种
primarySwatch: createMaterialColor(Color(0xFF448AFF)) // 第二种，注意为8为16进制，首两位FF代表不透明

2、改变透明值以生成不同亮度级别(不推荐)

注意：并不推荐该种方法，该方法会导致组件变透明而不是颜色深浅
示例

MaterialColor myColor = MaterialColor(0xFF880E4F, color);

Map<int, Color> color =
{
50:Color.fromRGBO(4,131,184, .1),
100:Color.fromRGBO(4,131,184, .2),
200:Color.fromRGBO(4,131,184, .3),
300:Color.fromRGBO(4,131,184, .4),
400:Color.fromRGBO(4,131,184, .5),
500:Color.fromRGBO(4,131,184, .6),
600:Color.fromRGBO(4,131,184, .7),
700:Color.fromRGBO(4,131,184, .8),
800:Color.fromRGBO(4,131,184, .9),
900:Color.fromRGBO(4,131,184, 1),
};

使用时赋myColor给primarySwatch即可