ThemeData 是 Flutter 用于定义应用整体主题的类。它包含了许多属性，用于自定义应用的外观和感觉。以下是 ThemeData 中常见参数及其作用的详细解释：

常见参数

1. brightness:

   • 类型：Brightness
   • 作用：定义应用的亮度，通常是 Brightness.light 或 Brightness.dark。这会影响许多默认颜色，如背景颜色、文本颜色等。

2. primarySwatch:

   • 类型：MaterialColor
   • 作用：用于定义应用的主要颜色。 primarySwatch 是一组颜色的集合，包括不同深浅的颜色。

3. primaryColor:

   • 类型：Color
   • 作用：定义应用的主要颜色。它通常用作AppBar、按钮等组件的背景颜色。

4. accentColor:

   • 类型：Color
   • 作用：定义应用的强调颜色。通常用于浮动操作按钮、选择控件等。

5. backgroundColor:

   • 类型：Color
   • 作用：定义应用的背景颜色。

6. canvasColor:

   • 类型：Color
   • 作用：定义Material的默认背景颜色，如Scaffold的背景颜色。

7. scaffoldBackgroundColor:

   • 类型：Color
   • 作用：定义Scaffold widget的背景颜色。

8. bottomAppBarColor:

   • 类型：Color
   • 作用：定义BottomAppBar widget的背景颜色。

9. cardColor:

   • 类型：Color
   • 作用：定义Card widget的背景颜色。

10. dividerColor:

    • 类型：Color
    • 作用：定义分割线的颜色，如Divider和PopupMenuDivider。

11. highlightColor:

    • 类型：Color
    • 作用：定义组件高亮时的颜色，如InkWell的高亮颜色。

12. splashColor:

    • 类型：Color
    • 作用：定义组件点击时的水波纹颜色。

13. selectedRowColor:

    • 类型：Color
    • 作用：定义选中行的颜色。

14. unselectedWidgetColor:

    • 类型：Color
    • 作用：定义未选中控件的颜色，如未选中的复选框。

15. disabledColor:

    • 类型：Color
    • 作用：定义禁用状态控件的颜色。

16. buttonColor:

    • 类型：Color
    • 作用：定义按钮的默认背景颜色。

17. secondaryHeaderColor:

    • 类型：Color
    • 作用：定义表格或数据表头的颜色。

18. textSelectionColor:

    • 类型：Color
    • 作用：定义文本选择颜色。

19. cursorColor:

    • 类型：Color
    • 作用：定义光标颜色。

20. textSelectionHandleColor:

    • 类型：Color
    • 作用：定义文本选择句柄的颜色。

21. dialogBackgroundColor:

    • 类型：Color
    • 作用：定义对话框的背景颜色。

22. indicatorColor:

    • 类型：Color
    • 作用：定义选项卡选中指示器的颜色。

23. hintColor:

    • 类型：Color
    • 作用：定义提示文本颜色，如表单输入提示。

24. errorColor:

    • 类型：Color
    • 作用：定义错误状态颜色，如表单验证错误。

25. toggleableActiveColor:

    • 类型：Color
    • 作用：定义可切换控件（如开关和复选框）在活动状态下的颜色。

26. buttonTheme:

    • 类型：ButtonThemeData
    • 作用：定义按钮的默认样式。

27. textTheme:

    • 类型：TextTheme
    • 作用：定义应用文本的默认样式。

28. primaryTextTheme:

    • 类型：TextTheme
    • 作用：定义主要颜色相关组件（如AppBar）的文本样式。

29. accentTextTheme:

    • 类型：TextTheme
    • 作用：定义强调颜色相关组件的文本样式。

30. inputDecorationTheme:

    • 类型：InputDecorationTheme
    • 作用：定义输入框的默认样式。

31. iconTheme:

    • 类型：IconThemeData
    • 作用：定义图标的默认样式。

32. primaryIconTheme:

    • 类型：IconThemeData
    • 作用：定义主要颜色相关组件的图标样式。

33. accentIconTheme:

    • 类型：IconThemeData
    • 作用：定义强调颜色相关组件的图标样式。

34. sliderTheme:

    • 类型：SliderThemeData
    • 作用：定义滑块控件的默认样式。

35. tabBarTheme:

    • 类型：TabBarTheme
    • 作用：定义选项卡栏的默认样式。

36. tooltipTheme:

    • 类型：TooltipThemeData
    • 作用：定义工具提示的默认样式。

37. cardTheme:

    • 类型：CardTheme
    • 作用：定义卡片的默认样式。

38. chipTheme:

    • 类型：ChipThemeData
    • 作用：定义芯片的默认样式。

39. platform:

    • 类型：TargetPlatform
    • 作用：定义应用的目标平台，如 TargetPlatform.android 或 TargetPlatform.iOS。

