搜索插件、代码仓与 APP 分类

gradient_coloured_buttons 封面
插件详情v0.1.0

gradient_coloured_buttons

创建视觉上吸引人的按钮,支持自定义渐变颜色、尺寸和圆角半径,以增强您的Flutter用户界面。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
29
喜欢数
87
Pub 分数
130

安装插件

flutter pub add gradient_coloured_buttons

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包,使开发者能够创建具有完全可自定义渐变颜色、尺寸和圆角的吸引人按钮。它通过提供平滑的颜色过渡和现代视觉效果,增强了用户界面,适用于多个平台。该包易于集成,非常适合希望凭借动态按钮设计脱颖而出的应用程序。它支持所有主要的 Flutter 平台,包括 Android、iOS、Web、macOS、Windows 和 Linux。

适合场景

  • 通过鲜艳的按钮增强应用界面
  • 创建交互式操作按钮元素
  • 设计现代登录或注册屏幕
  • 改进表单中的视觉反馈
  • 为仪表板增添美学魅力
  • 无需额外代码即可自定义按钮样式

主要特点

  • 完全可自定义的渐变颜色
  • 可调节按钮尺寸
  • 可配置的边框圆角
  • 跨平台兼容性
  • 通过 pub.dev 的简单集成
  • 支持线性渐变和径向渐变

适合对象

  • 寻求视觉精致的UI设计师
  • 开发现代 Flutter 应用的开发者
  • 需要吸引人互动元素的应用程序
  • 专注于美学和品牌建设的项目
  • 希望快速自定义按钮的团队

使用建议

  • 可能需要额外的样式以确保可访问性
  • 渐变在复杂布局中的性能影响
  • 有限的内置动画选项
  • 最好与对比度高的文字搭配以提高可读性
  • 不太适合极简主义设计方法

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

Gradient Button

A Flutter package that provides customizable buttons with gradient colors. Enhance your Flutter UI by easily creating buttons with smooth gradient backgrounds.

Features

  • Create buttons with gradient backgrounds using the GradientButton widget.
  • Customize button dimensions, border radius, and more.
  • Easy integration and usage within your Flutter projects.

Getting started

To use this package, add gradient_coloured_buttons as a dependency in your pubspec.yaml file:

dependencies:

gradient_coloured_buttons: ^0.0.7

Example

These are the properties that you can modify:

  • text

  • onPressed

  • gradientColors

  • width

  • height

  • borderRadius

  • textStyle

Usage

//HERE IS THE COMPLETE CODE ...

import 'package:flutter/material.dart';

//Import the package in your Dart file:

import 'package:gradient_coloured_buttons/gradient_coloured_buttons.dart';

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

class GradientButtons extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Gradient Coloured button',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: GradientColouredButton(),
  );
}
}
class GradientColouredButton extends StatefulWidget {
const GradientColouredButton({Key? key}) : super(key: key);

@override
State<GradientColouredButton> createState() => _GradientColouredButtonState();
}

class _GradientColouredButtonState extends State<GradientColouredButton> {
@override
Widget build(BuildContext context) {
  return Scaffold(
    body:
    //      <---content STARTS here--->
    GradientButton(
            text: "Johnson Redonyx Silva",
            textStyle: const TextStyle(fontWeight: FontWeight.bold,fontSize: 15),
            gradientColors: const [Colors.red,Colors.black,Colors.brown],
            width: 200,
            height: 50,
            borderRadius: 30.0,
            onPressed: ()
            {
              print("GradientButton is Pressed");
            }
        ),
    //      <---content ENDS here--->
  );
}
}

Example Image

Example Image

Additional information

This package offers a straightforward solution to apply gradient colors to buttons, enabling you to enhance their visual appeal effortlessly and efficiently.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。