How to customize the SliverAppBar widget in flutter?

Question

->

I would like to add some more information in the green area, but when the user scrolls up, I keep the _ SliverAppBar on the top..., like this:

Here is my current source code:

body: new CustomScrollView(slivers: <Widget>[
          const SliverAppBar(
            pinned: true,
            expandedHeight: 300.0, // TODO: check out later
            flexibleSpace: const FlexibleSpaceBar(
              title: const Text('_SliverAppBar')
            ),
          ),
          new SliverList(delegate: new SliverChildListDelegate(_galleryListItems()))
        ]),

Answer 1

    import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'My Flutter Pad'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

const kExpandedHeight = 300.0;

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              leading: Icon(Icons.menu),
              actions: <Widget>[
                new IconButton(
                  icon: new Icon(Icons.search),
                  highlightColor: Colors.white,
                  onPressed: () {},
                ),
              ],
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  background: Container(
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage("assets/images/bar.jpg"),
                            fit: BoxFit.cover)),
                    child: Column(
                      children: [
                        Expanded(
                          child: Align(
                            alignment: Alignment.bottomCenter,
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Text('NEW GAME'),
                                Text('Sekiro: Shadows Dies Twice'),
                                RaisedButton(
                                  onPressed: () {},
                                  child: Text('Play'),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  )),
            ),
          ];
        },
        body: Center(
          child: Text("Sample Text"),
        ),
      ),
    );
  }
}

Answer 2

The FlexibleSpaceBar has a background property the accepts any Widget

Use to build the information you need:

FlexibleSpaceBar(
  title: Text('_SliverAppBar'),
  background: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('Info'),
    ],
  ),
),

Here is a more complete example that adds a subtitle and hides it when the user scrolls.