, December 04, 2022

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

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

Trong series này, chúng ta sẽ cùng nhau thực hiện ứng dụng Travel App với một bản UI Design vô cùng đẹp mắt, thu hút có sẵn....

Flutter Tutorial 2022: Giới thiệu Flutter Travel App
So sánh StatelessWidget và StatefulWidget

Trong bài viết này, các bạn sẽ có cái nhìn tổng quát về hai loại widget lớn nhất là StatelessWidget và StatefulWidget....

So sánh StatelessWidget và StatefulWidget
Tổng hợp các Shortcuts, Extensions & Settings trong VSCode khi lập trình Flutter

Trong bài viết này, mình sẽ liệt kê cho bạn các shortcuts, extensions, setting mà bạn nên sử dụng để lập trình Flutter hàng ngày....

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

VS Code là 1 text editor tuyệt vời được phát triển bởi Mircosoft. Đây là một trong các công cụ được developer trên toàn thế giới yêu thích vì sự tiện lợi, dễ dùng và nó chứa hàng ngàn, thậm chí trăm ngàn các extension phục vụ cho bạn trong quá trình bạn phát triển phần mềm....

[Phần 1] Những extension cần thiết khi làm việc với Flutter trên VS Code
Fix lỗi Flutter 3 không thể build app trên iOS

Cách fix lỗi Flutter 3 không thể build và run được app trên iOS với video hướng dẫn chia tiết...

Fix lỗi Flutter 3 không thể build app trên iOS
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.