How To Use Gradients in Flutter with BoxDecoration and GradientAppBar

Color gradients take a starting color and position and ending color and position. Then it performs a transition between the colors. With consideration for color theory, they can make an application more visually interesting than a plain design.

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, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(), ); } } class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Gradient Example'), ), body: Center( child: Container( decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topRight, end: Alignment.bottomLeft, colors: [ Colors.blue, Colors.red, Colors.green, Colors.yellow ], ) ), child: Center( child: Text( 'Hello Gradient!', style: TextStyle( fontSize: 48.0, fontWeight: FontWeight.bold, color: Colors.white, ), ), ), ), ), ); } }

Compile your code and have it run in an emulator: This creates a linear gradient that starts at 0.0 of the way down the screen with blue then red then green and last yellow.