Nguồn tham khảo : Học Flutter từ cơ bản đến nâng cao

1. StatelessWidget và StatefulWidget
  • StatelessWidget : Dùng để hiển thị view tĩnh, không thay đổi giá trị.
  • StatefulWidget : Dùng để hiển thị view động, có thể thay đổi giá trị

Vòng đời của widget :

a

2. BuildContext
  • Hàm build của widget có một tham số là BuildContext, đó đại diện cho parent của Widget trên WidgetTree
    • Ví dụ : FloatingActionButton có cha là MyButtonWidget, MyButtonWidget có cha là Scaffold.

s

3. InheritedWidget

  • Widget này dùng để lưu trữ data cho các child của nó.

  • Các child truy xuất data của InheritedWidget bằng cách :

    //Viết một hàm static tên of. 
static MyInheritedWidget? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();
}

  • updateShouldNotify : Nên set là true, để chỉ các child phụ thuộc vào InheritedWidget mới bị rebuild. Các child được gọi là phụ phuộc nếu nó có dùng hàm context.dependOnInheritedWidgetOfExactType() để lấy data từ InheritedWidget

`

4. Cách hoạt động của Flutter

s

  • Có 3 khái niệm chúng ta cần quan tâm : Widget, Element, RenderObject
    • Widget : Được xem như Bản thiết kế
    • Element : Được xem như một khung vẽ
    • RenderObject : Được xem như Bút vẽ, vẽ những gì bản thiết kế mô tả lên khung vẻ
  • Tương ứng với Widget, Element, RenderObject cũng sẽ có 3 cây : WidgetTree, ElementTree, RenderObjectTree
  • Note : Bút vẽ thực hiện vẽ lên khung vẽ dựa vào bản thiết kế.
  • Phân tích :
    • Elemenet sẽ giữ một Widget (nghĩa là Elemenet có một thuộc tính là widget)
    • Element cũng sẽ nắm giữ RenderObject
    • Element có thể bỏ giữ Widget hiện tại để giữ Widget khác cùng loại để tối ưu peformace
      • Ví dụ : Ta có thể tái sử dụng khung vẽ để vẽ một bản thiết kế khác, không cần thiết phải mua khung vẽ mới tốn tiền =)). Khung vẽ này loại xịn có thể xoá nha cái cũ để vẽ cái mới nhưng hạn chế là cùng loại thiết kế mới được.
  • Cách mà Element được tái sử dụng, khi mỗi lần rebuild flutter sẽ làm các bước sau :
    • Trên Element Tree, ElementA đang nằm phè phỡ thì nó nhận nó một NewWidget
    • Giờ nó đi so sánh với OldWidget mà nó đang giữ, nếu cùng loại thì ElementA sẽ bỏ OldWidget mà giữ NewWiget
    • Nếu khác loại, thì ElementA sẽ bị đuổi khỏi vị trí trong ElementTree , hàm deactive() được gọi.
    • Lúc này, ElementA sẽ chờ đợi, và nó sẽ được tái sử dụng trong các trường hợp :
      • ElementTree thêm vị trí mới, mà loại widget này cùng loại với OldWidget mà ElementA đang nắm giữ
      • Tại vị trí khác trên ElementTree, có một ElementX nào cũng bị đuổi, lúc này ElementA sẽ thay thế nếu NewWiget tại vị trí đó cùng loại với ElementA
      • Hàm didUpdateWidget sẽ được gọi
    • Trường hợp nó không được tái sử dụng, ElementA sẽ bị huỷ
      • Hàm deactive, dispose() sẽ được gọi.
    • NOTE : Ngoài so sánh với Type của Widget, trường hợp Widget có set Key, thì Element sẽ so sanh thêm giá trị Key nữa. (Các mục sau sẽ nói Key là gì)
5. Key
  • Dùng để định danh widget.
  • Có 2 loại : Local Key, Gobal Key Key, tác động đến cách flutter làm việc :
  • Mục số 4, nhắc đến việc một Element được tại sử dụng khi nào ?, bằng việc so sánh NewWidget và OldWidget có cùng loại ?. Nếu widget có thêm key để định danh thì Element sẽ so sánh thêm giá trị key này nữa.