Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to solve scrolling in list view when gridview as a child?

How to solve the scrolling issue in flutter layout when adding gridview inside listview.
in android studio java we use NestedScrollView to solve this type of issue
What is the solution for flutter?
I need to scrolling continues with out any problem with listview with custom view and gridview.
Now then gridview is only allowing to scroll gridview
if i scroll grid view then top imageview is not scrolling .How to solve this issue?

body: 
    ListView(
  children: <Widget>[
    new Image.network("https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg"),
    Container(
    height: 300.0,
    child: GridView.count(
      crossAxisCount: 3,
      childAspectRatio: .6,
      children: _list.map((p) => ProductManagment(p)).toList(),
    ),
  ) 
  ],
)

enter image description here

After adding @deniss answer enter image description here

SOLVED
enter image description here

like image 875
Midhilaj Avatar asked Dec 11 '18 11:12

Midhilaj


1 Answers

Instead of use ListView you should use Column Widget Like below.

    body: 
        Column(
      children: <Widget>[
        Container (
         height: 150.0, // Set as you want
        child: Image.network("https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg")),
        Container(
        height: 300.0,
        child: GridView.count(
          crossAxisCount: 3,
          childAspectRatio: .6,
          children: _list.map((p) => ProductManagment(p)).toList(),
        ),
      ) 
      ],
    )

Because of `GridView` itself has scroll effect.

EDITED:

Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
          child: ListView(
            children: <Widget>[
              Column(
                children: <Widget>[
                  Container(
                    height: 200,
                    child: Image.network(
                        "https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg"),
                  ),
                  ConstrainedBox(
                    constraints: BoxConstraints(
                      minHeight: 80, // Set as you want or you can remove it also.
                      maxHeight: double.infinity,
                    ),
                    child: Container(
                      child: GridView.count(
                        crossAxisCount: 3,
                        shrinkWrap: true,
                        scrollDirection: Axis.vertical,
                        physics: NeverScrollableScrollPhysics(),
                        childAspectRatio: .6,
                        children: _list.map((p) => ProductManagment(p)).toList(),
                      ),
                    ),
                  )
                ],
              ),
            ],
          ),
        ));

You have to use ConstrainedBox with set maxHeight: double.infinity and GridView.count set shrinkWrap: true,. and remove container height 300.

Also if you want to change

 Container(
                    height: 200,
                    child: Image.network(
                        "https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg"),
                  ),

To Just

 Image.network("https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg")

Than you can change it.

like image 161
Govaadiyo Avatar answered Oct 19 '22 08:10

Govaadiyo