40. materialTapTargetSize:

    • 类型：MaterialTapTargetSize
    • 作用：定义材料设计的点击目标大小。

41. pageTransitionsTheme:

    • 类型：PageTransitionsTheme
    • 作用：定义页面过渡的默认样式。

42. appBarTheme:

    • 类型：AppBarTheme
    • 作用：定义应用栏的默认样式。

43. bottomAppBarTheme:

    • 类型：BottomAppBarTheme
    • 作用：定义底部应用栏的默认样式。

44. colorScheme:

    • 类型：ColorScheme
    • 作用：定义应用的颜色方案。

45. dialogTheme:

    • 类型：DialogTheme
    • 作用：定义对话框的默认样式。

46. floatingActionButtonTheme:

    • 类型：FloatingActionButtonThemeData
    • 作用：定义浮动操作按钮的默认样式。

47. navigationRailTheme:

    • 类型：NavigationRailThemeData
    • 作用：定义导航栏的默认样式。

48. typography:

    • 类型：Typography
    • 作用：定义文本排版的默认样式。

49. cupertinoOverrideTheme:

    • 类型：CupertinoThemeData
    • 作用：定义iOS风格的组件主题。

50. snackBarTheme:

    • 类型：SnackBarThemeData
    • 作用：定义SnackBar的默认样式。

51. bottomSheetTheme:

    • 类型：BottomSheetThemeData
    • 作用：定义底部工作表的默认样式。

52. popupMenuTheme:

    • 类型：PopupMenuThemeData
    • 作用：定义弹出菜单的默认样式。

53. bannerTheme:

    • 类型：MaterialBannerThemeData
    • 作用：定义Material Banner的默认样式。

54. dividerTheme:

    • 类型：DividerThemeData
    • 作用：定义分割线的默认样式。

55. buttonBarTheme:

    • 类型：ButtonBarThemeData
    • 作用：定义按钮栏的默认样式。

56. bottomNavigationBarTheme:

    • 类型：BottomNavigationBarThemeData
    • 作用：定义底部导航栏的默认样式。

57. timePickerTheme:

    • 类型：TimePickerThemeData
    • 作用：定义时间选择器的默认样式。

58. textButtonTheme:

    • 类型：TextButtonThemeData
    • 作用：定义TextButton的默认样式。

59. elevatedButtonTheme:

    • 类型：ElevatedButtonThemeData
    • 作用：定义ElevatedButton的默认样式。

60. outlinedButtonTheme:

    • 类型：OutlinedButtonThemeData
    • 作用：定义OutlinedButton的默认样式。

61. textSelectionTheme:

    • 类型：TextSelectionThemeData
    • 作用：定义文本选择的默认样式。

62. dataTableTheme:

    • 类型：DataTableThemeData
    • 作用：定义数据表的默认样式。

63. checkboxTheme:

    • 类型：CheckboxThemeData
    • 作用：定义复选框的默认样式。

64. radioTheme:

    • 类型：RadioThemeData
    • 作用：定义单选按钮的默认样式。

65. switchTheme:

    • 类型：SwitchThemeData
    • 作用：定义开关的默认样式。

66. progressIndicatorTheme:

    • 类型：ProgressIndicatorThemeData
    • 作用：定义进度指示器的默认样式。

示例

以下是一个完整示例，展示如何创建一个自定义主题：

import 'package:flutter/material.dart';

class AppThemes {
  static final ThemeData blueLightTheme = ThemeData(
    primarySwatch: Colors.blue,
    brightness: Brightness.light,
    appBarTheme: AppBarTheme(
      backgroundColor: Colors.blue,
      foregroundColor: Colors.white,
    ),
    buttonTheme: ButtonThemeData(
      buttonColor: Colors.blue,
      textTheme: ButtonTextTheme.primary,
    ),
    textTheme: TextTheme(
      bodyText1: TextStyle(color: Colors.blue),
      bodyText2: TextStyle(color: Colors.blueAccent),
    ),
    floatingActionButtonTheme: FloatingActionButtonThemeData(
      backgroundColor: Colors.blue,
    ),
  );

  static final ThemeData blueDarkTheme = ThemeData(
    primarySwatch: Colors.blue,
    brightness: Brightness.dark,
    appBarTheme: AppBarTheme(
      backgroundColor: Colors.blue[700],
      foregroundColor: Colors.white,
    ),
    buttonTheme: ButtonThemeData(
      buttonColor: Colors.blue[700],
      textTheme: ButtonTextTheme.primary,
    ),
    textTheme: TextTheme(
      bodyText1: TextStyle(color: Colors.blue[100]),
      bodyText2: TextStyle(color: Colors.blueAccent[100]),
    ),
    floatingActionButtonTheme: FloatingActionButtonThemeData(
      backgroundColor: Colors.blue[700],
    ),
  );
}

