1 year ago
#221779
Joe
Gridview.Builder // crossAxisSpacing doesn't work as expected
tldr; gridview is spaced out. confused myself trying to make it tight. need help.
The problem: I'm using GridView.builder to display some thumbnails. The problem is that they are being spaced out evenly and the crossAxisSpacing isn't working to get them closer together either. By now, I'm totally lost fiddling with options and randomly adding Flexible, Wrap and whatnot widgets. I need help thinking this through. I'll give y'all the code first, then a screenshot. Any help very much appreciated!
The code for the builder:
class LookbackGridView extends StatelessWidget {
const LookbackGridView({Key? key}) : super(key: key);
//simplified; deleted setup for variables like gridWith etc.
return Flexible(
child: SizedBox(
width: gridWidth,
height: gridheight,
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
mainAxisSpacing: gridheight * 0.015,
crossAxisSpacing: gridWidth * 0.0,
),
padding: EdgeInsets.symmetric(
horizontal: 0,
),
physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics()),
itemCount:
Provider.of<MainElementList>(context).mainElementList.length -
1,
shrinkWrap: true,
//
itemBuilder: (context, index) {
return index == 0
? SizedBox()
: HistoryThumb(
index: index,
usedFrom: 'lookbackScreen',
);
The code for what is being built:
class HistoryThumb extends StatelessWidget {
late int index;
late String usedFrom;
HistoryThumb({
required this.index,
required this.usedFrom,
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
//leaving out some setup
return Column(
children: [
Text(//irrelevant),
//
SizedBox(
height: mainElementSize * 0.003,
),
GestureDetector(
onTap: () {//irrelevant)
//
},
child: ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Container( //!!!this is what gives each element its size
padding: EdgeInsets.all(0),
height: historyThumbSize,
width: historyThumbSize,
//
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
HistoryThumbTask(//irrelevant),
HistoryThumbTask(//irrelevant),
],
),
//
HistoryThumbTask(//irrelevant),
//
],
Screenshot:
flutter
gridview
flutter-layout
flutter-gridview
0 Answers
Your Answer