gradient_widgets

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

GradientWidgets 是一個輕量級的 Flutter 套件，提供一組最小化的組件，並以美麗的漸變效果加以增強。它讓開發者能輕鬆地將漸變效果套用於背景、文字及其他 UI 元素，使用簡單直覺的 API。適合為應用增添視覺魅力，無需複雜設定，支援順暢的漸變過渡，並能與現有的 Flutter 專案無縫整合。此套件專注於簡潔性與效能，非常適合現代且具視覺吸引力的介面。

適用情境

向容器添加漸變背景
使用漸變顏色增強文字
創建動畫漸變效果
設計現代應用程式使用者介面
用最少的程式碼提升視覺吸引力
自定義按鈕和卡片外觀

主要特色

簡單的漸變小工具 API
支援背景與文字漸變
最小性能開銷
與 Flutter 的輕鬆整合
乾淨、易讀的程式碼庫
無外部依賴

適合對象

尋求視覺精緻的UI設計師
開發現代移動應用的開發者
需要細微漸變效果的專案
原型化視覺豐富的介面
注重美學設計的應用

使用建議

僅限基本漸變功能
無內建動畫控制
不適用於複雜的著色器效果
需要手動處理漸變方向和顏色
適用於靜態或簡單動態漸層

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

Gradient Widgets

As of ^0.5.0, shadowColor is available for gradient buttons and cards

A minimal set of Flutter widgets encased with beautiful gradients.

You can use them when your UI needs user attention/focus, , e.g., login or send actions, or important shopping item title (see Gradient Screens to get the idea 😉)

☑️ GradientText

☑️ GradientCard

☑️ GradientButton

☑️ CircularGradientButton + Shadow Color

☑️ GradientProgressIndicator

☑️ CircularGradientProgressIndicator

◻️ GradientAppBar

Installation

In your pubspec.yaml root add:

dependencies:
  gradient_widgets: ^0.6.0

then,

import 'package:gradient_widgets/gradient_widgets.dart';

Usage

Card + Gradient

GradientCard(
    gradient: Gradients.tameer,
    shadowColor: Gradients.tameer.colors.last.withOpacity(0.25),
    elevation: 8,
);

most parameters are the same as the Card.

Progress Indicator + Gradient

must be gradient.colors.length = 2

indeterminate

GradientProgressIndicator(gradient: Gradients.rainbowBlue,);

determinate

GradientProgressIndicator(
  gradient: Gradients.rainbowBlue,
  value: 0.65,
);

Circular Progress Indicator + Gradient

must be gradient.colors.length = 2

indeterminate

GradientCircularProgressIndicator(
  gradient: Gradients.aliHussien,
);

determinate

GradientCircularProgressIndicator(
  gradient: Gradients.aliHussien,
  radius: 100,
);

Normal Button + Gradient

GradientButton(
  child: Text('Gradient'),
  callback: () {},
  gradient: Gradients.backToFuture,
  shadowColor: Gradients.backToFuture.colors.last.withOpacity(0.25),
),

most parameters are the same as any *Button.

Circular Button + Gradient

CircularGradientButton(
  child: Icon(Icons.gradient),
  callback: (){},
  gradient: Gradients.rainbowBlue,
  shadowColor: Gradients.rainbowBlue.colors.last.withOpacity(0.5),
),

most parameters are the same as FloatingActionButton.

Text + Gradient

GradientText(
  'Hello',
  shaderRect: Rect.fromLTWH(0.0, 0.0, 50.0, 50.0),
  gradient: Gradients.hotLinear,
  style: TextStyle(fontSize: 40.0,),
),

all parameters are the same as the Text.

Getting Started

For help getting started with Flutter, view our online documentation.

For help on editing package code, view the documentation.

搜尋套件、儲存庫與 APP 分類

安裝套件