Gradients Background

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.

  1. // main.dart
  3. @override
  4. Widget build(BuildContext context) {
  5.   return Scaffold(
  6.     appBar: AppBar(
  7.       title: Text(widget.title),
  8.       backgroundColor: Colors.black87,
  9.     ),
  10.     body: Container(
  11.       // Add box decoration
  12.       decoration: BoxDecoration(
  13.         // Box decoration takes a gradient
  14.         gradient: LinearGradient(
  15.           // Where the linear gradient begins and ends
  16.           begin: Alignment.topRight,
  17.           end: Alignment.bottomLeft,
  18.           // Add one stop for each color. Stops should increase from 0 to 1
  19.           stops: [0.1, 0.5, 0.7, 0.9],
  20.           colors: [
  21.             // Colors are easy thanks to Flutter's Colors class.
  22.             Colors.indigo[800],
  23.             Colors.indigo[700],
  24.             Colors.indigo[600],
  25.             Colors.indigo[400],
  26.           ],
  27.         ),
  28.       ),
  29.       child: Center(
  30.         child: DogList(initialDoggos),
  31.       ),
  32.     ),
  33.   );
  34. }

Now, gradients:

gradient screen shot