美文网首页
关于Flutter主题色

关于Flutter主题色

作者: 不务正业的设计师 | 来源:发表于2020-05-22 18:14 被阅读0次

    做为一款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<Counter>(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],
    

    相关文章

      网友评论

          本文标题:关于Flutter主题色

          本文链接:https://www.haomeiwen.com/subject/muounhtx.html