How do i add Gridview inside listview flutter

Published October 21, 2021


In this flutter example tutorial we will cover how to add Gridview inside Listview. Sometimes we may require to put Gridview inside listview, but when we put listview can't scroll. In this Example we will fix this issue and add Gridview inside listview.

Let's get started

Step 1: Create Flutter application

Step 2: Let's create UI to add listview inside Gridview.

When we add Gridview inside Listview to scroll parent widget, that means Listview we will add physics property of Gridview with like below

physics: NeverScrollableScrollPhysics(),

 

While add this property now we can scroll both Listview and Gridview items respected.

 

Complete code for Gridview inside Listview

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
 List<String>image=new List.empty(growable: true);


  @override
  Widget build(BuildContext context) {
    image.add("https://cdn.pixabay.com/photo/2017/02/27/19/57/marriage-2104147_1280.jpg");
    image.add("https://www.shaadidukaan.com/vogue/wp-content/uploads/2019/08/hug-kiss-images.jpg");
    image.add("https://images.pexels.com/photos/1133957/pexels-photo-1133957.jpeg");
    image.add("https://www.filmibeat.com/ph-big/2019/10/beautiful_157061627750.jpg");
    image.add("https://images.pexels.com/photos/1133957/pexels-photo-1133957.jpeg");
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    home:  Scaffold(
      backgroundColor: Colors.white,
      appBar:  AppBar(
        title:  Text('Search'),
      ),
      body:  GestureDetector(
        behavior: HitTestBehavior.opaque,
        onPanDown: (detail) {
          print(detail);
          FocusScope.of(context).requestFocus( FocusNode());
        },
        child:  ListView(
          shrinkWrap: true,
          children: <Widget>[
             SizedBox(height: 20.0),
            Card(elevation:4,child: Image.network("https://www.shaadidukaan.com/vogue/wp-content/uploads/2019/08/hug-kiss-images.jpg",fit: BoxFit.fitWidth,height: 150,)),

             Container(
              child:  GridView.builder(
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                itemCount: image.length,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,mainAxisSpacing: 5,crossAxisSpacing: 5),
                itemBuilder: (context,index){
                  return  Card(
                    elevation: 5,
                    child: Image.network(image[index],fit: BoxFit.fitWidth,height: 100),
                  );
                },

        scrollDirection: Axis.vertical,
              ),
            ),
            Card(elevation:4,child: Image.network("https://numeralpaint.com/wp-content/uploads/2020/05/c25-1.jpg",fit: BoxFit.fitWidth,height: 180,)),
            SizedBox(height: 20.0),
            Container(
              height: 100,
              child:  ListView.builder(


                shrinkWrap: true,
                itemCount: 5,

                itemBuilder: (context,index){
                  return  Card(
                    elevation: 5,
                    child: Container(
                      height: 50.0,
                      color: Colors.green,
                      child:  Image.network("https://www.shaadidukaan.com/vogue/wp-content/uploads/2019/08/hug-kiss-images.jpg",fit: BoxFit.fitWidth,height: 120,),

                    ),
                  );
                },

                scrollDirection: Axis.horizontal,
              ),
            ),
            SizedBox(height: 20.0),
            Card(elevation:4,child: Image.network("https://numeralpaint.com/wp-content/uploads/2020/05/c25-1.jpg",fit: BoxFit.fitWidth,height: 180,)),

          ],
        ),
      ),
    ),
    );
  }
}

 

Step 3: Run application

Flutter Gridview inside Listview

Conclusion: In this example we created a flutter example to add Gridview inside listview.

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

56 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions