Reputation: 4987
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(),
),
)
],
)
Upvotes: 9
Views: 9238
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
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
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