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 Tutorial This Flutter Tutorial is specifically designed for beginners and experienced professionals. It covers both the basics and advanced concepts of the Flutter framework.Flutter is Googleâs mobile SDK that builds native Android and iOS apps from a single codebase. It was developed in December 2017. When
7 min read
Top 50 Flutter Interview Questions and Answers for 2025 Flutter is an open-source, cross-platform application development framework. It was developed by Google in 2017. It is used to build applications for Android, iOS, Linux, Mac, Windows, and the web. Flutter uses the Dart programming language. It provides a simple, powerful, efficient, and easy-to-und
15+ min read
What is Widgets in Flutter? Flutter is Google's UI toolkit for crafting beautiful, natively compiled iOS and Android apps from a single code base. To build any application we start with widgets - The building block of Flutter applications. Widgets describe what their view should look like given their current configuration and
5 min read
Flutter | An introduction to the open source SDK by Google Flutter is Googleâs Mobile SDK to build native iOS and Android, Desktop (Windows, Linux, macOS), and Web apps from a single codebase. When building applications with Flutter, everything is Widgets â the blocks with which the flutter apps are built. They are structural elements that ship with a bunch
5 min read
Flutter - Architecture Application Flutter architecture application mainly consists of: WidgetsGesturesConcept of StateLayersWidgetsWidgets are the primary component of any flutter application. It acts as a UI for the user to interact with the application. Any flutter application is itself a widget that is made up of a combination of
3 min read
Flutter - Changing App Icon Flutter SDK is an open-source software development kit for building beautiful UI which is natively compiled. When we create a Flutter Project, it comes with the default Flutter icon. In order to get the app published in stores like Google Play Store, Apple App Store, etc the default icon can be chan
3 min read
Flutter - AppBar Widget 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
7 min read
Scaffold class in Flutter with Examples The Scaffold is a class in flutter that provides many widgets or we can say APIs. The Scaffold will expand or occupy the whole available space in device screen .The class Hierarchy is as follows:Object â³ Diagnosticable â³ Diagnosticable Tree â³ Widget â³ StateFul Widget â³ ScaffoldThe constructor of the
8 min read
Container class in Flutter Container class in flutter is a convenience widget that combines common painting, positioning, and sizing of widgets. A Container class can be used to store one or more widgets and position them on the screen according to our convenience. Basically, a container is like a box to store contents. A bas
8 min read
Flutter - Stateful vs Stateless Widgets The state of an app can very simply be defined as anything that exists in the memory of the app while the app is running. This includes all the widgets that maintain the UI of the app including the buttons, text fonts, icons, animations, etc. So now that we know what are these states let's dive dire
6 min read