Flutter自定义按钮插件dghub_button的使用

DGHub Studio

![](https://avatars.githubusercontent.com/u/112307287?v=4 | width=100)

Buy Me a Coffee

什么是dghub_button？

这个包为Flutter项目提供了一个可定制的按钮。

安装

在你的pubspec.yaml文件的dependencies:部分添加以下行：

dependencies:
  dghub_button: <latest_version>

导入包

import 'package:dghub_button/dghub_button.dart';

示例：主页按钮

以下是一个简单的示例，展示如何使用DGHubButton。

DGHubButton(
  config: ButtonConfig(
    width: 100,
    isError: isError,
    isSuccess: isSuccess,
    // isLoading: true,
    onTap: () {
      isSuccess = true;
      setState(() {});
    },
    color: Colors.pink,
    label: 'Click',
  ),
),

完整示例代码

以下是完整的示例代码，展示如何在Flutter应用中使用dghub_button。

main.dart

import 'package:flutter/material.dart';
import 'package:dghub_button/dghub_button.dart'; // 导入dghub_button包

void main() {
  runApp(const MyApp()); // 运行应用
}

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

  // 应用的根小部件
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo', // 应用标题
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), // 主题颜色
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'), // 主页
    );
  }
}

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState(); // 创建状态
}

class _MyHomePageState extends State<MyHomePage> {
  bool isSuccess = true; // 成功状态
  bool isError = false; // 错误状态

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary, // 设置AppBar背景颜色
        title: Text(widget.title), // 设置AppBar标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 垂直居中
          children: [
            DGHubButton(
              type: DGHubButtonType.circle, // 按钮类型为圆形
              config: ButtonConfig(
                width: 100, // 按钮宽度
                height: 100, // 按钮高度
                isError: isError, // 是否显示错误状态
                isSuccess: isSuccess, // 是否显示成功状态
                // isLoading: true, // 是否显示加载状态
                onTap: () {
                  isSuccess = true; // 设置成功状态为true
                  setState(() {}); // 更新UI
                },
                iconSize: 35, // 图标大小
                color: Colors.pink, // 按钮颜色
                label: 'Click', // 按钮文字
              ),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter自定义按钮插件dghub_button的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


dghub_button 是一个自定义的 Flutter 按钮插件，它提供了多种按钮样式和动画效果，可以帮助开发者快速创建美观的按钮。以下是使用 dghub_button 的基本步骤和示例代码。

1. 安装插件

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

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

然后运行 flutter pub get 来安装插件。

2. 导入插件

在你的 Dart 文件中导入 dghub_button：

import 'package:dghub_button/dghub_button.dart';

3. 使用 DGHubButton

DGHubButton 提供了多种构造函数来创建不同类型的按钮。以下是几个常见的用法示例：

基本按钮

DGHubButton(
  onPressed: () {
    // 按钮点击事件
    print('Button Pressed!');
  },
  child: Text('Click Me'),
)

带图标的按钮

DGHubButton.icon(
  onPressed: () {
    print('Icon Button Pressed!');
  },
  icon: Icon(Icons.thumb_up),
  label: Text('Like'),
)

自定义样式的按钮

```dghub_button` 允许你自定义按钮的颜色、形状、大小等属性：

DGHubButton(
  onPressed: () {
    print('Custom Button Pressed!');
  },
  child: Text('Custom Button'),
  color: Colors.blue,
  textColor: Colors.white,
  borderRadius: BorderRadius.circular(20),
  padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
)

带加载动画的按钮

DGHubButton(
  onPressed: () async {
    // 模拟异步操作
    await Future.delayed(Duration(seconds: 2));
    print('Async Button Pressed!');
  },
  child: Text('Async Button'),
  loadingWidget: CircularProgressIndicator(
    valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
  ),
)

4. 完整示例

以下是一个完整的示例，展示了如何使用 dghub_button 创建不同类型的按钮：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('DGHubButton Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              DGHubButton(
                onPressed: () {
                  print('Button Pressed!');
                },
                child: Text('Click Me'),
              ),
              SizedBox(height: 20),
              DGHubButton.icon(
                onPressed: () {
                  print('Icon Button Pressed!');
                },
                icon: Icon(Icons.thumb_up),
                label: Text('Like'),
              ),
              SizedBox(height: 20),
              DGHubButton(
                onPressed: () {
                  print('Custom Button Pressed!');
                },
                child: Text('Custom Button'),
                color: Colors.blue,
                textColor: Colors.white,
                borderRadius: BorderRadius.circular(20),
                padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
              ),
              SizedBox(height: 20),
              DGHubButton(
                onPressed: () async {
                  await Future.delayed(Duration(seconds: 2));
                  print('Async Button Pressed!');
                },
                child: Text('Async Button'),
                loadingWidget: CircularProgressIndicator(
                  valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部