Flutter高级按钮组件插件nextgen_button的使用

Flutter高级按钮组件插件NextGenButton的使用

NextGenButton 是一个用于 Flutter 的可定制按钮小部件，允许你创建具有各种设计和行为选项的时尚且功能强大的按钮。该小部件支持动态大小调整、加载状态以及可自定义的边框、颜色和图标。

特性

• 可定制背景色：通过 color 属性设置按钮的背景色。
• 可调边框：使用 borderColor 和 border 属性定义边框颜色和宽度。
• 圆角：使用 radius 属性自定义边框半径以实现圆角效果。
• 阴影：通过 elevation 属性应用阴影使按钮看起来有立体感。
• 灵活的尺寸：使用 height 和 width 属性指定按钮的确切尺寸。
• 加载状态：当 isLoading 设置为 true 时，显示加载指示器，并在加载期间禁用交互。
• 图标支持：使用 leftIcon 和 rightIcon 属性在按钮文本的左侧和/或右侧添加图标。
• 自定义操作：使用 onTap 回调定义按钮点击时的操作。

安装

要将 NextGenButton 小部件集成到你的 Flutter 项目中，只需将包含 NextGenButton 类的文件引入到你的项目中。

使用

以下是一个基本示例，展示了如何使用 NextGenButton 小部件：

import 'package:flutter/material.dart';
import 'package:nextgen_button/nextgen_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('NextGenButton Example')),
        body: Center(
          child: NextGenButton(
            onTap: () {
              // 按钮点击时执行的操作
              print('NextGenButton tapped!');
            },
            titleText: Text(
              '点击我',
              style: TextStyle(color: Colors.white),
            ),
            color: Colors.blue,
            borderColor: Colors.blueAccent,
            border: 2,
            radius: 12,
            elevation: 5,
            height: 50,
            width: 200,
            leftIcon: Icon(
              Icons.add,
              color: Colors.white,
            ),
            rightIcon: Icon(
              Icons.arrow_forward,
              color: Colors.white,
            ),
            isLoading: false, // 设置为 true 以显示加载指示器
          ),
        ),
      ),
    );
  }
}

示例代码

以下是完整的示例代码，展示如何在 Flutter 应用程序中使用 NextGenButton 小部件：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:nextgen_button/nextgen_button.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'NextGenButton Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const NextGenButtonExampleScreen(),
    );
  }
}

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

  void _handleButtonTap() {
    // 按钮点击时执行的操作
    if (kDebugMode) {
      print('NextGenButton tapped!');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('NextGenButton Example'),
      ),
      body: Center(
        child: NextGenButton(
          onTap: _handleButtonTap,
          titleText: const Text('点击我'),
          color: Colors.blue,
          borderColor: Colors.blueAccent,
          border: 2.0,
          radius: 8.0,
          height: 50.0,
          width: 200.0,
          elevation: 5.0,
          rightIcon: const Icon(Icons.arrow_forward, color: Colors.white),
          isLoading: false,
          leftIcon: const Icon(Icons.touch_app, color: Colors.white),
        ),
      ),
    );
  }
}