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

"Enough with the nesting! Easily implement a stylish ElevatedButton!"

使用方法

通过使用 MyButton 插件，您可以轻松创建一个带有自定义样式的按钮。以下是一个简单的示例：

MyButton(
    fontStyle: FontStyle.italic, // 设置字体样式为斜体
    text: "button5", // 按钮上显示的文字
    fontSize: 30, // 设置文字大小
    outlinedBorder: const RoundedRectangleBorder( // 设置按钮边框为圆角矩形
        borderRadius: BorderRadius.all(Radius.circular(10))),
    backgroundColor: Colors.yellow, // 设置按钮背景颜色
    borderWidth: 0, // 设置边框宽度为0
    borderColor: Colors.yellow, // 设置边框颜色与背景色相同
)

完整示例代码

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

import 'package:flutter/material.dart';
import 'package:my_button/my_button.dart'; // 导入 my_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, // 使用 Material 3 设计规范
      ),
      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> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary, // 设置应用栏背景颜色
        title: Text(widget.title), // 设置应用栏标题
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0), // 设置页面内边距
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center, // 垂直居中对齐
            children: [
              MyButton( // 第一个按钮
                text: "button1", // 按钮文字
                fontSize: 30, // 字体大小
              ),
              MyButton( // 第二个按钮
                text: "button2",
                fontSize: 30,
                backgroundColor: Colors.red, // 背景颜色
                borderWidth: 0, // 边框宽度为0
                borderColor: Colors.red, // 边框颜色与背景颜色一致
              ),
              MyButton( // 第三个按钮
                text: "button3",
                fontSize: 30,
                outlinedBorder: LinearBorder(), // 边框样式为直线
                backgroundColor: Colors.blue, // 背景颜色
              ),
              MyButton( // 第四个按钮
                text: "", // 按钮无文字
                fontSize: 30,
                outlinedBorder: StarBorder(), // 边框样式为星形
                backgroundColor: Colors.blue, // 背景颜色
              ),
              MyButton( // 第五个按钮
                fontStyle: FontStyle.italic, // 字体样式为斜体
                text: "button5",
                fontSize: 30,
                outlinedBorder: const RoundedRectangleBorder( // 边框样式为圆角矩形
                    borderRadius: BorderRadius.all(Radius.circular(10))),
                backgroundColor: Colors.yellow, // 背景颜色
                borderWidth: 0, // 边框宽度为0
                borderColor: Colors.yellow, // 边框颜色与背景颜色一致
              ),
            ],
          ),
        ),
      ),
    );
  }
}