Flutter - Widgets not scrolling in NestedScrollView

Question

I am trying to make a page that contains a SliverAppBar , some Widgets with texts, and a List .

I used a NestedScrollView that contains the Sliver header, and a Column , that itself contains the widgets with texts and the list.

Here is the build function:

@override Widget build(BuildContext context) {

var _bar = widget.bar ;

_screenWidth = MediaQuery.of(context).size.width ;

return Scaffold(
  body: NestedScrollView(
    headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
      return <Widget>[
        SliverAppBar(
          expandedHeight: 200.0,
          floating: false,
          pinned: true,
          flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text(_bar.name,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16.0,
                  )),
              background: Image.network(
                "https://s1.qwant.com/thumbr/0x380/1/2/2a39f1f558f2cbbec11a08e43493bde861d612add6be643dbc5ad6fe0b16fc/BDBE5B56-B1B4-586D-27C8A70A4A54E50A.jpg?u=https%3A%2F%2Fimages.bwwstatic.com%2Fcolumnpic6%2FBDBE5B56-B1B4-586D-27C8A70A4A54E50A.jpg&q=0&b=1&p=0&a=1",
                fit: BoxFit.cover,
              )),
        ),
      ];
    },
    body: _offer(_bar),
  ),
);
}

The _offer function is the main issue, here is it:

Widget _offer(Bar bar) {
return Column(
  children: <Widget>[
    Row(
      children: <Widget>[
        Container(
          width: _screenWidth / 4,
          decoration: BoxDecoration(
              shape: BoxShape.circle,
              image: DecorationImage(
                  fit: BoxFit.fill,
                  image: Image.network("https://s1.qwant.com/thumbr/0x380/3/9/60c4de7be57ee1b7d24d07dde941c3027588bc313699cba9ef9ef8fb6c7fda/1280px-Hard_Rock_Cafe_Logo.svg.png?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F2%2F2c%2FHard_Rock_Cafe_Logo.svg%2F1280px-Hard_Rock_Cafe_Logo.svg.png&q=0&b=1&p=0&a=1").image
              )
          ),
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              bar.name.toUpperCase(),
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            Text(
              "Bar category" + " - " + "Bar address",
              style: TextStyle(
                  fontWeight: FontWeight.bold
              ),
            ),
            Text(
              "Opening hours" + " - " + "01.12.12.12.12",
              style: TextStyle(
                  fontWeight: FontWeight.bold
              ),
            ),
            Text(
              "Happy Hour de 20h a 23h",
              style: TextStyle(
                color: Colors.deepOrange,
                fontWeight: FontWeight.bold,
              ),
            )
          ],
        ),
      ],
    ),
    Image.asset("assets/favorites.png"),
    Padding(padding: EdgeInsets.all(20),),
    Center(
      child: Text(
        "Menu".toUpperCase(),
        style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 25
        ),
      ),
    ),
    Padding(padding: EdgeInsets.all(20)),
    Flexible(
      fit: FlexFit.loose,
      child: CustomScrollView(
        slivers: <Widget>[
          SliverList(
            delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
                return productItem(context, _productsList[index]);
              },
              childCount: _productsList.length,
            ),
          ),
        ],
      ),
    )
  ],
);
}

Here is the result:

Link to the gif: https://ibb.co/x8j6vvm

(if someone know how to integrate gif in a question, feel free to edit it !)

I want the data from second "TestName1" to the heart image to completely scroll with the rest of the page. How can I achieve this?

Answer 1

Using a CustomScrollView removes the problem of adding a NestedScrollView . You can add the SilverAppBar to the CustomScrollView to implement this.

CustomScrollView(
 slivers: <Widget>[
  SliverAppBar(
      expandedHeight: 200.0,
      floating: false,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
          centerTitle: true,
          title: Text(_bar.name,
              style: TextStyle(
                color: Colors.white,
                fontSize: 16.0,
              )),
          background: Image.network(
            "https://s1.qwant.com/thumbr/0x380/1/2/2a39f1f558f2cbbec11a08e43493bde861d612add6be643dbc5ad6fe0b16fc/BDBE5B56-B1B4-586D-27C8A70A4A54E50A.jpg?u=https%3A%2F%2Fimages.bwwstatic.com%2Fcolumnpic6%2FBDBE5B56-B1B4-586D-27C8A70A4A54E50A.jpg&q=0&b=1&p=0&a=1",
            fit: BoxFit.cover,
          )),
    ),
  SliverFixedExtentList(
    itemExtent: 150.0,
    delegate: SliverChildListDelegate(
      [
       // Your Can Add you body items here.
      ],
    ),
   ),
 ],
),

Hope this helps.