How to Use Gradients and the GradientAppBar In Flutter

Share This Post

we are Always Trying to Find New Things inn Flutter And 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

Copy

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),
          ),
        ),
      )));
  }
}

Copy

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:

How to Use Gradients and the GradientAppBar

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
  ])),

Copy

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

How to Use Gradients and the GradientAppBar

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

Copy

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

import 'package:gradient_app_bar/gradient_app_bar.dart';

Copy

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

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

Copy

Tada! Our appBar now has a gradient:

How to Use Gradients and the GradientAppBar

So Do You Like Our Artcle About How to Use Gradients and the GradientAppBar In Flutter?. Please Share With Your colleagues.

Leave a Reply

Your email address will not be published. Required fields are marked *

close