Gradients are considered to be eye-catching elements in UI/UX and graphic design. Having gradient elements in your apps can really elate your app in terms of user experience and feel.
In this tutorial, we will be looking at how we can implement gradients in flutter.
Flutter offers 3 types of gradients:
- Linear Gradient
- Radial Gradient
- Sweep Gradient
Note: In order to implement any type of gradient we need to make use of Box Decoration. The Box Decoration constructor can be assigned to the decoration property of Containers.
Box decoration Constructor:
const BoxDecoration(
{
Color? color,
DecorationImage? image,
BoxBorder? border,
BorderRadiusGeometry? borderRadius,
List<BoxShadow>? boxShadow,
Gradient? gradient,
BlendMode? backgroundBlendMode,
BoxShape shape = BoxShape.rectangle}
)
To add gradients to our widget we will be using the gradient property of the BoxDecoration constructor. The gradient property accepts three constructors Linear Gradient, Radial Gradient & Sweep Gradient.
Out of all the three, Linear and Radial are the most preferred, Sweep offers more control though.Â
Let’s start off with Linear Gradient. Let’s start by looking at the Linear Gradient constructor:
LinearGradient (
{
AlignmentGeometry begin = Alignment.centerLeft,
AlignmentGeometry end = Alignment.centerRight,
required List<Color> colors,
List<double>? stops,
TileMode tileMode = TileMode.clamp,
GradientTransform? Transform
}
)
From the constructor, it is clear that the argument colors are required. By default, the values of begin & end properties are set to centerLeft & centerRight respectively.
The begin & end parameters define the path of our Linear gradient. Begin refers to where the path starts and the end refers to where it ends.
The begin and end parameters accept the following values:
- centerLeft
- center
- ceterRight
- topLeft
- topCenter
- topRight
- bottomLeft
- bottomCenter
- bottomRight
You can also use the Alignment(x, y) value. Here the x value represents the offset on the X-axis and the y value represents the offset on the Y-axis. You will get a clear understanding by looking at the below image which shows all the possible alignments in flutter with respect to the gradients.
(x, y):

The stops parameter:
The stops list is not a required widget. The stops list specifies the fractions of the vector from start to end. The stops parameter takes a List of values between 0.0 and 1.0 for each color. If the stops parameter is not mentioned/null then a uniform distribution is applied.
Let’s make a container with a Linear gradient.
Dart
child: Container(
height: MediaQuery.of(context).size.height * 0.7,
width: MediaQuery.of(context).size.width * 0.9,
// Below is the code for Linear Gradient.
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [Colors.purple, Colors.blue],
begin: Alignment.bottomLeft,
end: Alignment.topRight,
),
),
)
Â
 From the above example, we have seen how to add a gradient to a container.
In the above example, we set the path of the gradient from bottomLeft to topRight and set only 2 colors, whereas you can add any number of colors to the list. The best practice is to add not more than 3 colors.Â
The reason for not adding more colors is that with too many colors the gradient becomes sharp. There won’t be a smooth transition of the colors and looks clumsy.
This is how you implement a Linear gradient in flutter. Though we haven’t used the properties like stops, tileMode & transform, our gradient still looks better that is the beauty of flutter.Â

Linear Gradient
Â
You will be now be seeing what exactly does stops and tileMode do.
Dart
child: Container(
height: MediaQuery.of(context).size.height * 0.7,
width: MediaQuery.of(context).size.width * 0.9,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: const LinearGradient(
colors: [Colors.purple, Colors.blueAccent],
begin: Alignment.bottomLeft,
end: Alignment.topRight,
stops: [0.4, 0.7],
tileMode: TileMode.repeated,
),
),
)
Â
Â
The above code looks like this:

Linear Gradient with stops and tile mode
 This is all about linear gradients.
Now let’s move to Radial Gradient:
As learned, the RadialGradient class is also used by BoxDecoration. A radial gradient is similar to linear-gradient but as the name suggests the gradient is Radial (circular). Â It displays a gradient in concentric circles. Hence, a radial gradient has a center and radius. The center point has a value of 0.0 and the radius ranges from 0.0 to 1.0 units. These lengths are processed as fractions which allows us to use the same code for any box shape with minimal changes or at large no changes.
Let’s take a look at the constructor for Radial Gradient.Â
RadialGradient({
AlignmentGeometry center = Alignment.center,
double radius = 0.5,
required List<Color> colors,
List<double>? stops,
TileMode tileMode = TileMode.clamp,
AlignmentGeometry? focal,
double focalRadius = 0.0,
GradientTransform? transform
})
From the constructor, it is clear that the colors property is a required one and by default, the alignment is set to center, and the radius is set to 0.5 (pixels).
Let’s make a container with Radial Gradient:Â
Dart
child: Container(
height: MediaQuery.of(context).size.height * 0.7,
width: MediaQuery.of(context).size.width * 0.9,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: const RadialGradient(
colors: [Colors.red, Colors.yellow],
radius: 0.75,
),
),
),
Â
The above looks like this:

Radial Gradient
The stops and tileMode have the same applications as we have discussed in Liner Gradients. Adding stops will give the ability to control the path of the gradient very precisely and let you have the desired shape.
By default, if we don’t mention the alignment it is set to center. we can also alter the alignment in the following way:Â
Dart
child: Container(
height: MediaQuery.of(context).size.height * 0.7,
width: MediaQuery.of(context).size.width * 0.9,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: const RadialGradient(
colors: [Colors.red, Colors.yellow],
radius: 0.75,
focal: Alignment(0.7, -0.7),
tileMode: TileMode.clamp,
),
),
),
Â
 The above code looks like this:
Â

