Menu
CoddyTech

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.

challenge icon

Desafio

Fácil

O 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 um Center cujo child: seja esse 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) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Text('Right in the middle'),
      ),
    );
  }
}
quiz iconTeste seus conhecimentos

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

Pratique por conta própria: Compilador de Flutter online