套件詳情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.