Flutter多ThemeData切换：点击按钮切换主题是否可行？

完全可行，你只需要通过状态管理维护当前主题，触发组件重建就能实现点击按钮切换主题的功能。核心改动是把根组件改成StatefulWidget来管理主题状态，同时定义多套ThemeData，点击按钮时切换当前主题并更新状态。

关键改动说明 #

• 将根组件MyWidget改为StatefulWidget：无状态组件无法维护可变状态，主题切换需要依赖状态更新
• 定义多套自定义ThemeData：根据需求创建不同风格的主题配置
• 维护当前主题变量并实现切换方法：用状态类管理当前选中的主题，切换时通过setState触发组件重建
• 传递切换回调给子组件：让按钮能调用主题切换方法，触发状态更新

修改后的完整代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(const MyWidget());
}

// 根组件改为StatefulWidget管理主题状态
class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  // 定义两套示例主题
  final ThemeData _themeGreen = ThemeData(
    fontFamily: 'Roboto',
    appBarTheme: const AppBarTheme(color: Colors.green),
    primaryColor: Colors.deepOrangeAccent,
    textTheme: const TextTheme(
      displayLarge: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
      titleLarge: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
      bodyMedium: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
    ),
  );

  final ThemeData _themeBlue = ThemeData(
    fontFamily: 'Roboto',
    appBarTheme: const AppBarTheme(color: Colors.blue),
    primaryColor: Colors.purpleAccent,
    textTheme: const TextTheme(
      displayLarge: TextStyle(fontSize: 72.0, fontWeight: FontWeight.w900),
      titleLarge: TextStyle(fontSize: 36.0, fontStyle: FontStyle.normal),
      bodyMedium: TextStyle(fontSize: 16.0, fontFamily: 'Hind'),
    ),
  );

  // 当前激活的主题
  late ThemeData _currentTheme;

  @override
  void initState() {
    super.initState();
    _currentTheme = _themeGreen;
  }

  // 切换主题的方法
  void _toggleTheme() {
    setState(() {
      _currentTheme = _currentTheme == _themeGreen ? _themeBlue : _themeGreen;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // 绑定当前主题到MaterialApp
      theme: _currentTheme,
      // 将切换方法传递给子页面
      home: MyHomePage(toggleTheme: _toggleTheme),
    );
  }
}

class MyHomePage extends StatelessWidget {
  // 接收主题切换回调
  final VoidCallback toggleTheme;

  const MyHomePage({super.key, required this.toggleTheme});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My Custom Theme App'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: toggleTheme, // 点击触发主题切换
          child: const Text('切换主题'),
        ),
      ),
    );
  }
}

效果说明 #

点击“切换主题”按钮时，setState会触发根组件状态更新，MaterialApp会自动重建并应用新的ThemeData，整个应用的样式（包括AppBar颜色、文字样式、按钮主题等）会同步切换到新配置的主题效果。

内容的提问来源于stack exchange，提问作者Mario Rovelli