Flutter Web网站之最简方式实现暗黑主题无缝切换

本文介绍了如何在Flutter Web应用中实现最简单的暗黑主题切换。通过定义DARK_THEME和LIGHT_THEME,结合StreamController和StreamBuilder,动态改变MaterialApp的theme,实现了大屏和小屏设备上暗黑及浅色主题的无缝切换。只需二十几行代码,无需引入额外框架,文章还展示了部分关键代码实现。
摘要由CSDN通过智能技术生成

往期

上期回顾

上期我们做了优化,主要针对ScrollView+GridView的使用场景,用了更加合适的组件,这期想做一个主题变更,为什么呢?

  • 第一 暗黑主题越来越刚需化,现在哪个主流App没有暗黑都不好意思上架,而ios阵营更加强硬的要求平台实现,否则下架,库克牛逼,我们惹不起。
  • 第二 项目还处于初期,这个时候重构改动成本较低
  • 第三 主题的变更网上有很多框架可以快速实现,但我想寻求的是最简单的实现,不想引入别人的框架,一来自己了如指掌,二来不用依赖别人的升级来满足未来奇葩的需求。
    这期实现其实很简单,来往下看。

实现效果

大屏浅色
大屏暗黑
小屏浅色
小屏暗黑

代码实现

定义主题类AppTheme,用来配置不同的ThemeData

class AppTheme {

  ThemeData themeData;

  AppTheme(t
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值