Radial Gradient with stops and tileMode
This is about Radial Gradients in Flutter.
Let’s move to Sweep Gradients. As the name suggests the Sweep Gradient displays a gradient in a sweeping arc around a center point.
Let’s have a look at the constructor of SweepGradient:
SweepGradient(
{
AlignmentGeometry center = Alignment.center,
double startAngle = 0.0,
double endAngle = math.pi * 2,
required List<Color> colors,
List<double>? stops,
TileMode tileMode = TileMode.clamp,
GradientTransform? transform}
)
It is clear that the argument colors are required, and the colors argument must not be null if a stops argument is provided. By default, the alignment, startAngle, and the endAngle are set to center, Â 0.0 and 2*pi respectively.Â
As we have seen in Linear Gradient and Radial Gradient, stops values range from 0.0 to 1.0. In the case of Sweep Gradient, the gradient follows an arc so we deal with angles here. The startAngle refers to the point at which the stop 0.0 of the gradient is placed and similarly the endAngle refers to the point at which the stop 1.0 of the gradient is placed. The start and end angles are measured in radians. Note: If the stops list is null, then a uniform distribution is assumed.
Let’s see how to make a SweepGradient:Â
Dart
child: Container (
height: MediaQuery.of(context).size.height * 0.7,
width: MediaQuery.of(context).size.width * 0.9,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: const SweepGradient(
colors: [
Colors.red,
Colors.yellow,
Colors.blue,
Colors.green,
Colors.red,
],
stops: <double>[0.0, 0.25, 0.5, 0.75, 1.0],
tileMode: TileMode.clamp,
),
),
Â
The above code would look like this:Â

Sweep Gradient without start and end angles.
In the above piece of code, we can see how easy it is to create a SweepGradient in flutter with a minimum no. of lines of code. In the above code, we did not mention the startAngle and endAngle properties because the default values 0.0 and t 2Ï€ are what exactly we wanted. If you wish to change the angle you can do it as you wish. To use Ï€ constant, simply import the math library into your working file and use the constant needed. Follow the below steps.Â
import 'dart:math' as math;
To use the required math element in your project. For now Ï€:Â
void main() {
print(math.pi * 4);
}
With custom start and stop angles the gradient would look like:Â
Dart
child: Container(
height: MediaQuery.of(context).size.height * 0.7,
width: MediaQuery.of(context).size.width * 0.9,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: const SweepGradient(
startAngle: math.pi * 0.2,
endAngle: math.pi * 1.7,
colors: [
Colors.red,
Colors.yellow,
Colors.blue,
Colors.green,
Colors.red,
],
stops: <double>[0.0, 0.25, 0.5, 0.75, 1.0],
tileMode: TileMode.clamp,
),
),
),
The above code would look like this:Â

Sweep Gradient with custom start and stop angles.
This is how you work out with gradient in flutter. Gradients can be applied to the whole screen of your app. To apply the gradient to the whole screen just assign a Container widget to your body parameter, give the width and height of the container as double.infinity and double.infinity respectively this way you can a gradient to the whole of your app.
Â
Similar Reads
Flutter - Gradient AppBar
AppBar is usually the topmost component of the app (or sometimes the bottom-most), it contains the toolbar and some other common action buttons. As all the components in a flutter application are a widget or a combination of widgets. So AppBar is also a built-in class or widget in flutter which give
5 min read
Multi Page Applications in Flutter
Apps are widely used by humans in this techie world. The number of apps in the app store is increasing day by day. Due to this competition, app developers have started to add a number of features to their apps. To reduce this complexity, the content of the app is mostly divided into various pages so
5 min read
Flutter - Gradient Button
Buttons are the building block of any Android Application, Buttons are helping in to perform specific tasks like Navigating from one screen to another screen, Showing the Toast, Sign-in, Sign-up buttons, and many more. But giving the effects of the colors to the Button makes the Button more pretty.
3 min read
Expense Tracker Application Flutter
In this tutorial, we will create a Flutter app that allows users to track their daily expenses and income, visualize spending patterns through charts, and store transaction data locally using Hive. This application will showcase how to handle user input, visualize data, and ensure local data persist
10 min read
Rive animations in Flutter
Rive is a very useful animation tool that can create beautiful animations and we can add these in our Application. In flutter, we can add animations by writing so many lines of code but this is not a good practice for a developer. Instead of writing lines of code to create animation, we can create o
2 min read
Flutter - Custom Gradient Switch
If you are using Flutter you must hear that it is very easy to make UI in this. All widgets are easy to use. So now let's make one common widget that you must have seen in almost every app i.e. Switch. Now you will say it is very easy to make from the switch widget. But we will make it a Gradient Sw
5 min read
Flutter - Page Transition Animation
In Flutter, we can easily animate or handle the page transitions by using the page_transition package. The page_transition package is a valuable addition to the Flutter package, offering a variety of transition effects that can elevate the app's UI. In this article, we are going to explore how to in
6 min read
Flutter - Working with Animations
Whenever building an app animation plays a vital role in designing the experience of the user. People tend to like an app that has a smooth flow and a slick design. The Flutter Package provides a variety of methods to create and use animation in our app. We will be discussing the inbuilt Flutter wid
9 min read
Flutter - Application Device Preview
Flutter got an amazing package called device_preview. Previewing how your app looks or works on different devices is an important part of development. But is a hectic process to try to test on different emulators but still as an individual developer it will be not an easy task for you but also time-
2 min read
Flutter - Loading Animation Widget
In every mobile application, there is a loading animation with different colors and styles, basically, we use the loading animation when we are waiting for something. Like if we are fetching the data from the database then we have to wait for some time until the data is not fetched. So in this durat
3 min read