Gradient in SliverAppBar (Flutter)?

Question

Has anyone used Gradient in SliverAppBar? I can do it in FlexibleSpace when it's expanded, but when it's collapsed it gets a solid color. Is it possible to treat this?

Answer 1

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

Answer 2

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(),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}