Gradient Backgrounds
on Friday, 24th of July, 2020
Time to make the app a little prettier by adding a gradient background.
Gradients are just as easy in Flutter as the are in CSS. And that's good since they're so hot right now.
To use gradients, you first need a Container widget, and within that you need to access its decoration property.
Start by building the decoration of the Container widget in your _MyHomePageState build method in main.dart.
// main.dart
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
backgroundColor: Colors.black87,
),
body: Container(
// Add box decoration
decoration: BoxDecoration(
// Box decoration takes a gradient
gradient: LinearGradient(
// Where the linear gradient begins and ends
begin: Alignment.topRight,
end: Alignment.bottomLeft,
// Add one stop for each color. Stops should increase from 0 to 1
stops: [0.1, 0.5, 0.7, 0.9],
colors: [
// Colors are easy thanks to Flutter's Colors class.
Colors.indigo[800],
Colors.indigo[700],
Colors.indigo[600],
Colors.indigo[400],
],
),
),
child: Center(
child: DogList(initialDoggos),
),
),
);
}Now, gradients:
- previous: Built-in Animation: Hero transition
- next: Build a custom widget