Flutter make scrollable children for Row-CodePudding

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?

CodePudding user response：

Try assigning crossAxisAlignment: CrossAxisAlignment.start, to your Row widget.

Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
        CategorySection(),
        ProductSection(),
        BillingSection(),        
    ]
);