Home > database >  Grid(Row*Column) using nested for loop
Grid(Row*Column) using nested for loop

Time:01-19

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

I want to create a 4x2 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,

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,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ]
                ],
              ),
            ]
          ],
        ),
      ),
    ),
  );
}

CodePudding user response:

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(
....
  •  Tags:  
  • Related