本文已参与「新人创作礼」活动，一起开启创作之路。

这是【Flutter 问题系列第 11 篇】，如果觉得有用的话，欢迎关注专栏。

有时候需要给 Container 设置不同颜色的背景用来测试，其实没必要自己实现，虽然也就一个列表的事情，但 FLutter 已经给我们实现了这个功能了，直接用 Colors 类中的静态属性 primaries 即可。

源码如下

static const List<MaterialColor> primaries = <MaterialColor>[
    red, // 红色
    pink, // 粉红色
    purple, // 紫色
    deepPurple, // 深紫色
    indigo, // 靛蓝色
    blue, // 蓝色
    lightBlue, // 浅蓝色
    cyan, // 青色
    teal, // 蓝绿色
    green, // 绿色
    lightGreen, // 浅绿色
    lime, // 酸橙色
    yellow, // 黄色
    amber, // 琥珀色
    orange, // 橙色
    deepOrange, // 深橙色
    brown, // 棕色
    blueGrey, // 蓝灰色
  ];

这里我简单写了一个 Demo，代码如下

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(8),
        child: GridView.count(
          crossAxisCount: 3,
          childAspectRatio: 2 / 3,
          mainAxisSpacing: 8,
          crossAxisSpacing: 8,
          children: List.generate(
            Colors.primaries.length,
            (index) => Container(
              color: Colors.primaries[index],
            ),
          ),
        ),
      ),
    );
  }

下面是局部演示效果

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

结束语

Google 的 Flutter 越来越火，截止 2021年4月17日 GitHub 标星已达 86K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。

无论你是 Flutter 新手还是已经入门了，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到稀土博客中，希望自己学习的同时，也可以帮助更多的人。