Widget trong Flutter là gì

Trong bài viết Làm quen với Fluttertrướ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 [Everythings 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àmWidget 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àmbuild[]và vẽ các widget được trả về từ hàm này.

Lưu ý rằng, hàmbuild[]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 {

@override

Widget build[BuildContext context] {

return Scaffold[];

}

}

class RandomWords extends StatefulWidget {

@override

State 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àmbuild[], thay vào đó là hàmcreateState[], hàm này trả về một instance của một class extends từState. Nhìn vào classRandomwordsState, class này extends từ State và override hàmbuild[].

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ứcdidUpdateWidget[]để 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ứcsetState[]. Trong phương thứcsetState[]có cho phép truyền vào một hàm. Lưu ý rằng chỉ có thể gọi đến hàmsetState[]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àmbuild[]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 createState[] => new RandomwordsState[];

}

và

class RandomWords extends StatefulWidget {

@override

State 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 CODEWELLtrê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] //flutter.dev/docs/cookbook

[Widgets Intro] //flutter.dev/docs/development/ui/widgets-intro

TRẦN HỮU ĐÔNG CO-WELL Asia