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

Flutter 自定义按钮插件 `CustomElevatedButton` 的使用

用户可以通过此插件直接编辑和管理按钮样式。

特性

这是一个自定义的 ElevatedButton，用户可以轻松创建并根据需要修改它。你可以为该插件贡献代码，并进行分叉和更新。

使用方法

CustomElevatedButton(
    height: 58, // 按钮的高度
    text: "lbl_view_e_pass".tr.toUpperCase(), // 按钮上的文本，使用了本地化字符串并转为大写
    buttonTextStyle: TextStyle(color: Colors.white), // 按钮文字样式
    buttonStyle:  ButtonStyle(), // 按钮样式
    onPressed: () {}, // 点击事件
),

额外信息

这是一个自定义的 ElevatedButton，用户可以轻松创建并根据需要修改它。你可以为该插件贡献代码，并进行分叉和更新。

GitHub

https://github.com/awaisdev5765/customelevetedbutton.git

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:custom_elevated_button/custom_elevated_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('自定义按钮示例')),
        body: Center(
          child: CustomElevatedButton(
            height: 58, // 按钮高度
            text: "查看电子通行证".toUpperCase(), // 按钮文本
            buttonTextStyle: TextStyle(color: Colors.white), // 按钮文字样式
            buttonStyle: ButtonStyle( // 按钮样式
              backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(18.0),
                ),
              ),
            ),
            onPressed: () {
              print("按钮被点击了！");
            },
          ),
        ),
      ),
    );
  }
}

phonegap100 1楼•2 个月前

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

在Flutter中，如果你想创建一个自定义的按钮插件，比如CustomElevatedButton，你可以通过创建一个自定义的Widget来实现。以下是一个简单的示例，展示如何创建和使用一个自定义的ElevatedButton。

1. 创建自定义按钮插件

首先，创建一个名为custom_elevated_button.dart的文件，并定义一个CustomElevatedButton类。

import 'package:flutter/material.dart';

class CustomElevatedButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;
  final Color backgroundColor;
  final Color textColor;
  final double borderRadius;

  const CustomElevatedButton({
    Key? key,
    required this.text,
    required this.onPressed,
    this.backgroundColor = Colors.blue,
    this.textColor = Colors.white,
    this.borderRadius = 8.0,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
        backgroundColor: backgroundColor,
        foregroundColor: textColor,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(borderRadius),
        ),
      ),
      child: Text(text),
    );
  }
}

2. 使用自定义按钮插件

接下来，你可以在你的Flutter应用中使用这个自定义按钮插件。例如，在main.dart中使用它：

import 'package:flutter/material.dart';
import 'custom_elevated_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('Custom Elevated Button Example'),
        ),
        body: Center(
          child: CustomElevatedButton(
            text: 'Click Me',
            onPressed: () {
              print('Button Pressed!');
            },
            backgroundColor: Colors.green,
            textColor: Colors.white,
            borderRadius: 12.0,
          ),
        ),
      ),
    );
  }
}