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 分类

安装插件