Flutter 上浅色/深色/系统主题之间切换

Question

我正在尝试在我的应用程序上创建一个选项，允许用户在浅色主题、深色主题之间进行选择，或者只是让主题与他们手机上的偏好相匹配，也就是说，如果他们有深色外观并且用户选择与手机外观相匹配的选项。

我现在拥有的是：

1. 我的提供商如下所示：

class ThemeChanger with ChangeNotifier {

  ThemeData _themeData;

  ThemeChanger(this._themeData);

  getTheme() => _themeData;

  setTheme( ThemeData theme) {
    this._themeData = theme;
    notifyListeners();
  }

}

2. 我的 home.dart，在那里我有处理视图的基础知识，看起来像这样

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold( 
      appBar: AppBar( 
        title: const Text('AppBar'),
      ),
      body: const ButtonsList(),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.ads_click),
        onPressed: (){}),
    );
  }
}


class ButtonsList extends StatelessWidget {
  const ButtonsList({super.key});

  @override
  Widget build(BuildContext context) {

    final theme = Provider.of<ThemeChanger>(context);

    return Center(
      child: Row( 
        mainAxisAlignment: MainAxisAlignment.center,
        children: [ 
          FloatingActionButton(
            child: Icon(Icons.sunny),
            onPressed: () => theme.setTheme(ThemeData.light())
          ),
          SizedBox(width: 20,),
          FloatingActionButton(
            child: Icon(Icons.dark_mode),
            onPressed: () => theme.setTheme(ThemeData.dark())
          ),
          SizedBox(width: 20,),
          FloatingActionButton(
            child: Icon(Icons.settings),
            onPressed: (){} //should pick the system theme
          ),
        ],
      ),
    );
  }
}

3. 最后是我的 main.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:tema_provider/blocs/theme.dart';
import 'package:tema_provider/pages/home.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: ( _ ) => ThemeChanger( ThemeData.light() ),
      child: MaterialAppWithTheme(),
    );
  }
}

class MaterialAppWithTheme extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    final theme = Provider.of<ThemeChanger>(context);

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: theme.getTheme(),
      home: HomePage()
    );
  }
}

我遇到的问题之一是我知道系统的主题可以通过

themeMode.system

访问，但在我的代码中我正在使用

ThemeData

，我尝试更改我的第一个代码块上的代码并工作用

ThemeMode

代替，因为它也有深色和浅色模式，但它不起作用。

我不知道我想做的是否可行，到目前为止我发现的只是在暗/亮模式之间切换，应用程序按原样使用代码执行此操作。

任何帮助/指示/资源链接都将受到高度赞赏:)

Answer 1

我从你的问题中了解到的是你想访问系统主题但你正在使用主题数据。 这是我在我的应用程序中使用的解决方案。

var brightness = SchedulerBinding.instance.platformDispatcher.platformBrightness;
   bool isDarkMode = brightness == Brightness.dark;

现在要收听操作系统中应用程序中的实时主题更改，您可以实现以下操作。

void listenForSystemThemeChanges(WidgetRef ref, BuildContext context) {
    var window = View.of(context).platformDispatcher;
    window.onPlatformBrightnessChanged = () {
      WidgetsBinding.instance.handlePlatformBrightnessChanged();
        // This callback is called every time the system theme changes.
        var brightness = window.platformBrightness;
        bool isDarkMode = brightness == Brightness.dark;
    };
  }

如果您仍然无法解决问题，请告诉我。