Midhilaj
Midhilaj

Reputation: 4987

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

Upvotes: 9

Views: 9238

Answers (3)

Sandeep Pareek
Sandeep Pareek

Reputation: 1789

use this

   child: GridView.count(
    crossAxisCount: 2,
    crossAxisSpacing: 2.0,
    mainAxisSpacing: 2.0,
    shrinkWrap: true,
    scrollDirection: Axis.vertical,
    physics: NeverScrollableScrollPhysics(),
    children: List.generate(choices.length, (index) {
      return Center(
        child: new Column(
          children: [
            new Expanded(
              child: SelectCard(choice: choices[index]),
            ),
          ],
        ),
      );
    }),
  ));

and full code for better explanation

    import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

var url = "https://miro.medium.com/max/2160/1*9JzKFil-Xsip742fdxDqZw.jpeg";

class Dashboard extends StatefulWidget {
  _Dashboard createState() => _Dashboard();
}

Widget _buildAvatar(BuildContext context, Orientation orientation) {
  return Container(
    height: 300.0,
    color: Colors.blue,
    child: Center(
      child: CircleAvatar(
        backgroundColor: Colors.white,
        child: Text('RR'),
      ),
    ),
  );
}

Widget _buildFields(BuildContext context) {
  return Container(
      color: Colors.white,
      child: GridView.count(
        crossAxisCount: 2,
        crossAxisSpacing: 2.0,
        mainAxisSpacing: 2.0,
        shrinkWrap: true,
        scrollDirection: Axis.vertical,
        physics: NeverScrollableScrollPhysics(),
        children: List.generate(choices.length, (index) {
          return Center(
            child: new Column(
              children: [
                new Expanded(
                  child: SelectCard(choice: choices[index]),
                ),
              ],
            ),
          );
        }),
      ));
}

class _Dashboard extends State<Dashboard> {
  @override
  Widget build(BuildContext context) {
    return OrientationBuilder(builder: (context, orientation) {
      return ListView(
        children: <Widget>[
          Container(
            height: 200,
            child: Image.network(
                "https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg"),
          ),
          _buildFields(context),
        ],
      );
    });
  }
}

class Choice {
  const Choice({this.title, this.icon});
  final String title;
  final IconData icon;
}

const List<Choice> choices = const <Choice>[
  const Choice(title: 'Home', icon: Icons.home),
  const Choice(title: 'Contact', icon: Icons.contacts),
  const Choice(title: 'Map', icon: Icons.map),
  const Choice(title: 'Phone', icon: Icons.phone),
  const Choice(title: 'Camera', icon: Icons.camera_alt),
  const Choice(title: 'Setting', icon: Icons.settings),
  const Choice(title: 'Album', icon: Icons.photo_album),
  const Choice(title: 'WiFi', icon: Icons.wifi),
];

class SelectCard extends StatelessWidget {
  const SelectCard({Key key, this.choice}) : super(key: key);
  final Choice choice;

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    return Container(
      child: GridView.builder(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 1,
          childAspectRatio: 1,
        ),
        itemBuilder: (contxt, indx) {
          return Card(
            elevation: 4,
            margin: EdgeInsets.all(8),
            color: Colors.white70,
            child: Padding(
              padding: const EdgeInsets.only(top: 25),
              child: Container(
                width: 4,
                child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      new Expanded(
                        child: new Container(
                          child: new Icon(
                            choice.icon,
                            color: Colors.black,
                            size: 50.0,
                          ),
                        ),
                        flex: 2,
                      ),
                      new Expanded(
                        child: new Container(
                            margin: EdgeInsets.only(top: 12),
                            child: new Text(
                              choice.title,
                              style:
                                  TextStyle(fontSize: 16, color: Colors.black),
                            )),
                        flex: 1,
                      ),
                    ]),
              ),
            ),
          );
        },
      ),
    );
  }
}

Upvotes: 0

Daniel Holmberg
Daniel Holmberg

Reputation: 11

I had the same issue. However, I did not want the issue of Overflowed by... that comes with a Column/Row and instead added physics: ScrollPhysics() to my GridView.count to resolve this issue. Found my answer from this response to a similar issue.

Upvotes: 1

Govaadiyo
Govaadiyo

Reputation: 6082

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.

Upvotes: 6

Related Questions