Tutorial

Flutter: How to Use Gradients and the GradientAppBar Plugin

Flutter

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

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:

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

Creative Commons License