美文网首页
flutter - 一键切换黑暗模式

flutter - 一键切换黑暗模式

作者: yytester | 来源:发表于2020-12-15 14:38 被阅读0次

如果某个具体的Widget不希望直接使用全局的Theme,而希望自己来定义,只需要在Widget的父节点包裹一下Theme即可.

在新的页面的Scaffold外,包裹了一个Theme,并且设置data为一个新的ThemeData.

class HYSecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(),
      child: Scaffold(
      ),
    );
  }
}

完整代码:

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
     
      _counter++;
    });
  }

  var themechange = ThemeData.light();

  @override
  Widget build(BuildContext context) {
   
    return Theme(
      data:themechange,
      child: Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
         
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlatButton(
          child: Text("theme", 
                  style: TextStyle(color: Colors.black)

                  ),
                
                  onPressed: () {
                 
                    (themechange == ThemeData.dark())?(themechange = ThemeData.light()):(themechange = ThemeData.dark());

                    setState(() {
                      
                    });
                  },
), 
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    ),
    );
  }
}

相关文章

  • flutter - 一键切换黑暗模式

    如果某个具体的Widget不希望直接使用全局的Theme,而希望自己来定义,只需要在Widget的父节点包裹一下T...

  • 一键深色模式切换工具Gray Mac免费版

    Gray Mac版是专为mac用户设计的一款一键深色模式切换工具,Gray可以让你通过一键按钮来切换深色模式,而且...

  • Flutter教程app

    前言 使用Flutter开发Flutter教程,<-_<-有点意思! 功能 夜间模式、文字大小、文字方向、设备切换...

  • 特点

    1.双模: 做一个一键切换的开关,切换 现代 / 古典 模式 (或者再加一个体验模式) 现代模式:有网,有电,有自...

  • Flutter开发模式切换

    Flutter开发有两种模式,开发种一般在profile 模式或者 release 模式下运行app。大家可能发现...

  • 如何使用Web组件构建明暗主题

    在明暗主题之间切换从未如此简单 在明暗主题之间切换 我们已经完成了黑暗模式。从暗模式到亮模式再到暗模式。在个人计算...

  • flutter黑暗模式适配

    其实就是简单的一句话: themeMode: 当点击暗黑按钮直接修改isDark变量就好了,我使用的是mobx状态...

  • composer 切换国内镜像

    一键切换国内镜像 切换为国外镜像:

  • Flutter 一键换肤、切换主题

    App项目一键换肤功能比较常见了,一般项目都附带有该功能,由于近期项目内也加入了此功能,也顺带记录下过程。 由于产...

  • Flutter尝试-sdk版本更新

    查看当前flutter通道版本 flutter channel flutter版本通道切换 flutter cha...

网友评论

      本文标题:flutter - 一键切换黑暗模式

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