A árvore de widgets
Parte da seção Seu primeiro app do Journey de Flutter da Coddy. Lição 3 de 32.
Widgets ficam dentro de outros widgets. Um widget que contém outro o passa para child:, como este Center:
Center(
child: Text('Hello'),
)Center não desenha nada por conta própria. Ele pega seu filho e o coloca no meio do espaço que tem. Sem ele, o texto fica no canto superior esquerdo.
Widgets dentro de widgets dentro de widgets formam uma árvore de widgets. No seu app, a árvore é MaterialApp, depois Scaffold, depois o que você colocar em body:. O filho de cada widget é escrito entre seus parênteses, então os parênteses mostram a árvore. As vírgulas no fim de cada linha mantêm tudo organizado.
Desafio
FácilO texto está preso no canto superior esquerdo. Envolva-o com um Center para que fique no meio da tela:
- substitua
body: Text('Right in the middle'),por umCentercujochild:seja esseText
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) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Text('Right in the middle'),
),
);
}
}
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: EstiloPratique por conta própria: Compilador de Flutter online