Flutter: How to Use Gradients and the GradientAppBar Plugin

Paul Halliday

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

Video Version 📺

Here’s a short video where I go over what’s in this very post:

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:

Flutter gradient

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:

Flutter gradient with stops

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:

Gradient app bar

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#