Combining Slivers, PageView and ListView in Flutter

Question

How would this be possible in Flutter?

I have a PageView widget and a ListView, but stuck on how to also implement Slivers with them. SliverAppBar seems like the right widget to try, but falls short in that it fails to act like a PageView widget in allowing swiping to select a new screen.

Any help would be greatly appreciated!

I've tried using a PageView widget in the top, and ListView widget in the bottom half of the screen. This has worked as intended, but I haven't been able to figure out how I can combine this with slivers for the 'pull over' effect of the ListView on top of the PageView.

Have you thought about the https://pub.dev/packages/sliding_up_panel? — Francesco - FL, Mar 23 '23 at 15:20
You can use SliverPersistanceHeader on sliverAppBar, flexibleSpace might be enough for your case — Md. Yeasin Sheikh, Mar 23 '23 at 15:53

score 0 · Answer 1 · answered Mar 24 '23 at 03:11

Use SliverAppBar and SliverList inside CustomScrollView slivers.

CustomScrollView(
    slivers: [
      SliverAppBar(
        floating: true,
        pinned: false,
        expandedHeight: 300,
        flexibleSpace: FlexibleSpaceBar(
          background: PageView.builder(
            itemCount: 5,
            itemBuilder: (context, index) => Container(
              width: MediaQuery.of(context).size.width,
              height: 300,
              color: Colors.green.withOpacity(index / 10),
              child: Center(child: Text('index $index')),
            ),
          ),
        ),
      ),
      SliverList(
          delegate: SliverChildListDelegate([
        ListView.builder(
          itemCount: 20,
          physics: const ClampingScrollPhysics(),
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          itemBuilder: (context, index) => ListTile(
            title: Text('index $index'),
          ),
        ),
      ])),
    ],
  )

Combining Slivers, PageView and ListView in Flutter

1 Answers1