9 Flutter Widget hữu ích bạn cần biết

Thông thạo các Flutter Widget là bước đầu tiên để sử dụng framework này. Cùng 200Lab Blog cập nhật các Widget trên Flutter mà mọi "newbie" cần biết nhé!

Bạn biết đó, mọi thứ trong Flutter đều là Widget. Vì vậy, bạn phải có kiến thức thông thạo về các Widget trong Flutter để sử dụng cho hiệu quả. Trong bài viết này, tôi sẽ giải thích các chức năng, thuộc tính và cách sử dụng của từng Widget với các ví dụ đơn giản.

Bạn có thể dễ dàng nâng cao kiến thức về các Widget này, tiến gần hơn đến mục tiêu trở thành một lập trình viên Flutter xuất sắc. Bài viết này chắc chắn sẽ giúp ích cho bạn. Tôi sẽ giải thích về những Widget được tích hợp sẵn với Flutter SDK.

1. Container Widget Flutter

Bạn muốn Widget nào đó có màu nền (background color), hoặc hình dạng khác (ví dụ hình tròn, hình vuông, hình chữ nhật), hay là một kích thước cố định? Hãy thử Container Widget. Widget này không những giúp bạn styling Widget mà còn cố định các child Widget bên trong nó. Tuy nhiên, nếu bạn chỉ bọc Container Widget thôi mà không thêm bất kỳ thông số nào, bạn sẽ không thấy bất kỳ sự thay đổi nào. Do đó, bạn nên sử dụng ít nhất một trong các thuộc tính sau của nó.

Container({
  Key key,
  this.alignment,
  this.padding,
  this.color,
  this.decoration,
  this.foregroundDecoration,
  double width,
  double height,
  BoxConstraints constraints,
  this.margin,
  this.transform,
  this.child,
  this.clipBehavior = Clip.none,
})

2. SelectableText Widget Flutter

Nếu bạn muốn hiển thị một văn bản bất kỳ và có thêm những option khác như Select (chọn), Copy đoạn văn bản đó thì SelectableText Widget chính là thứ bạn cần. SelectableText có tất cả các thuộc tính trong Text Widget. Vì vậy, bạn có thể trang trí văn bản bằng cách sử dụng phông chữ, màu sắc, v.v.

Ngoài ra, bạn có thể hiển thị nơi lựa chọn bắt đầu bằng tham số showCursor. Tùy chỉnh giao diện của con trỏ bằng cách sử dụng các tham số cursorWidth, cursorRadius, cursorColor. Để chỉ định những hành động nào được cho phép khi chọn văn bản, hãy sử dụng tùy chọn toolbar. Theo mặc định, bạn có thể chọn và sao chép nó. Bạn có thể thêm một trình xử lý onTap để phản hồi với cả cử chỉ khi nhấn vào đoạn văn bản đó.

child: SelectableText(
  '10 Flutter Widgets you must know as a Flutter Developer',
  style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold, fontSize: 20),
  textAlign: TextAlign.center,
  showCursor: true,
  cursorWidth: 2,
  cursorColor: Colors.black,
  cursorRadius: Radius.circular(2),
),

3. DataTable Widget

Bạn có muốn hiển thị các dữ liệu quan trọng theo dạng Table để người dùng xem không? Nếu có thì bạn hãy dùng DataTable Widget được build sẵn trong Flutter nhé! Widget này cho phép tạo một bảng tự động định size (kích thước) các cột của nó, theo dữ liệu trong ô. Bạn có thể xem ví dụ bên dưới.

DataTable(
  columns: [
    DataColumn(label: Text('IndexNo')),
    DataColumn(label: Text('Name')),
    DataColumn(label: Text('Result')),
  ],
  rows: [
    DataRow(cells: [
      DataCell(Text('1')),
      DataCell(Text('Ashley')),
      DataCell(Text('A')),
    ]),
    DataRow(cells: [
      DataCell(Text('2')),
      DataCell(Text('John')),
      DataCell(Text('B-')),

    ]),
    DataRow(cells: [
      DataCell(Text('3')),
      DataCell(Text('Tony')),
      DataCell(Text('A')),
    ]),
  ],
),

