Flutter主题切换插件simple_dart_blue_theme的使用

simple_dart_blue_theme 是一个用于 Flutter 应用主题切换的插件，它允许你轻松地在应用中切换主题。以下是如何使用 simple_dart_blue_theme 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 simple_dart_blue_theme 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_dart_blue_theme: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 simple_dart_blue_theme 插件：

import 'package:simple_dart_blue_theme/simple_dart_blue_theme.dart';

3. 使用主题

simple_dart_blue_theme 提供了预定义的主题，你可以直接在应用中使用这些主题。

3.1 设置主题

你可以在 MaterialApp 中使用 SimpleDartBlueTheme 提供的主题：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: SimpleDartBlueTheme.lightTheme,  // 使用浅色主题
      darkTheme: SimpleDartBlueTheme.darkTheme,  // 使用深色主题
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Dart Blue Theme Demo'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

3.2 动态切换主题

如果你想在运行时动态切换主题，可以使用 ThemeProvider 或 ChangeNotifier 来管理主题状态。以下是一个简单的示例：

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isDarkTheme = false;

  void _toggleTheme() {
    setState(() {
      _isDarkTheme = !_isDarkTheme;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: _isDarkTheme ? SimpleDartBlueTheme.darkTheme : SimpleDartBlueTheme.lightTheme,
      home: MyHomePage(
        toggleTheme: _toggleTheme,
        isDarkTheme: _isDarkTheme,
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final VoidCallback toggleTheme;
  final bool isDarkTheme;

  MyHomePage({required this.toggleTheme, required this.isDarkTheme});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Dart Blue Theme Demo'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: toggleTheme,
        child: Icon(isDarkTheme ? Icons.wb_sunny : Icons.brightness_2),
      ),
    );
  }
}

在这个示例中，我们使用了一个 FloatingActionButton 来切换主题。_isDarkTheme 状态变量用于跟踪当前主题，并在点击按钮时切换主题。

4. 自定义主题

如果你需要自定义主题，可以基于 SimpleDartBlueTheme 提供的主题进行扩展或修改。例如：

final customLightTheme = ThemeData(
  brightness: Brightness.light,
  primaryColor: Colors.blue,
  accentColor: Colors.blueAccent,
  // 其他自定义属性
);

final customDarkTheme = ThemeData(
  brightness: Brightness.dark,
  primaryColor: Colors.blueGrey,
  accentColor: Colors.blueGrey[200],
  // 其他自定义属性
);