Flutter主题切换插件flutter_switch_dark_light的使用

Flutter主题切换插件flutter_switch_dark_light的使用

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_switch_dark_light: ^0.0.1

然后运行 flutter pub get。

使用

在你的 Dart 文件中导入该包：

import 'package:flutter_switch_dark_light/flutter_switch_dark_light.dart';

将 FlutterSwitchDarkLight 小部件添加到你的应用中：

FlutterSwitchDarkLight(
  onChanged: (value) {
    // 在这里处理 isDark 的值
  },
  darkModeStatus: _isDarkModeEnabled,
),

你可以通过参数自定义小部件：

FlutterSwitchDarkLight(
  onChanged: (bool isDark) {
    // 在这里处理 isDark 的值
  },
  padding: const EdgeInsets.all(16.0),
  onText: 'Dark',
  offText: 'Light',
  onColor: Colors.grey[900],
  offColor: Colors.grey[200],
  activeColor: Colors.amber,
),

参数

参数 描述 默认值
onChanged 接收一个布尔值回调函数，指示开关是否打开。 必须提供
padding 开关周围的填充。 EdgeInsets.zero
onText 开关打开时显示的文本。 ‘Dark’
offText 开关关闭时显示的文本。 ‘Light’
onColor 开关打开时的颜色。 Colors.grey[900]
offColor 开关关闭时的颜色。 Colors.grey[200]
activeColor 开关打开时滑块的颜色。 Colors.amber

示例

以下是一个完整的示例代码：

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

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

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

  void _onThemeChanged(bool value) {
    setState(() {
      _isDarkMode = value;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Switch Dark/Light Demo',
      theme: _isDarkMode ? ThemeData.dark() : ThemeData.light(),
      home: Scaffold(
        appBar: AppBar(
          title: Text('主题切换示例'),
        ),
        body: Center(
          child: FlutterSwitchDarkLight(
            onChanged: (bool isDark) {
              _onThemeChanged(isDark);
            },
            padding: const EdgeInsets.all(16.0),
            onText: 'Dark',
            offText: 'Light',
            onColor: Colors.grey[900],
            offColor: Colors.grey[200],
            activeColor: Colors.amber,
          ),
        ),
      ),
    );
  }
}

更多关于Flutter主题切换插件flutter_switch_dark_light的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter主题切换插件flutter_switch_dark_light的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用flutter_switch_dark_light插件来实现主题切换的一个代码示例。这个插件允许用户轻松地在应用内切换明暗主题。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_switch_dark_light: ^0.x.x  # 请替换为最新版本号

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

接下来，设置你的应用以支持明暗主题。首先，在lib目录下创建一个themes.dart文件来定义你的主题数据：

import 'package:flutter/material.dart';

ThemeData lightTheme() {
  return ThemeData(
    brightness: Brightness.light,
    primarySwatch: Colors.blue,
    // 其他主题配置...
  );
}

ThemeData darkTheme() {
  return ThemeData(
    brightness: Brightness.dark,
    primarySwatch: Colors.blueGrey,
    // 其他主题配置...
  );
}

然后，在你的主文件（例如main.dart）中，使用flutter_switch_dark_light插件来管理主题切换：

import 'package:flutter/material.dart';
import 'package:flutter_switch_dark_light/flutter_switch_dark_light.dart';
import 'themes.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlutterSwitchDarkLight(
      initialTheme: ThemeMode.system, // 或者 ThemeMode.light / ThemeMode.dark
      builder: (context, theme) {
        return MaterialApp(
          title: 'Flutter Theme Switcher Demo',
          themeMode: theme,
          theme: lightTheme(),
          darkTheme: darkTheme(),
          home: MyHomePage(),
        );
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Theme Switcher Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Theme Mode: ${Theme.of(context).brightness == Brightness.light ? 'Light' : 'Dark'}',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                FlutterSwitchDarkLight.of(context)!.switchTheme();
              },
              child: Text('Switch Theme'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. themes.dart定义了两种主题：lightTheme和darkTheme。
  2. main.dart使用FlutterSwitchDarkLight包裹MaterialApp，并通过builder回调根据当前主题模式构建应用。
  3. FlutterSwitchDarkLight.of(context)!.switchTheme()方法用于在用户点击按钮时切换主题。

运行这个应用，你应该能够在点击按钮时在明暗主题之间切换。FlutterSwitchDarkLight插件会自动处理主题持久化，以便在用户重启应用时恢复之前选择的主题模式。

回到顶部