Widgets trong Flutter

Khi học flutter, bạn sẽ thường nghe: “everything is a widget”. Thật vậy, trên ứng dụng Flutter việc thiết kế giao diện chủ yếu là widgets và sắp xếp bố cục các widgets đó một các hợp lý. Và các widgets chỉ là các class Dart dùng để mô tả và xử lý dữ liệu của ứng dụng. Trong bài này, chúng ta cùng tìm hiểu về Widgets trong Flutter.

Built in Widgets

Counter app là ứng dụng được build tự động khi chúng ta bắt đầu một new Flutter project. Mọi thứ trên màn hình đó đều được tích hợp sẵn trong Flutter.

Flutter cung cấp một số widget mà chúng ta, các nhà phát triển Flutter, sẽ kết hợp để tạo ra các widget tùy chỉnh và giao diện người dùng mạnh mẽ. Đây chỉ là một số widget cơ bản nhất được tích hợp sẵn trong Flutter, được phân tách theo cách sử dụng của chúng:

• Layout—Row, Column, Scaffold, Stack
• Structures—Button, Toast, MenuDrawer
• Styles—TextStyle, Color
• Animations—FadeInPhoto, transformations
• Positioning and alignment—Center, Padding

Writing a widget in code

Hầu hết code Flutter bạn viết sẽ tạo ra các widgets tùy chỉnh. Widget chỉ là một class Dart extend từ một Widget class. Giả sử bạn muốn tạo một button với kiểu dáng tùy chỉnh. Đây là cách bạn định nghĩa một class:

class AlertButton extends StatelessWidget {
  // class members
}

Class `StatelessWidget` là một widget cơ bản nhất và là class bạn sẽ sử dụng thường xuyên nhất. Chúng tôi sẽ đề cập đến các loại widget khác nhau sau.

Khi tạo widget, có một yêu cầu được thực thi bởi class widget cha. Nó phải có một phương thức build. Phương thức này phải trả về các widget khác. Đó là phương pháp bạn sử dụng để tổng hợp các widget với nhau để tạo giao diện người dùng.

Ví dụ:

class AlertButton extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      color: Colors.red,
      child: Text("Alert!")
    );
  } 
}

Khác với phương thức build, Widget cũng giống như bất kỳ lớp Dart nào khác. Bạn có thể thêm các phương thức và thuộc tính vào các widget class.

class AlertButton extends StatelessWidget {
  // a property on this class
  final String text;

  // a constructor for this class
  AlertButton(this.text);

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      color: Colors.red,
      child: Text(text), // use the text passed in to the constructor.
    );
  } 
}