Flutter主题按钮插件theme_button的使用

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

Flutter主题按钮插件theme_button的使用

ThemeButton 是一个用于在Flutter应用中切换夜间/白天主题模式的便捷插件。它提供了一个简单的UI组件来实现主题切换功能，并支持自定义动画效果。

功能特性

  • 提供一个可以轻松集成的主题切换按钮。
  • 支持自定义宽度、高度、内边距以及动画时长等属性。
  • 通过回调函数通知用户主题模式的变化。

示例GIF

添加依赖

首先，在你的 pubspec.yaml 文件中添加 theme_button 依赖：

dependencies:
  flutter:
    sdk: flutter
  theme_button: ^{latest version}  # 请替换为最新版本号

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

快速开始

下面是一个简单的示例，展示了如何在Flutter应用中使用 ThemeButton：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData.dark(),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Demo'),
      ),
      body: Center(
        child: ThemeButton(
          onChanged: (value) {
            // 这里可以处理主题切换逻辑
            print('$value');
          },
        ),
      ),
    );
  }
}

属性说明

属性名 类型 默认值 描述
width double 72 组件的宽度
height double 72 组件的高度
padding EdgeInsets EdgeInsets.zero 动画的填充
duration Duration 1秒 动画的速度
onChanged Function(bool value) null 当用户更改开关状态时调用

例如，如果你想设置不同的宽度和高度，你可以这样做：

ThemeButton(
  width: 100,
  height: 50,
  onChanged: (value) {
    print('Switched to $value');
  },
)

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用theme_button插件来创建主题按钮的代码示例。假设你已经在pubspec.yaml文件中添加了theme_button依赖并运行了flutter pub get。

首先，确保你的pubspec.yaml文件包含以下依赖：

dependencies:
  flutter:
    sdk: flutter
  theme_button: ^latest_version  # 替换为实际的最新版本号

然后，你可以在你的Flutter项目中使用ThemeButton。以下是一个完整的示例，展示了如何创建一个主题按钮并处理其点击事件。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Theme Button Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  bool isDarkMode = false;

  void toggleTheme() {
    setState(() {
      isDarkMode = !isDarkMode;
      // 在这里，你可以添加代码来实际切换应用的主题
      // 例如，使用Provider、Bloc或其他状态管理库来更新全局主题状态
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Theme Button Example'),
      ),
      body: Center(
        child: ThemeButton(
          onPressed: toggleTheme,
          buttonStyle: ThemeButtonStyle.filled,
          isDarkMode: isDarkMode,
          darkModeColor: Colors.blue,
          lightModeColor: Colors.white,
          darkModeTextColor: Colors.white,
          lightModeTextColor: Colors.black,
          icon: Icon(
            isDarkMode ? Icons.brightness_3 : Icons.brightness_7,
          ),
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个Flutter应用，并在主页面MyHomePage中使用了ThemeButton。
  2. ThemeButton的onPressed属性绑定了一个名为toggleTheme的函数，该函数切换isDarkMode状态。
  3. buttonStyle属性设置为ThemeButtonStyle.filled，表示按钮是填充样式的。
  4. isDarkMode属性与当前的主题模式绑定。
  5. darkModeColor和lightModeColor属性分别设置了暗模式和亮模式下按钮的背景颜色。
  6. darkModeTextColor和lightModeTextColor属性分别设置了暗模式和亮模式下按钮的文本颜色。
  7. icon属性根据当前的主题模式显示不同的图标（暗模式下显示亮度较高的图标，亮模式下显示亮度较低的图标）。

你可以根据需要进一步自定义ThemeButton的其他属性，例如borderRadius、elevation等。希望这个示例对你有帮助！

回到顶部