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?

Can you post the code showing your SliverAppBar usage? When I tested this out I had no issue getting it to show a gradient. — rmtmckenzie, Oct 23 '18 at 21:04
@rmtmckenzie how did you do it? Could you post the code? Have you any idea how to do it with the CupertinoSliverAppBar? — Benjamin, May 08 '19 at 15:51
@Benjamin I'll post the code for SliverAppBar, but CupertinoSliverAppBar sounds like a new question that should be asked. If you ask it and @ me in a comment I'll see if I can figure it out =) — rmtmckenzie, May 08 '19 at 18:13

score 22 · Accepted Answer · answered Jun 03 '19 at 07:29

22

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

answered Jun 03 '19 at 07:29

Yuan25

484
4
6

please add a code snippet instead of screenshot. – Hamed Jun 27 '23 at 14:01

score 2 · Answer 2 · answered May 08 '19 at 18:16

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

Suliman Farzat · Answer 3 · 2023-06-27T13:35:16.787

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

link broken and answer is not sufficient – Christian X Jun 02 '23 at 15:39 — Christian X, Jun 02 '23 at 15:39

Gradient in SliverAppBar (Flutter)?

3 Answers3

Linked