Flutter美观按钮组件插件pretty_button的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter美观按钮组件插件pretty_button的使用

简介

pretty_button 是一个专为Flutter项目设计的可定制3D按钮小部件，具有极简的设计和高度的自定义性。你可以将其用作3D按钮，并根据应用风格进行自定义。此外，还可以通过设置 isDisable 属性来禁用按钮。

平台支持

平台 支持情况
Android ✅
iOS ✅
Web ✅
MacOS ✅
Linux ✅
Windows ✅

Android iOS MacOS Web

安装

  1. 在 pubspec.yaml 文件中添加依赖并运行 dart pub get：
dependencies:
  pretty_button: ^0.0.7
  1. 在你的Flutter App中导入并使用该包：
import 'package:pretty_button/pretty_button.dart';

自定义属性

属性名 类型 默认值 描述
topShadowColor Color onPrimary 按钮顶部和左侧的阴影颜色，默认为onPrimary
bottomShadowColor Color primary 按钮底部和右侧的阴影颜色，默认为primary
backgroundColor Color outlineVariant 按钮背景颜色，默认为outlineVariant
innerPadding Double 8 子组件的内边距，默认为8
outerPadding Double 8 按钮的外边距，默认为8
blurRadius Double 5 按钮的模糊半径，默认为5
spreadRadius Double 1 按钮的扩展半径，默认为1
height Double 50 按钮的高度，默认为50
width Double 150 按钮的宽度，默认为150
borderRadius Double 15 按钮的圆角半径，默认为15
isDisable Bool false 是否禁用按钮，默认为false
onTap Function - 按钮点击事件处理函数
child Widget - 按钮内部的内容，必填项

使用示例

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 PrettyButton：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.grey.shade300,
        appBar: AppBar(
          title: const Text('Pretty Button Example'),
          centerTitle: true,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              PrettyButton(
                isDisable: false,
                blurRadius: 5,
                spreadRadius: 1,
                topShadowColor: Theme.of(context).colorScheme.onPrimary,
                bottomShadowColor: Theme.of(context).colorScheme.primary,
                backgroundColor: Theme.of(context).colorScheme.outlineVariant,
                width: 150,
                height: 50,
                borderRadius: 15,
                innerPadding: const EdgeInsets.all(8.0),
                outerPadding: const EdgeInsets.all(8.0),
                onTap: () {
                  print('Button clicked');
                },
                child: Text(
                  'Click Me',
                  style: TextStyle(
                    color: Theme.of(context).colorScheme.primary,
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多信息

更多详细信息和示例代码可以在 GitHub仓库 中找到。

希望这个详细的介绍能帮助你更好地理解和使用 pretty_button 插件！如果你有任何问题或需要进一步的帮助，请随时提问。


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter中使用pretty_button插件来创建美观按钮的示例代码。请注意，pretty_button并非一个官方或广泛认可的Flutter插件，因此这个示例基于假设该插件存在并具有类似的功能。如果实际插件的API有所不同，请参考相应的文档进行调整。

首先，确保在pubspec.yaml文件中添加pretty_button依赖项（假设它存在于pub.dev上）：

dependencies:
  flutter:
    sdk: flutter
  pretty_button: ^最新版本号  # 替换为实际版本号

然后运行flutter pub get来获取依赖项。

接下来，在你的Dart文件中导入pretty_button并使用它创建一个美观的按钮。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:pretty_button/pretty_button.dart'; // 假设这是插件的导入路径

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pretty Button Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pretty Button Demo'),
      ),
      body: Center(
        child: PrettyButton(
          onPressed: () {
            // 按钮点击事件处理
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Button Pressed!')),
            );
          },
          text: 'Click Me',
          // 假设这些是pretty_button插件提供的参数
          color: Colors.blue,
          textColor: Colors.white,
          borderRadius: BorderRadius.circular(20),
          fontSize: 18,
          // 其他可能的自定义参数...
        ),
      ),
    );
  }
}

在这个示例中，我们假设PrettyButton具有以下参数：

  • onPressed: 按钮点击时的回调函数。
  • text: 按钮上显示的文本。
  • color: 按钮的背景颜色。
  • textColor: 按钮文本的颜色。
  • borderRadius: 按钮边框的圆角半径。
  • fontSize: 按钮文本的字体大小。

请注意，由于pretty_button并非一个真实存在的广泛认可的插件（至少在我最后的知识更新时是这样），上述代码中的参数和导入路径可能需要根据实际插件的API进行调整。如果pretty_button插件确实存在但API不同，请参考其官方文档获取正确的使用方法和参数。

如果pretty_button插件不存在，你可能想要寻找一个类似的Flutter按钮美化插件，如fluttertoast（虽然这是用于显示Toast消息的，不是按钮美化），或者考虑使用自定义按钮样式来实现所需的美观效果。

回到顶部