Ad

Flutter- Gridview Inside Listview Issue

- 1 answer

I want to show Carousel slider and listview inside gridview and want to scroll complete page, I am able to scroll parent listview but when I go down can't able to scroll.

Code:

Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text("Home"),
    centerTitle: true,
  ),
  body: ListView(
    shrinkWrap: true,
    children: <Widget>[
      Column(
        children: <Widget>[
          new SizedBox(height: 20.0),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 10.0),
            child: CarouselSlider(
              options: CarouselOptions(height: 230.0),
              items: [1, 2, 3, 4, 5].map((i) {
                return Builder(
                  builder: (BuildContext context) {
                    return Container(
                      width: MediaQuery.of(context).size.width,
                      margin: EdgeInsets.symmetric(horizontal: 5.0),
                      child: Card(
                        elevation: 2.0,
                        child: Image(
                          image:
                              AssetImage('assets/images/onboarding1.png'),
                        ),
                      ),
                    );
                  },
                );
              }).toList(),
            ),
          ),
          new SizedBox(height: 20.0),
          new ListView.builder(
            shrinkWrap: true,
            itemCount: 5,
            itemBuilder: (context, index) {
              return new Column(
                children: <Widget>[
                  new Container(
                    height: 50.0,
                    color: Colors.green,
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        new Icon(Icons.format_list_numbered,
                            color: Colors.white),
                        new Padding(
                            padding: const EdgeInsets.only(right: 5.0)),
                        new Text(index.toString(),
                            style: new TextStyle(
                                fontSize: 20.0, color: Colors.white)),
                      ],
                    ),
                  ),
                  Container(
                    child: GridView.count(
                      crossAxisCount: 3,
                      shrinkWrap: true,
                      scrollDirection: Axis.vertical,
                      physics: NeverScrollableScrollPhysics(),
                      childAspectRatio: 1.2,
                      children: List.generate(
                        8,
                        (index) {
                          return Container(
                            child: Card(
                              color: Colors.blue,
                            ),
                          );
                        },
                      ),
                    ),
                  ),
                  new SizedBox(height: 20.0),
                ],
              );
            },
          ),
        ],
      ),
    ],
  ),
);
}

enter image description here

Ad

Answer

Add physics: PageScrollPhysics(), for both ListView.builder() & GridView.count()

Code:

ListView(
      shrinkWrap: true,
      children: <Widget>[
        Column(
          children: <Widget>[
            new SizedBox(height: 20.0),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 10.0),
              child: CarouselSlider(
                options: CarouselOptions(height: 230.0),
                items: [1, 2, 3, 4, 5].map((i) {
                  return Builder(
                    builder: (BuildContext context) {
                      return Container(
                        width: MediaQuery.of(context).size.width,
                        margin: EdgeInsets.symmetric(horizontal: 5.0),
                        child: Card(
                          elevation: 2.0,
                          child: Image(
                            image: AssetImage('assets/images/onboarding1.png'),
                          ),
                        ),
                      );
                    },
                  );
                }).toList(),
              ),
            ),
            new SizedBox(height: 20.0),
            new ListView.builder(
              shrinkWrap: true,
              itemCount: 5,
              physics: PageScrollPhysics(),
              itemBuilder: (context, index) {
                return new Column(
                  children: <Widget>[
                    new Container(
                      height: 50.0,
                      color: Colors.green,
                      child: new Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          new Icon(Icons.format_list_numbered,
                              color: Colors.white),
                          new Padding(
                              padding: const EdgeInsets.only(right: 5.0)),
                          new Text(index.toString(),
                              style: new TextStyle(
                                  fontSize: 20.0, color: Colors.white)),
                        ],
                      ),
                    ),
                    Container(
                      child: GridView.count(
                        crossAxisCount: 3,
                        shrinkWrap: true,
                        physics: PageScrollPhysics(),
                        childAspectRatio: 1.2,
                        children: List.generate(
                          8,
                          (index) {
                            return Container(
                              child: Card(
                                color: Colors.blue,
                              ),
                            );
                          },
                        ),
                      ),
                    ),
                    new SizedBox(height: 20.0),
                  ],
                );
              },
            ),
          ],
        ),
      ],
    );
Ad
source: stackoverflow.com
Ad