Awesome Open Source
Awesome Open Source

Pub

Gradient Widgets

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

Gradient Widgets

must be gradient.colors.length = 2

indeterminate

GradientProgressIndicator(gradient: Gradients.rainbowBlue,);

determinate

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

Circular Progress Indicator + Gradient

Circular Gradient Progress Widgets

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.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Flutter (11,793
Widget (1,860
Text (1,576
Card (866
Button (761
Gradient (429
Progress (413
Related Projects