插件详情v1.2.0

gradient_elevated_button

具有渐变背景的自定义 Flutter 按钮，用于视觉上吸引人的用户界面。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文档源代码

近 30 天下载: 338
喜欢数: 15
Pub 分数: 150

安装插件

flutter pub add gradient_elevated_button

插件介绍

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

一个可自定义的 Flutter 按钮，具有渐变背景，旨在提升 UI 美学。它扩展了标准的 ElevatedButton，支持平滑的渐变填充、阴影效果和响应式反馈。非常适合需要视觉吸引力按钮但又不牺牲功能性的现代应用程序界面。该包支持所有主要平台，包括 Android、iOS、Web、macOS、Windows 和 Linux，确保在各种设备上外观一致。

适合场景

创建引人注目的行动号召按钮
增强登录或注册屏幕
设计现代移动和网页界面
为表单和仪表板增添视觉魅力
通过动态视觉效果提升用户参与度

主要特点

渐变背景支持
内置的高程和阴影效果
可自定义的颜色和停止点
响应式触摸反馈
跨平台兼容性
与现有 Flutter 代码的简单集成

适合对象

寻求视觉精致的UI设计师
开发现代应用程序的开发者
注重美学吸引力的项目
面向多个平台的应用程序
使用 Flutter 进行全栈开发的团队

使用建议

可能需要额外的样式以确保可访问性
复杂渐变对性能的影响
除了渐变和高程之外，自定义选项有限
不适合极简主义设计模式
最好与对比度高的文字搭配以提高可读性

原始 README

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

GradientElevatedButton

A customizable elevated button with gradient support for your Flutter applications. This package allows you to create buttons with gradient backgrounds, custom foreground colors, and various other customizable properties using the GradientElevatedButton widget.

Features

Gradient Background: Easily apply gradients to your button backgrounds.
Customizable Style: Customize text color, shape, padding, and more.
Integration with Theme: Use GradientButtonThemeExtension (via ThemeExtension) to apply a consistent style across your app. (Old: GradientButtonThemeData is deprecated)

Demo

Usage

1. Theming with ThemeExtension (Recommended)

The recommended way to theme all gradient buttons is to use GradientButtonThemeExtension with ThemeData.extensions:

MaterialApp(
  theme: ThemeData(
    extensions: <ThemeExtension<dynamic>>[
      GradientButtonThemeExtension(
        style: GradientElevatedButton.styleFrom(
          backgroundGradient: const LinearGradient(
            colors: [Colors.blue, Colors.green],
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
          ),
          foregroundColor: Colors.black,
        ),
      ),
    ],
  ),
  home: ...,
)

Then use GradientElevatedButton as usual:

GradientElevatedButton(
  onPressed: () {},
  child: Text('Themed Gradient Button'),
)

2. [DEPRECATED] Using GradientButtonThemeData

GradientButtonThemeData is deprecated and will be removed in a future release. Migrate to ThemeExtension as shown above.

// Deprecated usage:
GradientButtonThemeData(
  data: GradientElevatedButton.styleFrom(
    backgroundGradient: const LinearGradient(
      colors: [Colors.blue, Colors.green],
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
    ),
    foregroundColor: Colors.black,
  ),
  child: MaterialApp(
    // ...
  ),
)

3. Using GradientElevatedButton.styleFrom

Alternatively, you can style the GradientElevatedButton directly using GradientElevatedButton.styleFrom to define the button's gradient, shape, and other properties:


Widget gradientWidget = GradientElevatedButton(
  onPressed: () {

  },
  style: GradientElevatedButton.styleFrom(
    gradient: const LinearGradient(colors: [
      Color.fromARGB(255, 166, 206, 57),
      Color.fromARGB(255, 0, 175, 173),
    ],
      disabledGradient: const LinearGradient(colors: [
        Colors.grey.withAlpha(200),
        Colors.grey,
        Colors.grey.withAlpha(200),
      ],
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
      ),
    ),
  ),
  child: const Text("This is Gradient Elevated Button"),
);

Customization

You can fully customize the GradientElevatedButton using the following properties:

backgroundGradient: A LinearGradient (or other types) that defines the background gradient.
foregroundColor: The color of the text and icon on the button.
disabledBackgroundGradient: A LinearGradient (or other types) that defines the disabled background gradient.
disabledForegroundColor: The color of the text and icon on the disabled button.
padding: Padding inside the button.
shape: Define the button’s shape with a ShapeBorder like RoundedRectangleBorder or StadiumBorder.
elevation: Controls the button's elevation (default: 2).
onPressed: The callback function that is called when the button is pressed.