[NGỤP LẶN VỚI FLUTTER] PHẦN 2: STATELESS VS STATEFUL
02/11/2021 945
Trong Phần 1: Làm quen với Flutter trước, chúng ta đã có những thông tin cơ bản về Dart và Widget. Đồng thời, cũng hiểu nguyên tắc cốt lõi – widget là mọi thứ trong Flutter (Everything’s a Widget). Trong bài viết này, hãy cùng CO-WELL Asia tìm hiểu kỹ hơn về cách tạo widget, cách thức hoạt động và các loại widget được Flutter hỗ trợ.
Widgets trong Flutter
Các Flutter widgets được xây dựng từ framework hiện đại với nguồn cảm hứng từ React. Ý tưởng chính là xây dựng UI dựa vào các widget. Các widget sẽ mô tả khung nhìn của chúng ta trông như thế nào với cấu hình và trạng thái của chúng ta. Khi trạng thái của widget thay đổi thì widget sẽ tự cập nhật mô tả và chuyển đổi trạng thái khi cần thiết.
Có hai loại widget: Statelesswidget và Statefullwidget. Cả hai widget này chỉ khác nhau ở một khía cạnh, đó là khả năng reload của widget tại runtime. Hãy cùng tìm hiểu cụ thể về 2 widget này với ví dụ dưới đây nhé.
StatelessWidget trong Flutter
Tạo một Stateless bằng cách extends từ StatelessWidget như sau:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Startup Name Generator',
theme: ThemeData(
primaryColor: Colors.white,
),
home: RandomWords(),
);
}
}
Ở đây, khi extends StatelessWidget thì bạn phải override hàm Widget build (BuildContext context), hàm này trả về một hoặc nhiều widget. Khi MyApp được khởi chạy thì nó sẽ gọi hàm build() và vẽ các widget được trả về từ hàm này.
Lưu ý rằng, hàm build() của StatelessWidget chỉ gọi một lần và không có bất kỳ sự thay đổi nào trong bất kỳ biến, giá trị hay sự kiện nào có thể gọi lại.
Để vẽ được Stateless Widget thì ta cần tạo một instance mới của Widget.
Một ứng dụng Flutter là một sự kết hợp của nhiều widgets
StatefulWidget trong Flutter
Việc tạo ra StatefulWidget là một quá trình gồm hai bước.
class RandomwordsState extends State<RandomWords> {
@override
Widget build(BuildContext context) {
return Scaffold();
}
}
class RandomWords extends StatefulWidget {
@override
State<StatefulWidget> createState() => new RandomwordsState();
}
Đầu tiên, chúng ta cần tạo class để extends từ StatefulWidget. Tuy nhiên, chúng ta không override lại hàm build(), thay vào đó là hàm createState(), hàm này trả về một instance của một class extends từ State<>. Nhìn vào class RandomwordsState, class này extends từ State<> và override hàm build().
Khi cần vẽ lại widget thì có hai hàm thường được xử lý, đó là didUpdateWidget() và setState(). Ở hàm thứ nhất, khi configuration bị thay đổi, Widget sẽ được thông báo về sự thay đổi này. Ta override lại phương thức didUpdateWidget() để bắt sự kiện trước khi Flutter build lại. Còn để thực hiện yêu cầu Widget thay đổi State, ta sử dụng phương thức setState(). Trong phương thức setState() có cho phép truyền vào một hàm. Lưu ý rằng chỉ có thể gọi đến hàm setState() sau khi Widget đã được gắn vào layout.
Để đáp ứng khả năng tùy biến (Mutability) thì Flutter đưa ra cú pháp này và yêu cầu bạn tạo StatefulWidget như thế này. Stateful Widget có thể được vẽ nhiều lần trong suốt vòng đời của nó. Điều này có nghĩa là hàm build() của class RandomwordsState có thể được gọi nhiều lần trong suốt vòng đời, và trả về các widget mới hoặc khác nhau dựa vào Variable(s), Value(s) hoặc Events(s).
Lưu ý: hai cách viết sau đây tương đương nhau.
class RandomWords extends StatefulWidget {
@override
State<StatefulWidget> createState() => new RandomwordsState();
}
và
class RandomWords extends StatefulWidget {
@override
State<StatefulWidget> createState() => new RandomwordsState();
}
Tạm kết
Hi vọng những ví dụ vềviệc tạo ra Stateless và Stateful được tổng hợp từ khóa học của công ty, sẽ cung cấp cho bạn cái nhìn tổng quan nhất về bộ công cụ phát triển phần mềm đang được săn đón này. Đừng quên theo dõi chuyên mục CODEWELL trên website CO-WELL Asia để đón đọc những bài viết bổ ích về công nghệ nhé!
Tham khảo:
[Flutter Document] https://flutter.dev/docs/cookbook
[Widgets Intro] https://flutter.dev/docs/development/ui/widgets-intro
Đọc thêm:
TRẦN HỮU ĐÔNG – CO-WELL Asia
