Flutter - Widgets not scrolling in NestedScrollView - flutter

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.