We recently looked at how to create our first Flutter app. Next up, we’re going to investigate how we can add a gradient background, because they’re so cool!

To ensure we’re all playing the same game - go ahead and create a Flutter application by running the following:

$ flutter create flutter_gradient
$ cd flutter_gradient
$ code .

# run this on an iOS/Android simulator

Gradients

We can now add a gradient to our HomePage like so:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter'),
      ),
      body: Center(
          child: Container(
        decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              colors: [Colors.blue, Colors.red])),
        child: Center(
          child: Text(
            'Hello Gradient!',
            style: TextStyle(
              fontSize: 48.0,
              fontWeight: FontWeight.bold,
              color: Colors.white),
          ),
        ),
      )));
  }
}

The key to this is the addition of a decoration and boxDecoration to our Container widget. This allows us to define a LinearGradient which can be given colors, as well as a begin and end Alignment.

decoration: BoxDecoration(
  gradient: LinearGradient(
    begin: Alignment.topRight,
    end: Alignment.bottomLeft,
    colors: [Colors.blue, Colors.red])),

This gives us the following:

Awesome! Kind of reminds me of the frozen Slushies I used to get as a kid… :)

Stops

What if we had multiple colors, and wanted to control how much they take up of the gradient? We can do that with stops:

decoration: BoxDecoration(
  gradient: LinearGradient(
    begin: Alignment.topRight,
    end: Alignment.bottomLeft,
    stops: [
      0.1,
      0.4,
      0.6,
      0.9
    ],
  colors: [
    Colors.yellow,
    Colors.red,
    Colors.indigo,
    Colors.teal
  ])),

This then allows us to fraction our gradient into precise chunks. Here’s our (not so pretty) result:

Gradient App Bar

What if we could extend this gradient to our appBar? I mean, we can’t do it straight out the box, but there’s a plugin for that!

Under the dependencies block, add the following to your pubspec.yaml file:

dependencies:
  gradient_app_bar: ^0.0.1
  flutter:
    sdk: flutter

We can then import the gradient_app_bar package inside of main.dart:

import 'package:gradient_app_bar/gradient_app_bar.dart';

Finally, we can replace our AppBar with the GradientAppBar and subsequent colors:

appBar: GradientAppBar(
    title: Text('Flutter'),
    backgroundColorStart: Colors.cyan,
    backgroundColorEnd: Colors.indigo,
  ),

Tada! Our appBar now has a gradient: