Flutter CustomScrollView slivers stacking

Issue

I am trying to create a scrollView using CustomScrollView.
The effect that I need, is very similar to this one.

I need the SliverList to be stacked above the SliverAppbar, without the list taking the whole screen and hiding the SliverAppbar.
The reason I want to do this, is that i need to attach a persistent Positioned widget on top of that list, and it won’t appear unless the list is stacked above the SliverAppbar.

Here’s my code.

Solution

Step one:
Use ListView inside SliverAppBar widget. To make css overflow:hidden effect.

Step two:
Add controller to NestedScrollView and move the button on scrolling in a stack. Plus calculate where you want to stop button moving.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ScrollController scrollController;
  final double expandedHight = 150.0;

  @override
  void initState() {
    super.initState();
    scrollController = new ScrollController();
    scrollController.addListener(() => setState(() {}));
  }

  @override
  void dispose() {
    scrollController.dispose();
    super.dispose();
  }

  double get top {
    double res = expandedHight;
    if (scrollController.hasClients) {
      double offset = scrollController.offset;
      if (offset < (res - kToolbarHeight)) {
        res -= offset;
      } else {
        res = kToolbarHeight;
      }
    }
    return res;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Stack(
        children: [
          NestedScrollView(
            controller: scrollController,
            headerSliverBuilder: (context, value) {
              return [
                SliverAppBar(
                  pinned: true,
                  expandedHeight: expandedHight,
                  flexibleSpace: ListView(
                    physics: const NeverScrollableScrollPhysics(),
                    children: [
                      AppBar(
                        title: Text('AfroJack'),
                        elevation: 0.0,
                      ),
                      Container(
                        color: Colors.blue,
                        height: 100,
                        alignment: Alignment.center,
                        child: RaisedButton(
                          child: Text('folow'),
                          onPressed: () => print('folow pressed'),
                        ),
                      ),
                    ],
                  ),
                ),
              ];
            },
            body: ListView.builder(
              physics: const NeverScrollableScrollPhysics(),
              itemCount: 80,
              itemBuilder: (BuildContext context, int index) {
                return Text(
                  'text_string'.toUpperCase(),
                  style: TextStyle(
                    color: Colors.white,
                  ),
                );
              },
            ),
          ),
          Positioned(
            top: top,
            width: MediaQuery.of(context).size.width,
            child: Align(
              child: RaisedButton(
                onPressed: () => print('shuffle pressed'),
                child: Text('Suffle'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answered By – Kherel

Answer Checked By – David Marino (FlutterFixes Volunteer)