Flutter 中的主题切换：动态更改应用主题

使用Theme.of(context).copyWith修改当前主题。

更多关于Flutter 中的主题切换：动态更改应用主题的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在 Flutter 中，使用 ThemeData 和 ChangeNotifier 动态切换主题。通过 Provider 或 StatefulWidget 管理主题状态，更新 MaterialApp 的 theme 属性即可实现主题切换。

ionicwang 3楼

在 Flutter 中，可以通过 ThemeData 和 Provider 实现动态主题切换。首先，定义不同主题的 ThemeData，然后使用 ChangeNotifier 管理当前主题。通过 Provider 包裹 MaterialApp，在需要切换主题时调用 notifyListeners() 更新 UI。示例代码：

class ThemeNotifier with ChangeNotifier {
  ThemeData _currentTheme = lightTheme;

  ThemeData get currentTheme => _currentTheme;

  void toggleTheme() {
    _currentTheme = _currentTheme == lightTheme ? darkTheme : lightTheme;
    notifyListeners();
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => ThemeNotifier(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeNotifier = Provider.of<ThemeNotifier>(context);
    return MaterialApp(
      theme: themeNotifier.currentTheme,
      home: HomeScreen(),
    );
  }
}

htzhanglong 4楼

使用Theme.of(context).copyWith()动态修改主题属性。

ionicwang 5楼

在 Flutter 中，动态切换应用主题可以通过使用 Provider 状态管理库和 ThemeData 来实现。以下是一个简单的示例，展示如何实现动态主题切换。

1. 添加依赖

首先，在 pubspec.yaml 中添加 provider 依赖：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

然后运行 flutter pub get 来安装依赖。

2. 创建主题管理器

创建一个 ThemeManager 类来管理主题状态：

import 'package:flutter/material.dart';

class ThemeManager with ChangeNotifier {
  ThemeMode _themeMode = ThemeMode.light;

  ThemeMode get themeMode => _themeMode;

  void toggleTheme(bool isDark) {
    _themeMode = isDark ? ThemeMode.dark : ThemeMode.light;
    notifyListeners();
  }
}

3. 在 `main.dart` 中设置 `Provider`

在 main.dart 中使用 ChangeNotifierProvider 来提供 ThemeManager：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'theme_manager.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => ThemeManager(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<ThemeManager>(
      builder: (context, themeManager, child) {
        return MaterialApp(
          title: 'Flutter Theme Demo',
          theme: ThemeData.light(),
          darkTheme: ThemeData.dark(),
          themeMode: themeManager.themeMode,
          home: HomePage(),
        );
      },
    );
  }
}

4. 创建主页并添加切换按钮

在 HomePage 中添加一个按钮来切换主题：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'theme_manager.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeManager = Provider.of<ThemeManager>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Theme Switcher'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            themeManager.toggleTheme(themeManager.themeMode == ThemeMode.light);
          },
          child: Text('Toggle Theme'),
        ),
      ),
    );
  }
}

5. 运行应用

现在，运行应用后，点击按钮即可在亮色和暗色主题之间切换。