A curated collection of awesome gradients made in Dart (port of https://webgradients.com for Flutter). Only linear gradients included for now.
Add the Package
dependencies:
flutter_gradients: ^1.0.0+2
import 'package:flutter_gradients/flutter_gradients.dart';
By default FlutterGradients
will generates the LinearGradient
.
GradientType type: GradientType.linear;
Container(
width: 150,
height: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: FlutterGradients.warmFlame(),
),
);
or
Container(
width: 150,
height: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: FlutterGradients.warmFlame(type: GradientType.linear),
),
);
You can customize the follows values :
radius
pixels from the center
. GradientType type: GradientType.radial;
Container(
width: 150,
height: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: FlutterGradients.warmFlame(
type: GradientType.radial,
center: Alignment.center,
radius: 0.5,
tileMode = TileMode.clamp,
),
),
);
You can customize the follows values :
radius
pixels from the center
. GradientType type: GradientType.sweep;
Container(
width: 150,
height: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: FlutterGradients.warmFlame(
type: GradientType.sweep,
center: Alignment.center,
startAngle: 0.0,
endAngle: math.pi * 2,
tileMode = TileMode.clamp,
),
),
);
1 | 2 | 3 |
---|---|---|
Web and command-line examples can be found in the example
folder.
In order to run the web examples, please follow these steps:
pub get
pub run build_runner serve example
In order to run the command line example, please follow these steps:
pub get
dart example/lib/main.dart
In order to run the flutter example, you must have Flutter installed. For installation instructions, view the online documentation.
cd
into the example/lib/
directoryflutter doctor
to ensure you have all Flutter dependencies working.flutter packages get
flutter run
Author: JonathanMonga
GitHub: https://github.com/JonathanMonga/flutter_gradients
#flutter #dart #programming