, October 26, 2021

0 kết quả được tìm thấy

9 Flutter Widgets mà bạn cần phải biết

  • Đăng bởi  Kieu Hoa
  •  Aug 11, 2021

  •   8 min reads
9 Flutter Widgets mà bạn cần phải biết

Chào mừng bạn đến với bài viết chia sẻ kiến thức về Flutter. 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, nếu bạn hy vọng có thể 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

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,
})
Ví dụ về Container Widget

2. SelectableText Widget

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),
),
Hình ảnh: SelectableText Widget

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();
    });
  },
)
Ví dụ về Slider Widget

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();
      },
    ),
  ],
);
Ví dụ về AlertDialog Widget 

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'),);
          }),
    );
  },
)
Ví dụ về DraggableScrollableSheet widget

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'),
),
Ví dụ về ColorFiltered Widget 

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];
    });
  },
),
Ví dụ về ToggleButtons Widget 

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, TabBarTabBarView.

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.

Ví dụ về TabBarView Widget

Tóm lại

Bài viết này cung cấp cho bạn 9 Widget Flutter mà bạn nên biết. Tôi hy vọng bạn sẽ sử dụng chúng trong dự án Flutter tiếp theo của mình.

Happy Coding !!!! Bạn có thấy bài viết này hữu ích không? Vui lòng cho 200Lab biết nhé! :)

Bài viết được dịch từ đây.

Bài viết liên quan

[FREE EBOOK] TIPS & TRICKS GIÚP X3 TỐC ĐỘ CODE FLUTTER CỦA BẠN

Cuốn ebook "TIPS & TRICKS GIÚP X3 TỐC ĐỘ CODE FLUTTER CỦA BẠN" chỉ ra 32 trường hợp giúp bạn code nhanh hơn so với việc code thông thường...

[FREE EBOOK] TIPS & TRICKS GIÚP X3 TỐC ĐỘ CODE FLUTTER CỦA BẠN
Flutter 2.5 có gì mới?

Bản phát hành Flutter 2.5 lần này có rất nhiều bản cập nhật mới thú vị. Cùng bắt đầu tìm hiểu trong bài viết này nhé!...

Flutter 2.5 có gì mới?
Tìm hiểu Flutter Opacity Widget qua ví dụ cơ bản

Bài viết sau sẽ giới thiệu một cách tổng quan về Opacity widget và cung cấp đoạn code để bạn có thể tự thực hành thông qua những ví dụ cơ bản....

Tìm hiểu Flutter Opacity Widget qua ví dụ cơ bản
Flutter Tutorial 2021 #34 - Hướng dẫn tạo hiệu ứng "fancy" khi chuyển màn hình

Thêm một hiệu ứng mới nữa mà các bạn sẽ được giới thiệu tới! Đó chính là hiệu ứng "fancy" khi chuyển màn hình. Hiệu ứng này sẽ giúp tăng trải nghiệm và gây ấn tượng cực mạnh với người dùng....

Flutter Tutorial 2021 #34 - Hướng dẫn tạo hiệu ứng "fancy" khi chuyển màn hình
Flutter Tutorial 2021 #33 - "Giao tiếp" giữa 2 màn hình bất kỳ trong Flutter

Làm sao để giao tiếp 2 hoặc 3, 4 màn hình trong app với nhau? Chúng ta cùng xem video bên dưới để hiểu được cách truyền dữ liệu từ màn hình A sang màn hình B và ngược lại nhé!...

Flutter Tutorial 2021 #33 - "Giao tiếp" giữa 2 màn hình bất kỳ trong Flutter
You've successfully subscribed to 200Lab Blog
Great! Next, complete checkout for full access to 200Lab Blog
Xin chào mừng bạn đã quay trở lại
OK! Tài khoản của bạn đã kích hoạt thành công.
Success! Your billing info is updated.
Billing info update failed.
Your link has expired.