Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bluemix/gradient-widgets
Flutter widgets wrapped with gradients
https://github.com/bluemix/gradient-widgets
button card fab flutter gradient gradient-widgets progress shadowcolor text widget
Last synced: 29 days ago
JSON representation
Flutter widgets wrapped with gradients
- Host: GitHub
- URL: https://github.com/bluemix/gradient-widgets
- Owner: bluemix
- License: apache-2.0
- Created: 2018-10-25T13:09:17.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-07-12T16:00:12.000Z (5 months ago)
- Last Synced: 2024-10-30T02:59:31.973Z (about 1 month ago)
- Topics: button, card, fab, flutter, gradient, gradient-widgets, progress, shadowcolor, text, widget
- Language: Dart
- Size: 3.19 MB
- Stars: 349
- Watchers: 10
- Forks: 49
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-gradient - gradient-widgets - Flutter widgets wrapped with gradients (Dart)
README
[](https://pub.dartlang.org/packages/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](https://github.com/bluemix/Gradient-Screens) to get the idea 😉)
☑️ GradientText
☑️ GradientCard
☑️ GradientButton
☑️ CircularGradientButton + Shadow Color
☑️ GradientProgressIndicator
☑️ CircularGradientProgressIndicator
◻️ GradientAppBar
## Installation
In your `pubspec.yaml` root add:
```yaml
dependencies:
gradient_widgets: ^0.6.0
```
then,
```dart
import 'package:gradient_widgets/gradient_widgets.dart';
```
## Usage
### Card + Gradient
```dart
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
```dart
GradientProgressIndicator(gradient: Gradients.rainbowBlue,);
```
determinate
```dart
GradientProgressIndicator(
gradient: Gradients.rainbowBlue,
value: 0.65,
);
```
### Circular Progress Indicator + Gradient
> must be gradient.colors.length = 2
indeterminate
```dart
GradientCircularProgressIndicator(
gradient: Gradients.aliHussien,
);
```
determinate
```dart
GradientCircularProgressIndicator(
gradient: Gradients.aliHussien,
radius: 100,
);
```
### Normal Button + Gradient
```dart
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
```dart
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
```dart
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](https://flutter.io/).
For help on editing package code, view the [documentation](https://flutter.io/developing-packages/).