Adding A Gradient Background To Appbar On Flutter

Answer :

I don't believe you can pass a gradient to an AppBar as it expects a Color rather than a gradient.

You can, however, create your own widget that mimics an AppBar except by using a gradient. Take a look at this example that I've pieced together from the Planets-Flutter tutorial along with the code below it.

import "package:flutter/material.dart";  class Page extends StatelessWidget {   @override   Widget build(BuildContext context) {     return Column(children : <Widget>[GradientAppBar("Custom Gradient App Bar"), Container()],);   } }   class GradientAppBar extends StatelessWidget {    final String title;   final double barHeight = 50.0;    GradientAppBar(this.title);    @override   Widget build(BuildContext context) {     final double statusbarHeight = MediaQuery         .of(context)         .padding         .top;      return new Container(       padding: EdgeInsets.only(top: statusbarHeight),       height: statusbarHeight + barHeight,       child: Center(         child: Text(           title,           style: TextStyle(fontSize: 20.0, color: Colors.white, fontWeight: FontWeight.bold),         ),       ),       decoration: BoxDecoration(         gradient: LinearGradient(             colors: [Colors.red, Colors.blue],             begin: const FractionalOffset(0.0, 0.0),             end: const FractionalOffset(0.5, 0.0),             stops: [0.0, 1.0],             tileMode: TileMode.clamp         ),       ),     );   } } 

Hope this helps. Let me know if you have any questions.

AppBar does not have that feature by default. But you can make an AppBar like widget which will have a gradient background as follow:

  Widget build(BuildContext context) {     return new Scaffold(       appBar: new PreferredSize(         child: new Container(           padding: new EdgeInsets.only(             top: MediaQuery.of(context).padding.top           ),           child: new Padding(             padding: const EdgeInsets.only(               left: 30.0,               top: 20.0,               bottom: 20.0             ),             child: new Text(               'Arnold Parge',               style: new TextStyle(                 fontSize: 20.0,                 fontWeight: FontWeight.w500,                 color: Colors.white               ),             ),           ),           decoration: new BoxDecoration(             gradient: new LinearGradient(               colors: [                 Colors.red,                 Colors.yellow               ]             ),             boxShadow: [               new BoxShadow(                 color: Colors.grey[500],                 blurRadius: 20.0,                 spreadRadius: 1.0,               )             ]           ),         ),         preferredSize: new Size(           MediaQuery.of(context).size.width,           150.0         ),       ),       body: new Center(         child: new Text('Hello'),       ),     );   } 

Here boxShadow will give elevated feel.