When building flutter desktop application, I divided the screen size into 3 equal parts:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
CategorySection(),
ProductSection(),
BillingSection(),
]
);
Each section has either gridview.builder or listview.builder along with other widgets inside the column.
I need to make each of the section scrollable. I used SingleChildScrollView at first like:
Widget build(BuildContext context) {
return SingleChildScrollView(
controller: widget.scrollController,
child: Container(
width: MediaQuery.of(context).size.width / 3,
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
... other widgets
GridView.builder(
itemCount: widget.products!.length,
shrinkWrap: true,
physics: AlwaysScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 1.2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
itemBuilder: (context, index) {
return ProductCard(
onTap: () {},
product: widget.products![index],
);
},
),
],
),
),
);
}
The issue with this code is that when I have a minimal number of products (in my case, I only have about five products), the entire ProductSection automatically positions itself in the center of the page.
Visual: https://ibb.co/fQpmHRx
What other solutions are there?
>Solution :
Try assigning crossAxisAlignment: CrossAxisAlignment.start, to your Row widget.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CategorySection(),
ProductSection(),
BillingSection(),
]
);