Como usar o For Loop no widget Children no Flutter

Neste tutorial, aprenderemos como usar o loop for em widgets como linha, coluna, wrap e stack filhos. For loop é o loop básico em todas as linguagens de programação, o Flutter também possui recursos para usar o For loop para construir seus widgets, veja o exemplo abaixo:

Como usar o For Loop nos filhos do widget no Flutter:

Column( 
  children: [
    for(int x = 1; x<=5;x++)...[
      Container(
         child: Text("$x") 
      ),
    ],
  ],
)

Você pode usar Para ter a aparência acima, você também pode adicionar seus próprios widgets adicionais antes e depois desse loop. 

Alternativamente, você pode construir uma lista de widgets antes de construir widgets e passá-la para os atributos filhos como abaixo:

@override
Widget build(BuildContext context) { 

  List<Widget> mywidgets = [];
  for(int x = 1; x<=5;x++){
      mywidgets.add(
        Container(
          child: Text("$x"),
        )
      );
  }

  return  Scaffold(
    body: Container(
        child: Column( 
          children: mywidgets
        )
    )
  );
}

A saída de ambos os códigos será a mesma.

Exemplo completo de aplicativo:

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("For Loop in Widget Children"),
            backgroundColor: Colors.redAccent,
          ),
         
          body: Container(
             child: Column( 
               children: [
                 //you can add widgets here also 

                 for(int x = 1; x<=5;x++)...[
                    Card(
                       child: Container(
                         padding: EdgeInsets.all(10),
                         width: double.infinity,
                         child:Text("Item $x"),
                       )
                    ),

                    // you can add widget here as well
                 ],

                 // you can add more widgets here
               ],
             ),
          )
       );
  }
}

Desta forma, você pode usar o loop For nos filhos do widget no Flutter.

1.65 GEEK