Gradient in SliverAppBar (Flutter)?

Wrap a new Container Widget in FlexibleSpaceBar, then add BoxDecoration, LinearGradient under the container.

Unless I'm missing something, this should do what you're asking.

Before it's scrolled it looks like this:

And after scrolling like this:

import 'package:flutter/material.dart';void main() => runApp(GradientAppBar());class GradientAppBar extends StatefulWidget {  @override  _GradientAppBarState createState() => _GradientAppBarState();}class _GradientAppBarState extends State<GradientAppBar> {  @override  Widget build(BuildContext context) {    return MaterialApp(      home: Scaffold(        body: CustomScrollView(          slivers: <Widget>[            SliverAppBar(              pinned: true,              expandedHeight: 100,              flexibleSpace: Container(                decoration: BoxDecoration(                  gradient: LinearGradient(                    colors: [                      Colors.black,                      Colors.white,                    ],                  ),                ),              ),              title: Text("This app bar has a gradient!"),            ),            SliverList(              delegate: SliverChildListDelegate(                [                  Container(                    color: Colors.blue,                    height: 500,                  ),                  Divider(),                  Container(                    color: Colors.black12,                    height: 500,                  ),                  Divider(),                  Container(                    color: Colors.lightBlue,                    height: 500,                  ),                  Divider(),                  Container(                    color: Colors.lightGreen,                    height: 500,                  ),                  Divider(),                ],              ),            ),          ],        ),      ),    );  }}

show this from Flutter documention:

    CustomScrollView(  slivers: <Widget>[    const SliverAppBar(      pinned: true,      expandedHeight: 250.0,      flexibleSpace: FlexibleSpaceBar(        title: Text('Demo'),      ),    ),    SliverGrid(      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(        maxCrossAxisExtent: 200.0,        mainAxisSpacing: 10.0,        crossAxisSpacing: 10.0,        childAspectRatio: 4.0,      ),      delegate: SliverChildBuilderDelegate(        (BuildContext context, int index) {          return Container(            alignment: Alignment.center,            color: Colors.teal[100 * (index % 9)],            child: Text('grid item $index'),          );        },        childCount: 20,      ),    ),    SliverFixedExtentList(      itemExtent: 50.0,      delegate: SliverChildBuilderDelegate(        (BuildContext context, int index) {          return Container(            alignment: Alignment.center,            color: Colors.lightBlue[100 * (index % 9)],            child: Text('list item $index'),          );        },      ),    ),  ],)