Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Flutter make scrollable children for Row

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

  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(),        
    ]
);
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading