How to archive Gradient effects in Flutter

How to archive Gradient effects in Flutter?

Posted on by Toma Velev

You could archive Gradient effects in Flutter – to create smooth transitions between multiple colors. The Gradient API is the programmatic approach to archive great UI. Designers often implement such – in elevated buttons, slider value pickers, loading indicators, screen backgrounds and even filters onto images. In many cases this is the best approach instead of using bitmap images – because it will bloat the app or even may be impossible for SVG. This is especially the case if the colors are dynamic. 

Linear Gradient Example 

Here is very minimal example code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Define a linear gradient
    final Gradient myGradient = LinearGradient(
      colors: [Colors.blue, Colors.green],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    );

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Gradient Example'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              // Use the defined gradient
              gradient: myGradient,
              // You can also add other decorations here if needed
              borderRadius: BorderRadius.circular(10),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.3),
                  blurRadius: 5,
                  offset: Offset(2, 2),
                ),
              ],
            ),
            child: Center(
              child: Text(
                'Hello, Gradient!',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
The result is:

Gradient Example

In this example:

  1. We define a LinearGradient named myGradient with a range of colors from blue to green.
  2. We use the Container widget to create a box with a specified width and height.
  3. The decoration property of the Container is set to use the myGradient as its gradient.
  4. Additional decorations like borderRadius and boxShadow are added for styling. The Contaienr widget is the most common – to archive a lot of effects like borders, sizes, shadows, gradients and more. 

Sweep Gradients in Flutter

Besides the Linear Gradient there are several more. One of them is Sweep gradient:

 SweepGradient(
      center: FractionalOffset.center,
      colors: [
        Color(0xFF4285F4), // blue
        Color(0xFF34A853), // green
        Color(0xFFFBBC05), // yellow
        Color(0xFFEA4335), // red
        Color(0xFF4285F4), // blue again to seamlessly transition to the start
      ],
      stops: [0.0, 0.25, 0.5, 0.75, 1.0],
    ),

Sweep Gradient

Radial Gradient

With Radial Gradient you could implement a Sun like effect onto your widgets. Here is the example:

 RadialGradient(
    center: Alignment(0.7, -0.6), // near the top right
    radius: 0.2,
    colors: [
      Color(0xFFFFFF00), // yellow sun
      Color(0xFF0099FF), // blue sky
    ],
    stops: [0.4, 1.0],
  )

Radial Gradient