flutter - cool scroll to remove the top and appears title/navigation tab

Question

https://www.facebook.com/christianadrian.domantay/videos/10213737691517013/

There is this video of a flutter app I saw on facebook.

May I ask how this is done where by:

• scrolls up and removes the top part
• and then tab navigation appears on top
• and then title appears on top
• still able to scroll the list

I'd like to get answers on techniques used, and possibly examples. I'ved seen some examples but I want to register them here. as this would be good for dashboard based implementation.

Answer 1

You need CustomScrollView, SliverAppBar. Inside SliverAppBar you need to have flexible space widget. Go to DART PAD and paste the below code to see how it works. Here's and example for you :

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        physics: const BouncingScrollPhysics(),
        slivers: <Widget>[
          SliverAppBar(
            stretch: true,
            pinned: true,
            onStretchTrigger: () {
              // Function callback for stretch
              return;
            },
            expandedHeight: 300.0,
            flexibleSpace: FlexibleSpaceBar(
              stretchModes: <StretchMode>[
                StretchMode.zoomBackground,
                StretchMode.blurBackground,
                StretchMode.fadeTitle,
              ],
              centerTitle: true,
              title: const Text('Flight Report'),
              background: Stack(
                fit: StackFit.expand,
                children: [
                  Image.network(
                    'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
                    fit: BoxFit.cover,
                  ),
                  const DecoratedBox(
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment(0.0, 0.5),
                        end: Alignment(0.0, 0.0),
                        colors: <Color>[
                          Color(0x60000000),
                          Color(0x00000000),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate((c, i){
                return ListTile(title: Text("$i"));
            },childCount: 10),
          ),
        ],
      ),
    );
  }
}