This tutorial is about how to use LinearGradient in Flutter.
There are some kinds of gradient in Flutter, one of which is LinearGradient. As the name suggests, it's used to create a linear gradient. It can be passed as argument for a property with type Gradient as it's the sub-class of Gradient class. In this tutorial, I am going to show you how to use LinearGradient including how to set colors, begin and end locations, stops for each fraction, and how to set the gradient behavior when it doesn't cover the whole area.
Using Constructor
Setting Colors
Let's start with the most basic example. To use LinearGradient, there is only one required property: colors. It's an array of Color. To make it a gradient, at least you need to provide two colors. The below example creates a gradient of red and green.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: LinearGradientApp(),
);
}
}
class LinearGradientApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter LinearGradient Tutorial by Woolha.com'),
),
body: Center(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.red,
Colors.green,
],
)
),
child: Center(
child: Text(
'LinearGradient Example',
style: TextStyle(
fontSize: 36.0,
fontWeight: FontWeight.bold,
color: Colors.white
),
),
),
)
)
);
}
}
Output:
Here's another example with three colors.
gradient: LinearGradient(
colors: [
Colors.red,
Colors.green,
Colors.blue,
],
)Output:
Setting begin and end
By default, the gradient begins at Alignment.centerLeft and ends at Alignment.centerRight. However, you can use begin and end properties to set where the gradient begins and ends.
Output:
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Colors.red,
Colors.green,
],
)
Setting Fraction Sizes Using stops
If you have gradients of two colors, there can be three fractions. The first fraction is filled with the first color only. The second fraction is filled with the gradient of the two colors. The last fraction is filed with the second color only. In Flutter's LinearGradient, only the second fraction is visible by default.
However, you can change the percentage of each fractions using stops property. It accepts array of doubles where the number of element must match the number of colors (not the number of fractions).
In Flutter's LinearGradient, 0 means the beginning of the first fracction while 1 means the end of the last fraction. If a value is less 0 or greater than 1, it will be treated as 0 and 1 respectively The values passed in stops are used to specify where each fraction should stop. For the last fraction, you don't need to specify the stop because it will occupy the left space not used by the previous fractions. Therefore, for two-color gradient, you only need two values in stops though there are three fractions.
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Colors.red,
Colors.green,
],
stops: [
0.5,
1,
]
)Output:
In the next example, we set both stops value to 0. That means the first (red only) and the second (gradient of red and green) don't have any area to be rendered. Therefore, the output only paints the third fraction which is green only.
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Colors.red,
Colors.green,
],
stops: [
0,
0,
]
)Output:
In constrast, if both stops values are set to 1, there can only be the area for the first fraction which is red only.
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Colors.red,
Colors.green,
],
stops: [
1,
1,
]
)Output:
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Colors.red,
Colors.green,
Colors.blue,
],
stops: [
0.2,
0.5,
1,
]
)Output:
Using TileMode
The use of tileMode is only visible if the begin and end do not cover the whole area. For example, the begin and end are set to (0.5, 0.5) and (0.7, 0.7) respectively.
The first example uses TileMode.clamp which is the default one if you don't pass tileMode option.
gradient: LinearGradient(
begin: new Alignment(0.5, 0.5),
end: new Alignment(0.7, 0.7),
colors: [
Colors.red,
Colors.green,
],
tileMode: TileMode.clamp,
)Output:
If you want the gradient to be repeated, use TileMode.repeated.
gradient: LinearGradient(
begin: new Alignment(0.5, 0.5),
end: new Alignment(0.7, 0.7),
colors: [
Colors.red,
Colors.green,
],
tileMode: TileMode.repeated,
)
To create mirror effect, use TileMode.mirror.
gradient: LinearGradient(
begin: new Alignment(0.5, 0.5),
end: new Alignment(0.7, 0.7),
colors: [
Colors.red,
Colors.green,
],
tileMode: TileMode.mirror,
)Output:
Using lerp
LinearGradient's static method lerp is used to linearly interpolate two instances. It has three parameters as follow:
static LinearGradient lerp(LinearGradient a, LinearGradient b, double The first two are the instances to be combined, while the last is the interpolation. If it's set to 0, only the first instance's style is used. If it's set to 1, only the second instance's style is used. Setting the value to 0.5 means both instances have the same effect.
LinearGradient lg1 = LinearGradient(
colors: [
Colors.red,
Colors.blue,
]
);
LinearGradient lg2 = LinearGradient(
colors: [
Colors.green,
Colors.yellow,
]
); gradient: LinearGradient.lerp(lg1, lg2, 0.5)Output:
LinearGradient Properties
Below are the available properties you can pass in the constructor.
List<Color> colors: The colors that compose the gradient.Alignment begin: Where the graident begins (offset 0.0)Alignment end: Where the gradient ends (offset 1.0).List<double> stops: Specifies the fraction for each color from begin (0.0) to end (1.0).TileMode tileMode: How this gradient should tile the plane beyond in the region before.GraidentTransform transform: The transform to be applied to the gradient
