Flutter how to create gridview in listview-CodePudding

I am using this code to create a gridview in a listview. The listview contains several childrens. This code works but I need to change height of the container to display the whole gridview. What can I do to show the whole gridview without changing the container hight?

                        
              ListView(
                children: <Widget>[ 
                        Container(
                            height: 300,
                            child: GridView.count(
                                physics: NeverScrollableScrollPhysics(),
                                crossAxisCount: 2,
                                children: List.generate(imageFileList.length,
                                    (index) {
                                  return Center(
                                      child: Card(
                                    child: ClipRRect(
                                      borderRadius: BorderRadius.circular(20),
                                      child: Image.file(
                                          File(imageFileList[index].path)),
                                    ),
                                    margin: const EdgeInsets.all(20),
                                    shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(20.0),
                                    ),
                                  ));
                                }))),
    
                ],)

CodePudding user response：

 return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: ListView(
              children: <Widget>[
                GridView.count(
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    crossAxisCount: 2,
                    children: List.generate(10, (index) {
                      return Center(
                          child: Card(
                        child: ClipRRect(borderRadius: BorderRadius.circular(20), child: Text("sadasda")),
                        margin: const EdgeInsets.all(20),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(20.0),
                        ),
                      ));
                    })),
              ],
            ),
          )
        ],
      ),
    );

CodePudding user response：

Try below code I am creating one Gridview using height and other widgets also

 ListView(
          children: <Widget>[
            Container(
              height: 300,
              child: GridView.count(
                shrinkWrap: true,
                physics: AlwaysScrollableScrollPhysics(),
                crossAxisCount: 2,
                padding: const EdgeInsets.all(8),
                children: List.generate(
                  20,
                  (index) {
                    return Container(
                      height: 200,
                      width: 200,
                      child: Card(
                        color: Colors.teal,
                        child: Center(
                          child: Text("Index $index"),
                        ),
                        margin: const EdgeInsets.all(20),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(20.0),
                        ),
                      ),
                    );
                  },
                ),
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            Container(
              padding: const EdgeInsets.all(8),
              margin: const EdgeInsets.all(8),
              color: Colors.teal[200],
              child: const Text('Other Widget 1'),
            ),
            const SizedBox(
              height: 20,
            ),
            Container(
              padding: const EdgeInsets.all(8),
              margin: const EdgeInsets.all(8),
              color: Colors.teal[300],
              child: const Text('Other Widget 2'),
            ),
          ],
        ),

Result->

CodePudding user response：

I solved it by removing the container and adding shrinkWrap: true

Here is the working code:

ListView(
 children: <Widget>[
  GridView.count(
                                shrinkWrap: true,
                                physics: NeverScrollableScrollPhysics(),
                                crossAxisCount: 2,
                                children: List.generate(imageFileList.length,
                                    (index) {
                                  return Center(
                                      child: Card(
                                    child: ClipRRect(
                                      borderRadius: BorderRadius.circular(20),
                                      child: Image.file(
                                          File(imageFileList[index].path)),
                                    ),
                                    margin: const EdgeInsets.all(20),
                                    shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(20.0),
                                    ),
                                  ));
                                })),
],)