Cây widget

Thuộc phần Ứng dụng đầu tiên trong hành trình Flutter của Coddy. Bài học 3 trên 32.

Widget nằm bên trong các widget khác. Widget chứa một widget khác sẽ đặt nó vào child:, như với Center sau đây:

Center(
  child: Text('Hello'),
)

Bản thân Center không vẽ gì cả. Nó nhận widget con rồi đặt vào giữa vùng không gian mà nó có. Nếu không có widget này, văn bản sẽ nằm ở góc trên bên trái.

Các widget nằm bên trong widget khác tạo thành một cây widget. Trong ứng dụng của bạn, cây gồm MaterialApp, tiếp đến là Scaffold, rồi đến bất cứ thứ gì bạn đặt trong body:. Bạn viết widget con của mỗi widget bên trong dấu ngoặc của nó, nên các dấu ngoặc cho thấy cấu trúc cây. Dấu phẩy ở cuối mỗi dòng giúp code gọn gàng.

Thử thách

Dễ

Văn bản đang nằm ở góc trên bên trái. Bọc nó trong Center để đặt nó ở giữa màn hình:

thay body: Text('Right in the middle'), bằng một Center có child: là Text đó

Tự làm thử

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