How To Add Gradients in Flutter

Gradients are a great way to add a colorful and eye-catching look to your Flutter app. Whether you’re looking for a linear gradient, horizontal gradient, or a vertical gradient, this guide will show you how to add gradients to your Flutter app.

What Are Gradients?

Gradients are a method of blending colors together to create a smooth transition between colors. Gradients can be used to add a pop of color and texture to your app, as well as making it visually appealing.

Setting Up Your Flutter Project

Before you can start adding gradients to your project, you’ll need to make sure your Flutter project is set up properly. To do this, open your project in Android Studio and select Tools > Flutter > Flutter Project Setup. This will create a main.dart file for your project, which is where you’ll add your gradients.

Linear Gradients in Flutter

Linear gradients are gradients that transition from one color to another in a linear fashion. This can be used to create a smooth transition between colors in your app. To add a linear gradient to your project, you’ll need to add the following code to your main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [Colors.red, Colors.blue],
            ),
          ),
        ),
      ),
    );
  }
}

The code above creates a linear gradient that transitions from red to blue. The begin and end parameters are used to specify the start and end points of the gradient, while the colors parameter is used to specify the colors of the gradient.

Horizontal Gradients in Flutter

Horizontal gradients are gradients that transition from one color to another in a horizontal fashion. This can be used to create a smooth transition between colors in your app. To add a horizontal gradient to your project, you’ll need to add the following code to your main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
              colors: [Colors.red, Colors.blue],
            ),
          ),
        ),
      ),
    );
  }
}

The code above creates a horizontal gradient that transitions from red to blue. The begin and end parameters are used to specify the start and end points of the gradient, while the colors parameter is used to specify the colors of the gradient.

Vertical Gradients in Flutter

Vertical gradients are gradients that transition from one color to another in a vertical fashion. This can be used to create a smooth transition between colors in your app. To add a vertical gradient to your project, you’ll need to add the following code to your main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Colors.red, Colors.blue],
            ),
          ),
        ),
      ),
    );
  }
}

The code above creates a vertical gradient that transitions from red to blue. The begin and end parameters are used to specify the start and end points of the gradient, while the colors parameter is used to specify the colors of the gradient.

More Gradient Examples with Code in Flutter

The above examples are just some of the basic gradients you can add to your Flutter project. Here are some more examples of gradients you can add to your project:

• Radial Gradient:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            gradient: RadialGradient(
              center: Alignment.center,
              radius: 0.5,
              colors: [Colors.red, Colors.blue],
            ),
          ),
        ),
      ),
    );
  }
}

• Sweep Gradient:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            gradient: SweepGradient(
              center: Alignment.center,
              startAngle: 0.0,
              endAngle: 360.0,
              colors: [Colors.red, Colors.blue],
            ),
          ),
        ),
      ),
    );
  }
}

Conclusion

Gradients are a great way to add a colorful and eye-catching look to your Flutter app. Whether you’re looking for a linear gradient, horizontal gradient, or a vertical gradient, this guide has shown you how to add gradients to your Flutter app. With the code examples provided, you should now be able to add gradients to your project with ease.