Adding a Gradient Background to Appbar on Flutter [closed]

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.