关于Flutter主题色

做为一款App，自定义主题色是必不可少的。下面是关于我开发Flutter主题色过程。
首先provider包
https://pub.dev/packages/provider#-readme-tab-
Provider（跨组件状态共享）为Flutter定义主题色提供了方法。

主题色

了解主题色，首先需要知道Flutter定义主题的方法

我们可以在main.dart 内使用

  return MaterialApp(
        // 初始化路由
        initialRoute: '/',
        // 定义路由
        onGenerateRoute: onGenerateRoute,
        // 测试书签
        debugShowCheckedModeBanner: false,
        // 网格
        debugShowMaterialGrid: false,
        
        //theme关于默认状态下的主题管理
        theme: ThemeData(
        //主题色
          primaryColor:Colors.yellow,
   
        ),
        //当手机处于夜间模式时，优先执行darkTheme
        darkTheme: ThemeData(
          primaryColor:Colors.black,
           )
);

了解上面的基础之后开始设定主题色
我的方法是新建了自己的theme.dart

theme.dart页面

首先创建需要的主题色List

List<Color> colorsList = [
  Colors.blue,
  Colors.lightBlue,
  Colors.teal,
  Colors.pink,
  Colors.yellow,
  Colors.orange,
  Colors.red,
  Colors.green,
  Colors.cyan,
  Colors.grey[900],
  Colors.black,
];

全部代码

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';


class Counter with ChangeNotifier {
  int _countColor;
  Counter( this._countColor);
  //change themecolor

  void countColors(int index) {
    _countColor = index;
    notifyListeners();
  }

  get countColor => _countColor;
}


List<Color> colorsList = [
  Colors.blue,
  Colors.lightBlue,
  Colors.teal,
  Colors.pink,
  Colors.yellow,
  Colors.orange,
  Colors.red,
  Colors.green,
  Colors.cyan,
  Colors.grey[900],
  Colors.black,
];

这个页面的主要作用是监听选择数组的元素

Colors.dart页面实现切换主题

import 'package:flutter/material.dart';
import 'package:flag/Theme/theme.dart';
import 'package:provider/provider.dart';
import 'package:flag/routers/shareApi.dart';

class StyleColorPage extends StatefulWidget {
  StyleColorPage({Key key}) : super(key: key);

  StyleColorPageState createState() => StyleColorPageState();
}

class StyleColorPageState extends State<StyleColorPage> {
  String title;
  int ids;
  _numcheck() async {
    int a = await getInt("themecolor");
    if (a == null) {
      ids = 0;
    } else {
      setState(() {
        ids = a;
      });
    }
  }

  void initState() {
    super.initState();
    this._numcheck();
  }

  StyleColorPageState({this.title = "主题风格"});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(this.title),
        ),
        body: ListView.builder(
            itemCount: colorsList.length,
            itemBuilder: (context, index) {
              return ListTile(
                leading: Container(
                    color: colorsList[index],
                    width: 40,
                    height: 40,
                    child: ids == index ? Icon(Icons.check) : Center()),
                title: colorsListText[index],
                onTap: () {
                  //更换主题
                  Provider.of<Counter>(context).countColors(index);
                },
              );
            }));
  }
}

我们通过ListTile的onTap方法选定，
然后用 Provider.of(context).countColors(index)注入你选择的index值
注意需要import theme.dart页面
##最后是main.dart 里面

 runApp(ChangeNotifierProvider<Counter>.value(
      notifier: Counter(index), child: MyApp()));

 primaryColor: colorsList[Provider.of<Counter>(context).countColor],