gradient_widgets

Creator: coderz1093

Last updated:

Add to Cart

Description:

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
copied to clipboard
then,
import 'package:gradient_widgets/gradient_widgets.dart';
copied to clipboard
Usage #
Card + Gradient #
GradientCard(
gradient: Gradients.tameer,
shadowColor: Gradients.tameer.colors.last.withOpacity(0.25),
elevation: 8,
);
copied to clipboard
most parameters are the same as the Card.
Progress Indicator + Gradient #


must be gradient.colors.length = 2

indeterminate
GradientProgressIndicator(gradient: Gradients.rainbowBlue,);
copied to clipboard
determinate
GradientProgressIndicator(
gradient: Gradients.rainbowBlue,
value: 0.65,
);
copied to clipboard
Circular Progress Indicator + Gradient #


must be gradient.colors.length = 2

indeterminate
GradientCircularProgressIndicator(
gradient: Gradients.aliHussien,
);
copied to clipboard
determinate
GradientCircularProgressIndicator(
gradient: Gradients.aliHussien,
radius: 100,
);
copied to clipboard
Normal Button + Gradient #
GradientButton(
child: Text('Gradient'),
callback: () {},
gradient: Gradients.backToFuture,
shadowColor: Gradients.backToFuture.colors.last.withOpacity(0.25),
),

copied to clipboard
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),
),

copied to clipboard
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,),
),
copied to clipboard
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.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Customer Reviews

There are no reviews.