here I'm trying to display a list using grid view. but this is not scrollable how do I make this scrollable? here is the code
padding: const EdgeInsets.all(18.0),
child: GridView.builder(
primary: true,
physics: const ScrollPhysics(),
shrinkWrap: true,
itemCount: data.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 2.9 / 5,
crossAxisCount: 2,
crossAxisSpacing: 30.0,
mainAxisSpacing: 10.0,
),
itemBuilder: (context, index) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 200,
width: 300,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(data[index].image)),
borderRadius: BorderRadius.circular(20)),
),
const SizedBox(height: 9),
const Text(
'Drnink Name',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 10),
const Text(
'Category name',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.grey),
)
],
);
},
),
),
I tried all of these widgets to make this gridview scrollable. but none of those is not working I used
primary: true,
physics: const ScrollPhysics(),
also
singleChildScrollview
Expanded
but both are not working, how do I fix this???
CodePudding user response:
remove SingleChildScrollView and Expanded use direct GridView. GridView own his scroll view
class MyApp extends StatelessWidget {
List<String> images = [
"https://static.javatpoint.com/tutorial/flutter/images/flutter-logo.png",
"https://static.javatpoint.com/tutorial/flutter/images/flutter-logo.png",
"https://static.javatpoint.com/tutorial/flutter/images/flutter-logo.png",
"https://static.javatpoint.com/tutorial/flutter/images/flutter-logo.png"
];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Flutter GridView Demo"),
backgroundColor: Colors.red,
),
body: Container(
padding: EdgeInsets.all(12.0),
child: GridView.builder(
itemCount: images.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 4.0,
mainAxisSpacing: 4.0
),
itemBuilder: (BuildContext context, int index){
return Image.network(images[index]);
},
)),
),
);
}
}
CodePudding user response:
You can provide physics: NeverScrollableScrollPhysics()
on GridView to disable the scroll effect. If you want scrollable as secondary widget use primary: false,
To have Full Page scrollable, you can use body:SingleChildScrollView(..)
or better using body:CustomScrollView(..)