Bạn có thể sử dụng các thuộc tính sau.

({
  Key key,
  @required this.columns,
  this.sortColumnIndex,
  this.sortAscending = true,
  this.onSelectAll,
  this.dataRowColor,
  this.dataRowHeight,
  this.dataTextStyle,
  this.headingRowColor,
  this.headingRowHeight,
  this.headingTextStyle,
  this.horizontalMargin,
  this.columnSpacing,
  this.showCheckboxColumn = true,
  this.showBottomBorder = false,
  this.dividerThickness,
  @required this.rows,
})

4. Slider Widget

Bạn có thể chọn một giá trị bất kỳ trong một khoảng cho trước (bao gồm giá trị min và max) bằng cách sử dụng Slider Widget. Slider Widget cho phép bạn chọn một giá trị duy nhất trong một khoảng. Hàm onChange giúp bạn nhận được giá trị mới, cụ thể bên dưới là biến newValue bất cứ khi nào người dùng drag đến vị trí nào trong Slider. Sử dụng các division parameter để set số điểm mà slider sẽ bám vào. Thiết lập label parameter sẽ hiển thị một label phía trên slider trong khi nó đang được kéo. RangeSlider Widget sử dụng để chọn hai giá trị của khoảng ô.

Slider(
  value: _initvalue.toDouble(),
  min: 1.0,
  max: 10.0,
  divisions: 10,
  activeColor: Colors.green,
  inactiveColor: Colors.orange,
  label: 'Set value',
  onChanged: (double newValue) {
    setState(() {
      _initvalue = newValue.round();
    });
  },
)

5. AlertDialog Widget

Ứng dụng của bạn có state mà người dùng cần đưa ra quyết định không? Bạn có muốn cảnh báo ai đó về điều gì không? Hoặc có thể nhận thông tin đầu vào của người dùng ? Hãy thử sử dụng AlertDialog Widget. Tùy thuộc vào thiết kế giao diện người dùng, bạn có thể tùy chỉnh nó.

