Widgets a partir de uma lista
Parte da seção Seu primeiro app do Journey de Flutter da Coddy. Lição 29 de 32.
Escrever um Text para cada item fica demorado e deixa de funcionar quando a lista muda. O Dart pode criar os widgets para você, com um for dentro da lista:
List<String> colors = ['red', 'green', 'blue'];
Column(
children: [
for (String color in colors) Text(color),
],
)Leia assim: para cada color em colors, adicione um Text(color). A coluna recebe três textos e, se você adicionar uma quarta cor à lista, um quarto texto aparece automaticamente.
Desafio
FácilA coluna mostra apenas os dois primeiros planetas. Mostre os quatro, em ordem, usando um for sobre a lista planets em vez das duas linhas Text.
Experimente você mesmo
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
List<String> planets = ['Mercury', 'Venus', 'Earth', 'Mars'];
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(planets[0]),
Text(planets[1]),
],
),
),
),
);
}
}
Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Seu primeiro app
1Olá, Flutter
O que é Flutter?Altere o textoA árvore de widgetsScaffold e AppBarStrings e aspasComentários7Projeto: Cartão de Visita
Cartão de Visita: LayoutCartão de Visita: Estilo6Ícones e imagens
ÍconesTamanho e cor dos íconesImagens da webAvatares redondosWidgets a partir de uma listaPratique por conta própria: Compilador de Flutter online