Flutter 如何自定义primarySwatch颜色

3,371 阅读1分钟

开发中我们常常需要在ThemeData中配置主题颜色 primarySwatch,但是primarySwatch只支持MaterialColor 不支持Color,

请看下边一段代码


//main.dart
import 'package:flutter/material.dart'; 
void main() { 
runApp(App()); 
} 
class App extends StatelessWidget { 
 @override 
 Widget build(BuildContext context) { 
 return MaterialApp( 
title: 'Demo for swatch', 
 theme: ThemeData(   
 primarySwatch: Colors.black, //这里是报错的地方
 ), 
 home: YourFirstPage(), 
 ); 
 } 
} 

primarySwatch: Colors.black, //这里是报错的地方

所以我们需要生成一个 自定义生成MaterialColor,如何生成呢,请使用下面的方法

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: Colors.black,
替换成
createMaterialColor(Colors.black)

结束。