美文网首页
Flutter 夜间模式

Flutter 夜间模式

作者: 精简明了 | 来源:发表于2020-12-17 17:26 被阅读0次
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ThemeMode themeMode = ThemeMode.light;

  void updateThemeMode() {
    setState(() => themeMode = getThemeMode());
  }

  ThemeMode getThemeMode() {
    switch (themeMode) {
      case ThemeMode.light:
        return ThemeMode.dark;
      case ThemeMode.dark:
        return ThemeMode.light;
      default:
        // 跟随系统
        return ThemeMode.system;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // 确定应用程序将使用哪个主题(请实现自定义)
      themeMode: themeMode,
      theme: ThemeProvider().getTheme(),
      darkTheme: ThemeProvider().getTheme(isDark: true),
      home: Scaffold(
        appBar: AppBar(
          title: Text('app title'),
        ),
        floatingActionButton: FloatingActionButton(
          child: Text('theme'),
          onPressed: () => updateThemeMode(),
        ),
      ),
    );
  }
}

class ThemeProvider {
  static ThemeProvider _instance;

  ThemeProvider._internal();

  factory ThemeProvider() {
    if (_instance == null) {
      _instance = ThemeProvider._internal();
    }
    return _instance;
  }

  getTheme({bool isDark: false}) {
    // 更多配置看内部实现,不配则使用默认样式
    return ThemeData(
      appBarTheme: AppBarTheme(
        brightness: isDark ? Brightness.dark : Brightness.light,
      ),
      brightness: isDark ? Brightness.dark : Brightness.light,
      cupertinoOverrideTheme: CupertinoThemeData(
        brightness: isDark ? Brightness.dark : Brightness.light,
      ),
    );
  }
}

内部获取当前主题

bool _isDark = Theme.of(context).brightness == Brightness.dark;

相关文章

  • Flutter 夜间模式

    内部获取当前主题

  • Flutter教程app

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

  • Flutter 定制 App 的夜间模式

    前言 对于一个产品来说,在业务早期其实更多的是处理基本功能有和无的问题:工程师来负责实现功能,PM 负责功能好用不...

  • 想用AppCompat的夜间模式切换功能又不想导整个库?

    目录 背景 Android中的夜间模式 AppCompat实现夜间模式 AppCompat夜间模式切换功能的分析 ...

  • 盘点win10系统里的六个神奇模式,总有一个你不知道!

    夜间模式 Win10系统加入了夜间模式,夜间模式自带护眼功能,让夜晚操作电脑的用户可以保护视力。 简单说夜间模式就...

  • Android实现夜间模式的方法(二)

    该文章接上篇 Android实现夜间模式的方法(一) 三.夜间模式的实现方案——单纯夜间模式 1.通过切换主题...

  • 微博iOS的护眼模式

    夜间模式的探讨 与其他App切换夜间模式不同: 微博采取了护眼模式: 两种方案各有利弊: 夜间模式优点:可以对每一...

  • Flutter炫酷的波纹路由动画

      写这个的一切起因都得从我某天切换了酷安App的夜间模式说起,看个Gif,忽略图中其他无关项。 Flutter端...

  • 夜间模式

    又是一个夜晚 夜晚总会让人产生思考 这个夏天 这个暑假 找了一份暑假工兼职 算是体验生活 “享受”一下赚钱的不易 ...

  • 夜间模式

    思路: 一: 1.准备两套资源,分别对应日间模式和夜间模式。 2.在系统全局保存一个变量(BOOL isNight...

网友评论

      本文标题:Flutter 夜间模式

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