Flutter Gradient Generator

Create beautiful gradients for your Flutter and Android applications. Customize colors, directions, and more.

Customize Gradient

Gradient Type

Linear Radial Sweep

Direction

Begin and End Alignment

Begin

End

Color Stops

Tile Mode

Preview

Flutter Code

Android XML Code

About Flutter Gradients

Flutter provides several types of gradients that you can use to create beautiful color transitions in your applications:

Linear Gradients

Linear gradients transition colors along a line defined by begin and end points.

LinearGradient(
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                            colors: [Colors.blue, Colors.red],
                            )

Radial Gradients

Radial gradients transition colors from a central point outward in a circular shape.

RadialGradient(
                            center: Alignment.center,
                            radius: 0.5,
                            colors: [Colors.blue, Colors.red],
                            )

Sweep Gradients

Sweep gradients (also known as conic gradients) transition colors around a center point.

SweepGradient(
                            center: Alignment.center,
                            startAngle: 0.0,
                            endAngle: 2 * pi,
                            colors: [Colors.blue, Colors.red],
                            )

Using Gradients in Flutter

You can use gradients with various widgets by applying them to a BoxDecoration:

Container(
                            decoration: BoxDecoration(
                            gradient: LinearGradient(
                            colors: [Colors.blue, Colors.red],
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                            ),
                            ),
                            child: YourWidget(),
                            )