Flutter Scroll entire screen including gridview

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

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 ...

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

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)),)
                      ),
                    ],
                  ),
                ),
              );
            }),


      ],
    ),
  ),
);