Tự tạo lớp Widget

Thuộc phần Tạo tính tương tác trong hành trình Flutter của Coddy. Bài học 9 trên 34.

Mọi widget bạn đã dùng, Text, Row, Scaffold, đều là một lớp do ai đó viết. Bạn có thể tự viết lớp của mình, và bạn đã có một lớp rồi: MyApp.

Từ đây trở đi, ứng dụng của bạn có hai lớp. MyApp thiết lập ứng dụng bằng MaterialApp, còn màn hình có lớp riêng, HomePage:

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('Hi')),
    );
  }
}

extends StatelessWidget biến HomePage thành một widget. Dòng const HomePage({super.key}); cho phép bạn viết HomePage(): hãy sao chép nguyên dòng này, chỉ thay bằng tên lớp của bạn. build trả về nội dung mà widget hiển thị.

Dùng nó như mọi widget khác: home: HomePage(). Đặt màn hình trong lớp riêng giúp bạn đọc code dễ hơn. Trong các bài học tiếp theo, cách này còn cho phép màn hình thay đổi trong khi phần còn lại của ứng dụng vẫn giữ nguyên.

Thử thách

Dễ

Lớp HomePage nằm ở cuối tệp, nhưng ứng dụng vẫn hiển thị màn hình Coming soon cũ.

Thêm AppBar có tiêu đề Notes vào Scaffold trong HomePage.
Cho MyApp hiển thị trang này: thay toàn bộ Scaffold sau home: bằng HomePage().

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: Center(child: Text('Coming soon')),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('No notes yet')),
    );
  }
}