Tutorial
Flutter: How to Use Gradients and the GradientAppBar Plugin
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:
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: