Flutter SliverAppBar 和 SliverList 有不同的滚动

Question

[Initial Postion][1]
[Scrolling from SliverList side][2]
[Scrolling from SliverAppBar side][3]


class ProductScreen extends StatelessWidget {
  static const routeName = "/product-screen";

  @override
  Widget build(BuildContext context) {
    final _subCategory = Provider.of<SubCategoryProvider>(
      context,
      listen: false,
    );

    final _mediaQuery = MediaQuery.of(context);

    return Scaffold(
      body: SafeArea(
        bottom: true,
        top: true,
        left: true,
        right: true,
        child: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                title: Text("${_subCategory.currentSubCategoryName()}"),
                background: Container(
                  margin: const EdgeInsets.only(
                    top: 4,
                    bottom: 50.0,
                  ),
                  child: Image.asset(
                    'asset/images/grocery.jpeg',
                  ),
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildListDelegate(
                [
                 Column(
                    children: <Widget>[
                      Container(
                        height: _mediaQuery.size.height - kToolbarHeight,
                        color: Color.fromARGB(0xff, 0xff, 0xcd, 0x3c),
                        child: ListView.builder(
                          physics: BouncingScrollPhysics(),
                          itemCount: _subCategory.differentProductCount(),
                          itemBuilder: (ctx, pdIndex) {
                            return Column(
                              children: <Widget>[
                                Container(
                                  height: 30.0,
                                  margin:
                                      const EdgeInsets.symmetric(vertical: 5.0),
                                  decoration: BoxDecoration(
                                    border: Border.all(
                                      width: 1.0,
                                      color: Colors.black,
                                    ),
                                    borderRadius: BorderRadius.circular(20.0),
                                  ),
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: <Widget>[
                                      Padding(
                                        padding:
                                            const EdgeInsets.only(left: 8.0),
                                        child: Text(
                                          "${_subCategory.currentProductName(pdIndex)}",
                                          style: TextStyle(
                                            fontSize: 18.0,
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                      ),
                                      Icon(Icons.arrow_drop_down, size: 30.0),
                                    ],
                                  ),
                                ),
                                Container(
                                    height: 270.0 *
                                        _subCategory
                                            .differentCompanyCount(pdIndex),
                                    child: ListView.builder(
                                      physics: ClampingScrollPhysics(),
                                      itemCount: _subCategory
                                          .differentCompanyCount(pdIndex),
                                      itemBuilder: (ctx, cyIndex) {
                                        return Column(
                                          children: <Widget>[
                                            Container(
                                                height: 250.0,
                                                margin: const EdgeInsets.only(
                                                    bottom: 20.0),
                                                color: cyIndex.isEven
                                                    ? Colors.green
                                                    : Colors.pink),
                                          ],
                                        );
                                      },
                                    )),
                              ],
                            );
                          },
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Sliver AppBar has its different scroll and SliverList has its own scroll.

If I try to scroll from sliver appbar then only both scrolls but if I scroll from the sliver list only sliver list scrolls and sliver appbar has its full expanded height.

I had tried settings physics to remove the inner scrolling but still, there are two different scrolling

Answer 1

The problem is you are creating a Listview.builder inside a SliverList, so it looks like a nested scroll, ignore the column and ListView.builder and just use SliverChildBuilderDelegate to create the items on demand

SliverList(
   delegate: SliverChildBuilderDelegate(
    (BuildContext context, int pdIndex) {
      return Column(
        children: [
          //... The children inside the column of ListView.builder
        ]
      );
    }
    childCount: _subCategory.differentProductCount(),
  ),
),

And for the color of the Container and Bouncing physics you could add those to the Scaffold backgroundColor and CustomScrollView physics respectively.

return Scaffold(
  backgroundColor: Color.fromARGB(0xff, 0xff, 0xcd, 0x3c),
  body: SafeArea( //bottom, top, left and right are true by default so no need to add them
    child: CustomScrollView(
      physics: BouncingScrollPhysics(),
      slivers: [
        ...
      ]
    )
  )
);