如何在DAY和NIGHT时间自动更改Flutter应用程序主题

问题描述

我搜索无处不在的人，但所有人都谈论在运行时设置深色主题或更改主题。 这些我没有任何问题。 我希望我的flutter应用程序可以在几天之内通过日落或其他方式动态地将其主题更改为浅色，并在夜晚将其更改为黑暗。

解决方法

在构建应用程序时，通常使用MaterialApp，您可以在其中使用参数theme和darkTheme定义日主题和深色主题，还可以定义主题模式{{1 }}，ThemeMode.system和ThemeMode.light，如果您的设备支持按日更改（我认为Android 9及更高版本），则使用ThemeMode.dark就足够了，否则您必须实现一种逻辑来检测小时，然后在ThemeMode.system和ThemeMode.light

之间切换

ThemeMode.dark

如果您想要更多控制权，则必须指定所需的逻辑，并根据小时使用class MainApp extends StatefulWidget { @override _MainAppState createState() => _MainAppState(); } class _MainAppState extends State<MainApp> { ThemeMode _mode; @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData.light(),//or create your own lightTheme darkTheme: ThemeData.dark(),//or create your own darkTheme themeMode: ThemeMode.system,//this should be enoguh for most updated devices home: HomeScreen() ); } } 更新ThemeMode变量

,

如果您知道如何更改应用程序主题，则可以检查当前时间并根据其更改主题。但是我不确定这是否是最有效的方法。

,

编辑： 我们开发了一个受此答案启发的插件。 https://pub.dev/packages/day_night_theme_flutter

请按照以下步骤操作。

1. 将您的主应用程序转换为有状态的小部件

void main() {
  runApp(MyApp());
}

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

1. 为浅色主题，深色主题和选定主题创建变量。在initState中调用_selectTheme()。

class _MyAppState extends State<MyApp> {
  ThemeData _selectedTheme;

  ThemeData _lightTheme = ThemeData(
    primarySwatch: Colors.blue,visualDensity: VisualDensity.adaptivePlatformDensity,brightness: Brightness.light,);

  ThemeData _darkTheme = ThemeData(
    primarySwatch: Colors.brown,brightness: Brightness.dark,);
  /// Timer will be required to change the theme after some time.
  Timer _timer;

  @override
  void initState() {
    _selectTheme();

    super.initState();
  }

1. 现在使用selectTheme方法

 _selectTheme() {
    // Current time
    DateTime now = DateTime.now();
    // Dark theme start time evening 7 pm
    DateTime darkThemeStartTime = DateTime(now.year,now.month,now.day,19);
    // Dark theme to Light switch happen at 6 am
    DateTime darkThemeEndTime = DateTime(now.year,6);

    // time left to change the theme
    int timerSeconds;

    // if current time is after 6 am & before 7 pm then light theme else dark theme
    if (now.compareTo(darkThemeEndTime) > 0 && now.compareTo(darkThemeStartTime) < 0) {
      // time between 6 am and 7 pm
      print('lightTheme');
      _selectedTheme = _lightTheme;
      // theme will be changed at 7 pm
      timerSeconds = darkThemeStartTime.difference(now).inSeconds;
    } else if(now.compareTo(darkThemeStartTime) > 0) {
      // time after 7 pm
      print('darkTheme');
      _selectedTheme = _darkTheme;
      DateTime nextDayMorningTime = darkThemeStartTime.add(Duration(days: 1));
      timerSeconds = nextDayMorningTime.difference(now).inSeconds;
    } else {
      // time before 6 am
      print('darkTheme');
      _selectedTheme = _darkTheme;
      timerSeconds = darkThemeEndTime.difference(now).inSeconds;
    }

    _timer = Timer(
      Duration(seconds: timerSeconds),() {
       //_selectTheme will be called after speciefied time
        _selectTheme();
        setState(() {});
      },);
  }

1. 在MaterialApp中

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',theme: _selectedTheme,home: MyHomePage(title: 'Flutter Demo Home Page'),);
  }

1. 在处置方法中

  @override
  void dispose() {
    if (_timer != null) {
      _timer.cancel();
    }
    super.dispose();
  }