Tổng quan

Every thing is a widget.

Widget là gì?

Như Flutter có chia sẻ, mọi thứ với Flutter đều là Widget: Một đoạn text, một button, một hình ảnh, ... Widget được tổ chức theo cấu trúc dạng cây nên có thể chứa các widget con trong một widget.

Bên dưới là một ví dụ về một cây widget đơn giản:

Ví dụ về cây widget

MaterialApp(
  title: "Demo App",
  home: Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      child: Text(
        'You have pushed the button this many times:',
      ),
    ),
  ),
);

State

Là trạng thái của một đối tượng, có thể là trạng thái của widget hay mở rộng hơn là trạng thái của cả ứng dụng.

Ví dụ như trạng thái selected hay deselected đối với một widget checkbox:

Checkbox(
    value: _value,
    onChanged: (bool value) {
      setState(() => _value = value);
    },
)

Hay trạng thái ngôn ngữ của cả ứng dụng:

setState(() {
  appState.setLanguage('vn');
});

Với State, một đối tượng thay đổi thì các đối tượng liên quan cũng tự thay đổi theo. Sự thay đổi này diễn ra ngay lập tức và không cần bất cứ hành động kích hoạt sự kiện (event trigger) nào. Chính vì ưu điểm vô cùng lớn này mà xu hướng State này ngày càng phát triển mạnh mẽ hơn.

Sự thật là điều này đã có mặt trên các JavaScript frameworks nổi tiếng như Angular(JS), React, Vue hay Ember, còn trên mobile thì chỉ mới được phổ biến thông qua React Native và giờ là Flutter.

Widget thông dụng

Flutter cung cấp một bộ các widget mạnh mẽ, điển hình như:

Text: cho phép tạo và tùy chỉnh style của văn bản trên App.

 Text(
      message.body,
      style: TextStyle(
        fontSize: 16,
        fontFamily: 'OpenSansLight',
        color: Colors.white,
      ),
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
  ),

Row, Column: cho phép bạn tạo bố cục linh hoạt theo cả hai chiều ngang (Hàng) và dọc (Cột).

Row(                                                
  mainAxisAlignment: MainAxisAlignment.spaceEvenly, 
  children: [
    Image.asset('images/pic1.jpg'),
    Image.asset('images/pic2.jpg'),
    Image.asset('images/pic3.jpg'),
  ],
);

Stack: cho phép xếp các widget chồng lên nhau theo thứ tự và bố trí vị trí của chúng.

Container: cho phép tạo một khung chứa tương tự như thẻ div trong html. Có thể được tùy chỉnh với BoxDecoration như nền, viền, độ bóng,...

Tự tạo một widget

Ngoài những widget mà flutter cung cấp. Trong một dự án, ta thường tự tạo ra thêm một số widget để có thể dễ dàng sử dụng và thay đổi như: một thông báo, lịch, hay các button theo định dạng của ứng dụng.