Awesome

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.