Flutter 2.3 - Widgets

 



Như mình đã đề cập ở các bài trước, mỗi ứng dụng Flutter đều là 1 loạt các widgets. 1 widget root chứa toàn bộ ứng dụng, và chứa nhiều widgets khác...


1. Widget and Widget tree
  • Widget là thứ mà bạn có thể nhìn thấy, có thể tương tác với ứng dụng của bạn.

  • Widget được tổ chức thành dạng cây, gồm có parent Widget và children Widgets.

     @override
     Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text('Demo'),
       ),
       body: Center(
         child: Column(
           children: <Widget>[
             Text('Hello guys'),
             Text('Welcome to my article'),
           ],
         ),
       ),
       floatingActionButton: FloatingActionButton(
         onPressed: _onPressed,
         child: Icon(Icons.add),
       ),
      );
    }
    • Như ví dụ trên, Scaffold là parent Widget chứa 3 children widgets là Center, Column và Text. Ta sẽ có được sơ đồ widget tree như sau:

    alt

2. BuildContext
  • BuildContext là tham chiếu đến vị trí của mỗi widget trên widget tree. Mỗi widget có 1 BuildContext thể hiện. Nếu 1 widget có các children widgets thì BuildContext của widget đó cũng sẽ là parent BuildContext của các children BuildContexts chứa trong nó. Điều đó có nghĩa chúng ta sẽ có một BuildContext tree.

    alt


* Bài viết có tham khảo của a Long25vn

Nhận xét

Bài đăng phổ biến từ blog này

Flutter 4.5 - Custom theme, font, image

Flutter 1.2 - Flutter Architecture

Flutter 2.5 - First App | Building a Widget Tree