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

Grid(Row*Column) using nested for loop

Im a flutter beginner, actually to the whole Software development domain,

I want to create a 4×2 grid, specifically with for loops,

The code below is intended to create 8 boxes in a grid of 4 rows and 2 columns, changing to a different row, at j==2, but its not happening, it continues to build the container in the first(and only) row, even after reaching the condition, which is j < 2,

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

Also, may i get to know that how can i create block-of-code for for, as done in other languages like for(.) {.}, Al tough i have already done something similar using for(.) ...[.], but its merely a dumb copy-paste off, again from,

To try the code, visit:

import 'package:flutter/material.dart';
void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Row(
          children: <Widget>[
            for (int i = 0; i < 4; i++) ...[
              Row(
                children: [
                  for (int j = 0; j < 2; j++) ...[
                    Column(
                      children: [
                        Container(
                          child: Row(
                            children: [
                              Column(
                                children: [
                                  Text(i.toString()),
                                  Text(j.toString()),
                                ],
                              ),
                              const Icon(Icons.keyboard_arrow_right_sharp),
                            ],
                          ),
                          margin: const EdgeInsets.all(5.0),
                          padding: const EdgeInsets.all(5.0),
                          decoration: BoxDecoration(
                            border: Border.all(
                              color: Colors.black,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ]
                ],
              ),
            ]
          ],
        ),
      ),
    ),
  );
}

>Solution :

I think this is the issue, you’re putting the Rows created in another Row. I think what you want is Column:

home: Scaffold(
    body: Column(
      children: <Widget>[
        for (int i = 0; i < 4; i++) ...[
          Row(
....
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