AlertDialog(
  title: new Text('Confirm Exit...!!!'),
  actions: <Widget>[
    FlatButton(
      child: Text(
        "Yes",
        style: Theme.of(context)
            .textTheme
            .caption
            .copyWith(fontWeight: FontWeight.w600, color: Colors.blue),
      ),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
    FlatButton(
      child: Text(
        "No",
        style: Theme.of(context)
            .textTheme
            .caption
            .copyWith(fontWeight: FontWeight.w600, color: Colors.blue),
      ),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
  ],
);

6. DraggableScrollableSheet Widget

Nếu bạn muốn một Widget có đồng thời 2 chức năng sau: vừa có thể swipe từ dưới lên trên để xem nội dung và scroll để đọc nội dung trong danh sách khi nội dung xuất hiện vượt qua khoảng maximum height mà mình quy định. Chà nghe có vẻ khó và phức tạp khi tự tạo ra Widget này nhỉ? Nhưng không thành vấn đề vì Flutter đã build sẵn cho chúng ta - DraggableScrollableSheet Widget.

Đầu tiên, bạn phải cung cấp tham số builder để dựng UI. Builder sẽ trả về một Widget có thể scroll được như ListView. Đồng thời, bạn cũng có thể chỉ định kích thước min và max của Widget này. Hãy tìm hiểu thêm với ví dụ sau.

DraggableScrollableSheet(
  builder: (BuildContext context, ScrollController scrollController){
    return Container(
      color: Colors.white,
      child: ListView.builder(
          controller: scrollController,
          itemCount: 20,
          itemBuilder: (BuildContext context, int index){
            return ListTile(title : Text('Item $index'),);
          }),
    );
  },
)

7. ColorFiltered Widget

Trong Flutter, bạn có thể dễ dàng thay đổi màu sắc của hầu hết các Widget. Nhưng đôi khi có một số Widget bạn không thể làm điều này, ví dụ bạn muốn thay đổi màu sắc của một hình ảnh bất kỳ thì sao? Bọc tấm ảnh đó với Container Widget không giúp bạn thực hiện được điều mình muốn. Khi đó, bạn hãy sử dụng ColorFiltered widget nhé! Bạn có thể thử với các bộ lọc màu khác nhau mà mình mong muốn. Dưới đây là ví dụ đơn giản để trộn màu đỏ vào hình ảnh.

ColorFiltered(
  colorFilter:  ColorFilter.mode(Colors.red, BlendMode.colorBurn),
  child: Image.asset('assets/GEOA.png'),
),

8. ToggleButtons Widget

Nếu bạn muốn người dùng chỉ được chọn 1 option duy nhất trong số các option mà bạn đưa ra, hệt như việc chọn 1 đáp án khi thi trắc nghiệm vậy đấy. Vậy thì ToggleButtons Widget trong Flutter sẽ đáp ứng được yêu cầu của bạn. Để tạo ra các toggle button, hãy cung cấp danh sách các Widget bạn muốn sử dụng cho tập hợp các button này. Đặt tham số isSelected, tham số này chứa một danh sách các boolean có cùng độ dài với danh sách widget của bạn. Nó dùng để kiểm soát các button được chọn. Chúng ta kiểm soát những button được chọn bằng một biến bên trong stateful Widget. Cuối cùng, sử dụng hàm onPressed để phản hồi giá trị mới khi người dùng chọn một button bất kỳ. Ngoài ra, bạn có thể tùy chỉnh nhiều hơn và nhiều hơn nữa.

List<bool> _isSelected = [false, true, false];
ToggleButtons(
  children: <Widget>[
    Icon(Icons.highlight_rounded),
    Icon(Icons.bluetooth),
    Icon(Icons.wifi),
  ],
  isSelected: _isSelected,
  onPressed: (int index) {
    setState(() {
      _isSelected[index] = !_isSelected[index];
    });
  },
),

9. DefaultTabController & TabBar Widget

Các ứng dụng hiện nay thường sử dụng chế độ xem nội dung theo từng tab, một điều khá phổ biến để phân loại nội dung của bạn trong 1 màn hình bất kỳ. Chúng ta có thể làm được điều này trong Flutter với các widget DefaultTabController, TabBar và TabBarView.

Có hai cách để sử dụng và điều khiển các Tab, một là bạn sử dụng tab controller, hai là dùng DefaultTabController. Sau đó, hãy tạo Tab Widget cho riêng bạn để người dùng có thể sử dụng chuyển đổi qua lại các Tab để xem nội dung tương ứng. Cuối cùng, việc còn lại là thêm nội dung tương ứng với từng Tab.

Kết luận về các Widget trong Flutter

Trong thế giới của Flutter, widget chính là những viên gạch xây dựng cho giao diện người dùng của bạn. Cách sử dụng widget khá tương đồng với việc xếp các khối Lego lại với nhau. Tưởng tượng bạn có thể sáng tạo bằng cách kết hợp chúng để tạo nên một tác phẩm độc đáo.

Việc hiểu rõ về widget đóng một vai trò rất quan trọng, giúp bạn quản lý trạng thái, thực hiện các hiệu ứng tinh tế và tối ưu hóa ứng dụng Flutter của mình. Vì vậy, sự am hiểu về các widget trong Flutter sẽ là chìa khóa giúp bạn xây dựng giao diện người dùng một cách dễ dàng và hiệu quả hơn. Đừng ngần ngại khám phá thêm về các widget trong Flutter qua tài liệu và khóa học trực tuyến.

Nếu bạn đang theo đuổi ước mơ trở thành nhà lập trình Flutter. Hãy theo dõi trang Blog về Lập trình và Công nghệ của 200Lab để thu thập thêm nhiều kiến thức hữu ích nhé!

Dưới đây là một vài bài viết về Flutter có thể bạn sẽ thích:

Dart là gì? Giới thiệu cơ bản về ngôn ngữ lập trình Dart

Flutter là gì? Vì sao nên học công cụ lập trình Flutter?

Flutter cơ bản: Widget Tree, Element Tree & Render Tree

Flutter Tutorial 2022: Giới thiệu Flutter Travel App

So sánh StatelessWidget và StatefulWidget

Tổng hợp các Shortcuts, Extensions & Settings trong VSCode khi lập trình Flutter

[Phần 1] Những extension cần thiết khi làm việc với Flutter trên VS Code