通过上述解释和示例，可以更好地理解 ThemeData 各个参数的作用，并在应用中自定义主题。

响应式主题

第一步 安装GetX包

首先，确保在pubspec.yaml文件中添加GetX依赖。

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5

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

定义主题配置

创建一个文件来存储所有的主题数据，例如themes.dart

import 'package:flutter/material.dart';

class AppThemes {
  static final ThemeData blueLightTheme = ThemeData(
    primarySwatch: Colors.blue,
    brightness: Brightness.light,
    appBarTheme: AppBarTheme(
      backgroundColor: Colors.blue,
      foregroundColor: Colors.white,
    ),
  );

  static final ThemeData blueDarkTheme = ThemeData(
    primarySwatch: Colors.blue,
    brightness: Brightness.dark,
    appBarTheme: AppBarTheme(
      backgroundColor: Colors.blue[700],
      foregroundColor: Colors.white,
    ),
  );

  static final ThemeData greenLightTheme = ThemeData(
    primarySwatch: Colors.green,
    brightness: Brightness.light,
    appBarTheme: AppBarTheme(
      backgroundColor: Colors.green,
      foregroundColor: Colors.white,
    ),
  );

  static final ThemeData greenDarkTheme = ThemeData(
    primarySwatch: Colors.green,
    brightness: Brightness.dark,
    appBarTheme: AppBarTheme(
      backgroundColor: Colors.green[700],
      foregroundColor: Colors.white,
    ),
  );

  static final ThemeData redLightTheme = ThemeData(
    primarySwatch: Colors.red,
    brightness: Brightness.light,
    appBarTheme: AppBarTheme(
      backgroundColor: Colors.red,
      foregroundColor: Colors.white,
    ),
  );

  static final ThemeData redDarkTheme = ThemeData(
    primarySwatch: Colors.red,
    brightness: Brightness.dark,
    appBarTheme: AppBarTheme(
      backgroundColor: Colors.red[700],
      foregroundColor: Colors.white,
    ),
  );
}

创建ThemeController

使用GetX的Controller来管理主题的切换。 theme_controller.dart

import 'package:get/get.dart';
import 'themes.dart';

class ThemeController extends GetxController {
  var currentTheme = AppThemes.blueLightTheme.obs;

  void changeTheme(String color, bool isDarkMode) {
    switch (color) {
      case 'blue':
        currentTheme.value = isDarkMode ? AppThemes.blueDarkTheme : AppThemes.blueLightTheme;
        break;
      case 'green':
        currentTheme.value = isDarkMode ? AppThemes.greenDarkTheme : AppThemes.greenLightTheme;
        break;
      case 'red':
        currentTheme.value = isDarkMode ? AppThemes.redDarkTheme : AppThemes.redLightTheme;
        break;
    }
  }

  void switchTheme(int index) {
    var isDarkMode = currentTheme.value.brightness == Brightness.dark;
    switch (index) {
      case 0:
        changeTheme('blue', isDarkMode);
        break;
      case 1:
        changeTheme('green', isDarkMode);
        break;
      case 2:
        changeTheme('red', isDarkMode);
        break;
    }
  }

  void toggleThemeMode() {
    var isDarkMode = currentTheme.value.brightness == Brightness.dark;
    var color = currentTheme.value.primaryColor == Colors.blue ? 'blue' : currentTheme.value.primaryColor == Colors.green ? 'green' : 'red';
    changeTheme(color, !isDarkMode);
  }
}

创建改变主题的页面

theme_setting_widget.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:demo/utils/theme_controller.dart';

/**
 * @author[Jinkey]
 * @version[创建日期，10/6/2024 7:25 pm]
 * @function[功能简介 ]
 **/

class ThemeSettingWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final ThemeController themeController = Get.find<ThemeController>();

    return Scaffold(
      appBar: AppBar(title: Text('Theme Switcher')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: themeController.toggleThemeMode,
              child: Text('Toggle Light/Dark Mode'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => themeController.switchTheme(0),
              child: Text('Switch to Blue Theme'),
            ),
            ElevatedButton(
              onPressed: () => themeController.switchTheme(1),
              child: Text('Switch to Green Theme'),
            ),
            ElevatedButton(
              onPressed: () => themeController.switchTheme(2),
              child: Text('Switch to Red Theme'),
            ),
          ],
        ),
      ),
    );
  }
}

设置主文件并应用主题

在main.dart中初始化GetX并应用主题。

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'theme_controller.dart';

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

class MyApp extends StatelessWidget {
  final ThemeController themeController = Get.put(ThemeController());

  @override
  Widget build(BuildContext context) {
    return Obx(() {
      return GetMaterialApp(
        title: 'Theme Demo',
        theme: themeController.currentTheme.value,
        home: ThemeSettingWidget(),
      );
    });
  }
}