Flutter创意按钮插件edgy_button的使用

Flutter创意按钮插件edgy_button的使用

概述

edgy_button 是一个全新的、独特的 Flutter 按钮样式插件，能够为您的 Flutter 项目增添更多视觉吸引力。通过使用此插件，您可以轻松创建带有边缘效果的独特按钮。

示例演示

使用步骤

1. 在 pubspec.yaml 文件中添加依赖项

在项目的 pubspec.yaml 文件中，添加以下依赖项：

dependencies:
  edgy_button: ^0.0.1

然后运行以下命令以更新依赖项：

flutter pub get

2. 导入插件

在需要使用的 Dart 文件中导入 edgy_button 包：

import 'package:edgy_button/edgy_button.dart';

3. 使用 EdgyButton 创建按钮

以下是两种类型的按钮示例代码：

正常按钮

EdgyButton(
  buttonHeight: 50, // 按钮高度
  buttonWidth: 200,  // 按钮宽度
  label: 'BUTTON',   // 按钮文本
  labelStyle: const TextStyle( // 文本样式
    fontWeight: FontWeight.bold,
    fontSize: 24,
    color: Colors.white,
  ),
  buttonColor: Colors.redAccent, // 按钮颜色
  onPressed: () { // 点击事件
    log('Clicked');
  },
),

带边框的按钮

EdgyButton(
  buttonHeight: 50,
  buttonWidth: 200,
  label: 'BUTTON',
  labelStyle: const TextStyle(
    fontWeight: FontWeight.bold,
    fontSize: 24,
    color: Colors.green,
  ),
  border: Border.all( // 添加边框
    color: Colors.green,
    width: 2,
  ),
  buttonColor: Colors.transparent, // 按钮背景透明
  onPressed: () {
    log('Clicked Pro');
  },
),

完整示例代码

以下是一个完整的示例代码，展示如何在 Flutter 应用程序中使用 edgy_button 插件：

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:edgy_button/edgy_button.dart'; // 引入插件

void main() {
  runApp(const MyApp()); // 启动应用
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'EdgyButton Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(), // 主页面
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState(); // 初始化状态
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 第一个按钮（正常按钮）
            EdgyButton(
              buttonHeight: 50,
              buttonWidth: 200,
              label: 'BUTTON',
              labelStyle: const TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 24,
                color: Colors.white,
              ),
              buttonColor: Colors.redAccent,
              onPressed: () {
                log('Clicked'); // 点击日志
              },
            ),
            const SizedBox(height: 20), // 按钮之间的间距
            // 第二个按钮（带边框按钮）
            EdgyButton(
              buttonHeight: 50,
              buttonWidth: 200,
              label: 'BUTTON',
              labelStyle: const TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 24,
                color: Colors.green,
              ),
              border: Border.all(
                color: Colors.green,
                width: 2,
              ),
              buttonColor: Colors.transparent,
              onPressed: () {
                log('Clicked Pro'); // 点击日志
              },
            ),
          ],
        ),
      ),
    );
  }
}