How to use BoxDecoration Gradients in Flutter?

I love how flat design get in design world but gradients look fancy and are must-have. Gradient usage in mobile app design is popular. Flutter makes it easy to paint gradient decoration in to your mobile app even animating a gradient is so easy. Lets dive in to code.

There are two gradient class in flutter, one is shader for Paint class. I have written a post about CustomPaint class.

Custom Paint in Flutter with some curves

Other one is a gradient class to use in decoration classes. We can decorate our container widgets with this gradient class.

import 'package:flutter/material.dart';
class GradientPractice extends StatefulWidget {
  _GradientPractice createState() => _GradientPractice();
}

class _GradientPractice extends State<GradientPractice>{
  List<Color> _colors = [Colors.deepOrange, Colors.yellow];
  List<double> _stops = [0.0, 0.7];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(
        child: Container(
          height: 200,
          width: 200,
          decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: _colors,
                stops: _stops,
              )
          ),
        ),
      ),
    );
  }
}

Above code paints our containers backgrounds with a orange to yellow linear gradient. we just provided colors and steps which decide where to stop a color and start to paint with next one. Two more gradient we have SweepGradient and RadialGradient. Below image shows all these gradients. Check this gist for code.

Below code combine linear gradient with a tween and creates an animated decoration.

import 'package:flutter/material.dart';
import 'package:flutter/animation.dart';

class GradientPractice extends StatefulWidget {
  _GradientPractice createState() => _GradientPractice();
}

class _GradientPractice extends State<GradientPractice>
    with SingleTickerProviderStateMixin {

  List<Color> _colors = List<Color>.generate(8, (index)=>index.isOdd?Colors.deepOrange:Colors.yellow);
  List<double> _stops = List<double>.generate(8, (index) => index * 0.2 - 0.4);

  Animation<double> animation;
  AnimationController controller;

  @override
  void initState() {
    super.initState();

    controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 300));
    
    animation = Tween<double>(begin: .0, end: .4).animate(controller)
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          controller.reset();
          controller.forward();

        } else if (status == AnimationStatus.dismissed) {
          controller.forward();
        }
      });
     controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(
        child: Container(
          height: 200,
          width: 200,
          decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: _colors,
                stops: _stops.map((s) => s + animation.value).toList(),
              )
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
  }
}

We add some negative stop values to make it look infinitive.

And the dizzy result is;

If you want to know more about tweens in flutter check below link out.

Tween Animations in Flutter