centos上flutter主题如何切换

在CentOS上使用Flutter进行主题切换，可以通过多种方式实现。以下是一些常见的方法：

使用 ValueNotifier

ValueNotifier 是一种简单的方式来管理应用的主题。你可以创建一个 ThemeController 类来管理主题的切换，并使用 ValueListenableBuilder 来监听主题的变化并更新应用的主题。

步骤如下：

1. 创建 ThemeController 类：

import 'package:flutter/material.dart';

class ThemeController extends ValueNotifier<bool> {
  ThemeController() : super(false);

  void changeTheme() {
    value = !value;
  }
}

2. 在 MyApp 类中使用 ThemeController：

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

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

final themeController = ThemeController();

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

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder(
      valueListenable: themeController,
      builder: (context, value, child) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: value ? ThemeData.dark() : ThemeData.light(),
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      },
    );
  }
}

3. 在 MyHomePage 中添加一个 Switch 来切换主题：

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ChangeNotifier"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text("Trocar tema do app"),
            ValueListenableBuilder(
              valueListenable: themeController,
              builder: (context, value, child) {
                return Switch(
                  value: value,
                  onChanged: (value) {
                    themeController.changeTheme();
                  },
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

使用 Redux

Redux 是一种更复杂但更强大的状态管理工具，适用于管理应用的状态。你可以使用 flutter_redux 库来实现主题切换。

步骤如下：

1. 安装 flutter_redux：

flutter pub add flutter_redux

2. 创建全局状态管理类：

import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';

// 定义 action
class RefreshThemeDataAction {
  final int darkMode;
  RefreshThemeDataAction(this.darkMode);
}

// 定义 reducer
final DarkModelReducer = combineReducers<int>([
  TypedReducer<int, RefreshThemeDataAction>(
    _refresh,
  ),
]);

int _refresh(int darkMode, action) {
  return action.darkMode;
}

// 定义全局 state
class WSState {
  int darkMode;
  WSState({this.darkMode});
}

WSState appReducer(WSState state, action) {
  return WSState(darkMode: DarkModelReducer(state.darkMode, action));
}

3. 在 MyApp 中使用 StoreBuilder 来构建应用：

import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'theme_redux.dart';
import 'ws_state.dart';

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

  @override
  Widget build(BuildContext context) {
    return StoreBuilder<WSState>(
      builder: (context, store) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: store.state.darkMode == 0 ? ThemeData.light() : ThemeData.dark(),
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      },
    );
  }
}

4. 在 MyHomePage 中添加按钮来切换主题：

import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'ws_state.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                StoreProvider.of<WSState>(context, listen: false).changeThemeMode();
              },
              child: const Text('Toggle Theme'),
            ),
          ],
        ),
      ),
    );
  }
}

使用 AdaptiveTheme

AdaptiveTheme 是一个第三方库，可以方便地实现主题的切换和管理。它支持多种主题模式，并且可以自定义主题颜色。

步骤如下：

1. 添加 adaptive_theme 依赖：

dependencies:
  flutter:
    sdk: flutter
  adaptive_theme: ^3.6.0

2. 在 MyApp 中使用 AdaptiveTheme：

import 'package:flutter/material.dart';
import 'adaptive_theme.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return AdaptiveTheme(
      light: ThemeData.light(useMaterial3: true),
      dark: ThemeData.dark(useMaterial3: true),
      initial: AdaptiveThemeMode.light,
      debugShowFloatingThemeButton: true,
      builder: (theme, darkTheme) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: theme,
          darkTheme: darkTheme,
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      },
    );
  }
}

3. 添加按钮来切换主题：

import 'package:flutter/material.dart';
import 'adaptive_theme.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                AdaptiveTheme.of(context).toggleThemeMode();
              },
              child: const Text('Toggle Theme Mode'),
            ),
          ],
        ),
      ),
    );
  }
}

通过以上方法，你可以在CentOS上使用Flutter实现应用的主题切换。选择适合你项目需求的方法进行实现即可。