Flutter: How do I disable scrolling for a GridView widget, but have scrolling enabled for the page as a whole?
349
Solution 1
try this:
class CardInfo extends StaefulWidget {
PokemonCard card;
CardInfo({required this.card});
@override
_CardInfoState createState() => _CardInfoState();
}
class _CardInfoState extends State<CardInfo> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Colors.grey[900],
appBar: AppBar(
title: Text(
"Card Profile",
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 3),
),
backgroundColor: Colors.red,
elevation: 0.0,
),
body: Align(
alignment: Alignment.center,
child: ListView(
children: [
SizedBox(
height: SizeConfig.blockSizeVertical * 3,
),
Text(
"Set: " +
widget.card.set.name +
" // Number: " +
widget.card.number,
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 2),
),
SizedBox(
height: SizeConfig.blockSizeVertical * 3,
),
Hero(
tag: 'card' + widget.card.id,
child: Image.network(
widget.card.images.large,
height: SizeConfig.blockSizeVertical * 30,
),
),
SizedBox(
height: SizeConfig.blockSizeVertical * 2,
),
Text(
widget.card.name,
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 5,
),
),
SizedBox(
height: SizeConfig.blockSizeVertical * 2,
),
GridView.count(
mainAxisSpacing: SizeConfig.blockSizeVertical * 4,
crossAxisSpacing: SizeConfig.blockSizeHorizontal * 4,
crossAxisCount: 3,
children: [
Container(
padding: EdgeInsets.symmetric(
vertical: SizeConfig.blockSizeVertical * 2,
horizontal: SizeConfig.blockSizeHorizontal * 2),
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Subtypes",
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 3,
fontWeight: FontWeight.bold),
),
Text(
widget.card.subtypes
.map((e) => e.type)
.join(", "),
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 2,
),
)
],
),
),
),
Container(
padding: EdgeInsets.symmetric(
vertical: SizeConfig.blockSizeVertical * 2,
horizontal: SizeConfig.blockSizeHorizontal * 2),
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"HP",
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 3,
fontWeight: FontWeight.bold),
),
Text(
widget.card.hp!,
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 2,
),
)
],
),
),
),
Container(
padding: EdgeInsets.symmetric(
vertical: SizeConfig.blockSizeVertical * 2,
horizontal: SizeConfig.blockSizeHorizontal * 2),
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Type",
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 3,
fontWeight: FontWeight.bold),
),
Text(
widget.card.types.map((e) => e.type).join(", "),
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 2,
),
)
],
),
),
),
Container(
padding: EdgeInsets.symmetric(
vertical: SizeConfig.blockSizeVertical * 2,
horizontal: SizeConfig.blockSizeHorizontal * 2),
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Weakness",
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 3,
fontWeight: FontWeight.bold),
),
Text(
widget.card.weaknesses
.map((e) => e.type + e.value)
.join(", "),
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 2,
),
)
],
),
),
),
Container(
padding: EdgeInsets.symmetric(
vertical: SizeConfig.blockSizeVertical * 2,
horizontal: SizeConfig.blockSizeHorizontal * 2),
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Resistance",
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 3,
fontWeight: FontWeight.bold),
),
Text(
widget.card.resistances
.map((e) =>
e.type == "" ? "None" : e.type + e.value)
.join(", "),
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 2,
),
)
],
),
),
),
Container(
padding: EdgeInsets.symmetric(
vertical: SizeConfig.blockSizeVertical * 2,
horizontal: SizeConfig.blockSizeHorizontal * 2),
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Retreat Cost",
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 3,
fontWeight: FontWeight.bold),
),
Text(
widget.card.convertedRetreatCost.toString(),
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 2,
),
)
],
),
),
),
],
),
],
),
),
),
);
}
}
Solution 2
You can provide physics: NeverScrollableScrollPhysics() on GridView to disable 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(..)
Author by
Devansh Koppar
Updated on January 03, 2023Comments
-
Devansh Koppar over 1 year
I'm building an app where I have a page which gives information about a specific trading card. I want the page to be scrollable, but I also want to have a grid on the page, with each grid cell showing one data point. I made the grid using GridView.count().
My problem is that instead of have a page which I can scroll through, the top half of the page stays static, while the grid is scrollable. How do I make the grid static, while the rest of the page scrollable? I intend to have more data below this grid as well, and I want to user to be able to scroll to see all of it, with the grid being a static component of the page.
Here's my code:
import 'package:flutter/material.dart'; import 'package:pokehub/size_config.dart'; import 'package:pokemon_tcg/pokemon_tcg.dart'; class CardInfo extends StatefulWidget { PokemonCard card; CardInfo({required this.card}); @override _CardInfoState createState() => _CardInfoState(); } class _CardInfoState extends State<CardInfo> { @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( backgroundColor: Colors.grey[900], appBar: AppBar( title: Text( "Card Profile", style: TextStyle( color: Colors.white, fontFamily: 'Blinker', fontSize: SizeConfig.blockSizeVertical * 3), ), backgroundColor: Colors.red, elevation: 0.0, ), body: Align( alignment: Alignment.center, child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ SizedBox( height: SizeConfig.blockSizeVertical * 3, ), Text( "Set: " + widget.card.set.name + " // Number: " + widget.card.number, style: TextStyle( color: Colors.white, fontFamily: 'Blinker', fontSize: SizeConfig.blockSizeVertical * 2), ), SizedBox( height: SizeConfig.blockSizeVertical * 3, ), Hero( tag: 'card' + widget.card.id, child: Image.network( widget.card.images.large, height: SizeConfig.blockSizeVertical * 30, ), ), SizedBox( height: SizeConfig.blockSizeVertical * 2, ), Text( widget.card.name, style: TextStyle( color: Colors.white, fontFamily: 'Blinker', fontSize: SizeConfig.blockSizeVertical * 5, ), ), SizedBox( height: SizeConfig.blockSizeVertical * 2, ), Expanded( child: GridView.count( mainAxisSpacing: SizeConfig.blockSizeVertical * 4, crossAxisSpacing: SizeConfig.blockSizeHorizontal * 4, crossAxisCount: 3, children: [ Container( padding: EdgeInsets.symmetric( vertical: SizeConfig.blockSizeVertical * 2, horizontal: SizeConfig.blockSizeHorizontal * 2), decoration: BoxDecoration( border: Border.all( color: Colors.white, ), borderRadius: BorderRadius.all(Radius.circular(20)), ), child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( "Subtypes", style: TextStyle( color: Colors.white, fontFamily: 'Blinker', fontSize: SizeConfig.blockSizeVertical * 3, fontWeight: FontWeight.bold), ), Text( widget.card.subtypes .map((e) => e.type) .join(", "), style: TextStyle( color: Colors.white, fontFamily: 'Blinker', fontSize: SizeConfig.blockSizeVertical * 2, ), ) ], ), ), ), Container( padding: EdgeInsets.symmetric( vertical: SizeConfig.blockSizeVertical * 2, horizontal: SizeConfig.blockSizeHorizontal * 2), decoration: BoxDecoration( border: Border.all( color: Colors.white, ), borderRadius: BorderRadius.all(Radius.circular(20)), ), child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( "HP", style: TextStyle( color: Colors.white, fontFamily: 'Blinker', fontSize: SizeConfig.blockSizeVertical * 3, fontWeight: FontWeight.bold), ), Text( widget.card.hp!, style: TextStyle( color: Colors.white, fontFamily: 'Blinker', fontSize: SizeConfig.blockSizeVertical * 2, ), ) ], ), ), ), Container( padding: EdgeInsets.symmetric( vertical: SizeConfig.blockSizeVertical * 2, horizontal: SizeConfig.blockSizeHorizontal * 2), decoration: BoxDecoration( border: Border.all( color: Colors.white, ), borderRadius: BorderRadius.all(Radius.circular(20)), ), child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( "Type", style: TextStyle( color: Colors.white, fontFamily: 'Blinker', fontSize: SizeConfig.blockSizeVertical * 3, fontWeight: FontWeight.bold), ), Text( widget.card.types.map((e) => e.type).join(", "), style: TextStyle( color: Colors.white, fontFamily: 'Blinker', fontSize: SizeConfig.blockSizeVertical * 2, ), ) ], ), ), ), Container( padding: EdgeInsets.symmetric( vertical: SizeConfig.blockSizeVertical * 2, horizontal: SizeConfig.blockSizeHorizontal * 2), decoration: BoxDecoration( border: Border.all( color: Colors.white, ), borderRadius: BorderRadius.all(Radius.circular(20)), ), child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( "Weakness", style: TextStyle( color: Colors.white, fontFamily: 'Blinker', fontSize: SizeConfig.blockSizeVertical * 3, fontWeight: FontWeight.bold), ), Text( widget.card.weaknesses .map((e) => e.type + e.value) .join(", "), style: TextStyle( color: Colors.white, fontFamily: 'Blinker', fontSize: SizeConfig.blockSizeVertical * 2, ), ) ], ), ), ), Container( padding: EdgeInsets.symmetric( vertical: SizeConfig.blockSizeVertical * 2, horizontal: SizeConfig.blockSizeHorizontal * 2), decoration: BoxDecoration( border: Border.all( color: Colors.white, ), borderRadius: BorderRadius.all(Radius.circular(20)), ), child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( "Resistance", style: TextStyle( color: Colors.white, fontFamily: 'Blinker', fontSize: SizeConfig.blockSizeVertical * 3, fontWeight: FontWeight.bold), ), Text( widget.card.resistances .map((e) => e.type == "" ? "None" : e.type + e.value) .join(", "), style: TextStyle( color: Colors.white, fontFamily: 'Blinker', fontSize: SizeConfig.blockSizeVertical * 2, ), ) ], ), ), ), Container( padding: EdgeInsets.symmetric( vertical: SizeConfig.blockSizeVertical * 2, horizontal: SizeConfig.blockSizeHorizontal * 2), decoration: BoxDecoration( border: Border.all( color: Colors.white, ), borderRadius: BorderRadius.all(Radius.circular(20)), ), child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( "Retreat Cost", style: TextStyle( color: Colors.white, fontFamily: 'Blinker', fontSize: SizeConfig.blockSizeVertical * 3, fontWeight: FontWeight.bold), ), Text( widget.card.convertedRetreatCost.toString(), style: TextStyle( color: Colors.white, fontFamily: 'Blinker', fontSize: SizeConfig.blockSizeVertical * 2, ), ) ], ), ), ), ], ), ), ], ), ), ), ); } } [enter image description here][1] -
Devansh Koppar about 2 yearsHi, this was very helpful thanks!!
-
reza about 2 yearsplease accept the answer then. happy coding :)
