Flutter Scroll entire screen including gridview - flutter

Question

I made an application called food gallery which just shows some random foods. So first I wanted a main image at the top, so I used a container to display it at the top. Then I implemented a grid view under the container to show the gridview images of food. But the issue is whenever I scroll the page, only the gridview is getting scrolled and the container is like pinned and not scrolling. Following is the code.
body: SafeArea(
// Container
child: Container(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image:AssetImage('assets/burger.jpeg'),
fit: BoxFit.cover
)
)
),
),
//GridView
Expanded(
child: GridView.builder(
itemCount: name.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemBuilder: (BuildContext context, int index){
return Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image:DecorationImage(
image: AssetImage('assets/${img[index]}'),
fit: BoxFit.cover
)
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
width: double.infinity,
height: 50.0,
color: Colors.grey[800].withOpacity(0.5),
child:Center(child: Text('${name[index]}',style: TextStyle(color: Colors.white,fontSize: 20.0)),)
),
],
),
),
);
})
),
],
),
),
),
),
);
}
}
This is how it looks
As you can see the container is pinned at the top. I want the entire screen to scroll not only the gridview. I tried using SingleChildScrollView and it's not working.

Answer 1

Change your column with a ListView, remove the Expanded and add these to lines to your GridView :
physics: ScrollPhysics(), // to disable GridView's scrolling
shrinkWrap: true,
So your code would be like:
SafeArea(
child: Container(
child: ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image:AssetImage('assets/burger.jpeg'),
fit: BoxFit.cover
)
)
),
),
//GridView
GridView.builder(
shrinkWrap: true,
physics: ScrollPhysics(),
itemCount: name.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemBuilder: (BuildContext context, int index){
return Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image:DecorationImage(
image: AssetImage('assets/${img[index]}'),
fit: BoxFit.cover
)
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
width: double.infinity,
height: 50.0,
color: Colors.grey[800].withOpacity(0.5),
child:Center(child: Text('${name[index]}',style: TextStyle(color: Colors.white,fontSize: 20.0)),)
),
],
),
),
);
}),
],
),
),
);

Answer 2

You should look into CustomScrollView
A CustomScrollView lets you supply slivers directly to create various scrolling effects, such as lists, grids, and expanding headers.
Example
CustomScrollView(
slivers: <Widget>[
const SliverAppBar(
pinned: true,
expandedHeight: 250.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('Demo'),
),
),
SliverGrid(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: Text('Grid Item $index'),
);
},
childCount: 20,
),
),
SliverFixedExtentList(
itemExtent: 50.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: Text('List Item $index'),
);
},
),
),
],
)

Answer 3

this is your code
//GridView
Expanded(
child: GridView.builder(
itemCount: name.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemBuilder: (BuildContext context, int index){
***
return Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
decoration: BoxDecoration(
add this if before return ( i added *** )
if(index == 0){
return Container //your container Image goes Here
}else{
// your last return for other items
}
I hope this help your ...