Flutter明暗主题切换插件dark_light_button的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter明暗主题切换插件dark_light_button的使用

dark_light_button

dark_light_button 是一个包含用于在深色和浅色主题之间切换的现成小部件的 Flutter 包。

pub package

安装

要安装此包,在 pubspec.yaml 文件中添加 dark_light_button 作为依赖项。

dependencies:
  dark_light_button: ^x.x.x

运行 flutter pub get 以获取新依赖项。

使用

你需要使用 DarlightButton 小部件,然后就可以完成主题切换了!

DarlightButton(
  onChange: (ThemeMode theme) {
    // 更改你的主题
  },
),

你可以通过使用 type 属性来改变小部件的类型,该属性接受一个 Darlights 枚举作为参数。目前有三种类型的 darlight 按钮可用,并且很快会有更多类型。

DarlightButton(
  type: Darlights.DarlightThree,
  onChange: (ThemeMode theme) {
    // 更改你的主题
  },
),

可选参数

  • height 作为 double 类型,表示小部件的高度。
  • animationDuration 作为 Duration 类型,控制动画的持续时间。
  • options 是扩展自 DarlightOption 的类。此属性根据每个按钮名称命名。 例如,对于 Darlights.DarlightThree,你必须提供 DarlightThreeOption。 每个选项包含特定于小部件的属性,如背景颜色等。

示例

示例 1

DarlightButton(
  type: Darlights.DarlightOne,
  onChange: (ThemeMode theme) {
    // 更改你的主题
  },
  options: DarlightOneOption()
)

示例 2

DarlightButton(
  type: Darlights.DarlightTwo,
  onChange: (ThemeMode theme) {
    // 更改你的主题
  },
  options: DarlightTwoOption()
)

示例 3

DarlightButton(
  type: Darlights.DarlightThree,
  onChange: (ThemeMode theme) {
    // 更改你的主题
  },
  options: DarlightThreeOption()
)

示例 4

DarlightButton(
  type: Darlights.DarlightFour,
  onChange: (ThemeMode theme) {
    // 更改你的主题
  },
  options: DarlightFourOption()
)

示例代码

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

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dark Light Button Demo',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ThemeMode currentTheme = ThemeMode.light;

  void toggleTheme() {
    setState(() {
      currentTheme = currentTheme == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dark Light Button Demo'),
      ),
      body: Center(
        child: DarlightButton(
          type: Darlights.DarlightOne,
          onChange: (ThemeMode theme) {
            toggleTheme();
          },
          options: DarlightOneOption(),
        ),
      ),
    );
  }
}

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

1 回复

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


当然,下面是一个关于如何使用 dark_light_button 插件在 Flutter 应用中实现明暗主题切换的代码案例。

首先,确保你已经在 pubspec.yaml 文件中添加了 dark_light_button 依赖:

dependencies:
  flutter:
    sdk: flutter
  dark_light_button: ^latest_version  # 请替换为最新版本号

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

接下来,我们将编写一个示例应用,展示如何使用 dark_light_button 插件来切换明暗主题。

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Dark Light Theme Switch',
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blueGrey,
      ),
      themeMode: ThemeMode.system, // 初始主题模式,这里设置为系统主题
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
  ThemeMode _currentThemeMode = ThemeMode.system;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance!.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance!.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      // 当应用从后台恢复时,可以重新获取系统主题模式
      _currentThemeMode = ThemeMode.system;
      // 更新主题模式(可选,如果需要立即响应系统主题变化)
      // setState(() {});
    }
  }

  void _toggleThemeMode() {
    setState(() {
      if (_currentThemeMode == ThemeMode.light) {
        _currentThemeMode = ThemeMode.dark;
      } else if (_currentThemeMode == ThemeMode.dark) {
        _currentThemeMode = ThemeMode.light;
      } else {
        // ThemeMode.system, 切换为手动设置的主题(例如 light 或 dark)
        _currentThemeMode = ThemeMode.light; // 或者 ThemeMode.dark,根据需要
      }
    });

    // 保存主题模式到 SharedPreferences 或其他持久化存储(可选)
    // SharedPreferences.getInstance().then((prefs) {
    //   prefs.setString('themeMode', _currentThemeMode.toString());
    // });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dark Light Theme Switch'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            DarkLightButton(
              isDarkMode: _currentThemeMode == ThemeMode.dark,
              onToggle: _toggleThemeMode,
              // 可选参数:自定义按钮样式
              darkColor: Colors.black,
              lightColor: Colors.white,
              darkIcon: Icons.brightness_7,
              lightIcon: Icons.brightness_4,
              size: 50,
              animationDuration: Duration(milliseconds: 300),
            ),
            SizedBox(height: 20),
            Text(
              'Current Theme Mode: $_currentThemeMode',
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. 依赖引入:在 pubspec.yaml 文件中添加 dark_light_button 依赖。
  2. 主题设置:在 MyApp 中定义了 lightdark 主题,并设置初始主题模式为 ThemeMode.system
  3. 状态管理:在 MyHomePage 中使用 StatefulWidgetsetState 来管理主题模式的状态。
  4. 明暗主题切换:通过 DarkLightButton 组件实现明暗主题的切换,并在 _toggleThemeMode 方法中更新主题模式。
  5. 持久化存储:示例代码中注释了保存主题模式到 SharedPreferences 的部分,你可以根据需要取消注释并实现持久化存储。

这样,你就可以在 Flutter 应用中使用 dark_light_button 插件实现明暗主题的切换了。

回到顶部