Gesture là cách chính mà người dùng tương tác với ứng dụng điện thoại (hoặc bất cứ thiết bị cảm ứng khác) . Gesture được định nghĩa như là các hành động vật lý / chuyển động của một người dùng nhằm mục đích kích hoạt một điều khiển của thiết bị di động. Gesture là những thứ đơn giản như chạm nhẹ vào màn hình của thiết bị di động đến những thứ phức tạp hơn được sử dụng trong ứng dụng game.
Gestures trong flutter là gì?
Trong Flutter, “gestures” (cử chỉ) là các hành động được thực hiện bởi người dùng trên màn hình cảm ứng, chẳng hạn như nhấn, vuốt, kéo thả, chạm và nhấn giữ. Flutter cung cấp các widget Gesture Detector, GestureDetector và các hàm callback để xử lý các cử chỉ này.
Widget Gesture Detector là một widget dùng để bao bọc các widget khác và cho phép người dùng tương tác với các widget đó bằng cách sử dụng các cử chỉ. Widget GestureDetector cũng giống như Gesture Detector, nhưng nó được sử dụng để bắt các cử chỉ trên một widget cụ thể thay vì bao bọc các widget khác.
Flutter cũng cung cấp một số hàm callback để xử lý các cử chỉ như onTap, onDoubleTap, onLongPress, onVerticalDragStart, onHorizontalDragUpdate, và nhiều hơn nữa. Bằng cách sử dụng các hàm callback này, bạn có thể thực hiện các hành động tương ứng với từng cử chỉ được thực hiện bởi người dùng trên màn hình cảm ứng.
Các bài viết liên quan:
Các loại gestures được sử dụng rộng rãi nhất là:
- Tap – chạm vào bề mặt của ứng dụng bằng đầu ngón tay với khoảng thời gian ngắn và thả ngón tay ra.
- Double Tap – chạm vào bề mặt 2 lần trong thời gian ngắn.
- Drag – chạm vào bề mặt của ứng dụng và di chuyển đầu ngón tay một cách ổn định.
- Flick – Như di chuyển Drag nhưng ta thực hiện nhanh hơn
- Pinch – dùng 2 ngón tay để kéo bề mặt của thiết bị
- Spread/Zoom – ngược lại với pinch
- Panning – chạm vào bề mặt của thiết bị với đầu ngon tay và kéo nó đến bất kỳ hướng nào mà không thả đầu ngón tay ra
Flutter cung cấp một sử hỗ trợ tuyệt vời cho tất cả các loại gesture thông qua widget độc lập của nó là GestureDetector. GestureDetector là một widget non-visual được sử dụng chính cho việc tìm các thao tác của người dùng. Để xác định một thao tác được nhắm tới trong widget, widget có thể được đặt bên trong widget GestureDetector. GestureDetector sẽ bắt chuyển động và điều phối các sự kiện dựa trên chuyển động đó.
Sau đây là các loại action và các event của gestures:
- Tap
- onTapDown
- onTapUp
- onTap
- onTapCancel
- Double tap
- onDoubleTap
- Long press
- onLongPress
- Vertical drag
- onVerticalDragStart
- onVerticalDragUpdate
- onVerticalDragEnd
- Horizontal drag
- onHorizontalDragStart
- onHorizontalDragUpdate
- onHorizontalDragEnd
- Pan
- onPanStart
- onPanUpdate
- onPanEnd
Giờ thì chúng ta hã cùng nhau điều chỉnh lại ứng dụng hello world này để sử dụng chức năng bắt chuyển động và cố gắng hiểu hơn về khái niệm này
Đổi code trong thuộc tính body của widget MyHomePage như sau:
- Theo quan sát thì chúng ta đã đặt widget GestureDetector bên trên widget Text trong phân cấp các widget. nó sẽ bắt sự kiện onTap và cuối cùng sẽ hiển thị với chúng ta màn hình hộp thoại.
- Ta sẽ tạo sử dụng hàm _showDialog để hiển thị một hộp thoại khi người dùng chạm vào thông điệp hello world đó, nó sử dụng widget showDialog và AlertDialog để tạo một widget hộp thoại mới. Đoạn đó sẽ code như sau:
- Giờ thì ta chỉ cần chạy lại ứng dụng hoặc sử dụng chức năng Hot Reload để chạy lại ứng dụng, Và sau khi ứng dụng đã chạy ta chỉ cần đơn giản là chạm vào chữ hello world thì hộp thoại như thế này sẽ hiện ra:
Vậy là ta đã sử dụng thành công widget GestureDetector, ngoài ra thì Flutter còn cung cấp cơ chế dò chuyển động thông qua widget Listener.
Nó sẽ dò các thao tác người dùng và điều hướng đến các sự kiện như sau:
- PointerDownEvent
- PointerMoveEvent
- PointerUpEvent
- PointerCancelEvent
Ngoài ra Flutter còn cung cấp một lượng nhỏ các widget có thể làm những điều như các thao tác nâng cao.
Các widget ấy sẽ được liệt kê dưới đây:
- Dismissble – hỗ trợ thao tác flick nhằm bỏ qua một widget.
- Draggable – hỗ trợ thao tác kéo để di chuyển một widget.
- LongPressDragable – hỗ trợ thao tác kéo để di chuyển một widget, khi mà widget gốc của nó cũng là dragable.
- DragTarget – chấp nhận bất cứ widget Draggable .
- IgnorePointer – ẩn widget và con của nó từ bộ xử lý dò chuyển động.
- AbsorbPointer – dừng chính bộ xử lý dò chuyển động của nó và bất cứ widget nào có liên kết với nó đều bị dừng hết, nên sẽ không có bất cứ sự kiện nào được gọi.
- Scrollable – hỗ trợ cuộn nội dung có bên trong widget.
Cách dectect một Gestures trong flutter
Để phát hiện các cử chỉ (gestures) trong Flutter, bạn có thể sử dụng một số widget và hàm callback như sau:
- Sử dụng widget GestureDetector để bắt các cử chỉ trên một widget cụ thể. Ví dụ:
GestureDetector(
onTap: () {
// Thực hiện hành động khi người dùng tap trên widget
},
onDoubleTap: () {
// Thực hiện hành động khi người dùng double tap trên widget
},
onLongPress: () {
// Thực hiện hành động khi người dùng giữ lâu trên widget
},
onVerticalDragStart: (details) {
// Thực hiện hành động khi người dùng bắt đầu kéo widget theo trục dọc
},
onHorizontalDragUpdate: (details) {
// Thực hiện hành động khi người dùng kéo widget theo trục ngang
},
child: // Widget muốn bắt cử chỉ,
);- Sử dụng widget GestureDetector cùng với các hàm callback để xử lý các cử chỉ:
void onTapFunction() {
// Thực hiện hành động khi người dùng tap trên widget
}
void onDoubleTapFunction() {
// Thực hiện hành động khi người dùng double tap trên widget
}
GestureDetector(
onTap: onTapFunction,
onDoubleTap: onDoubleTapFunction,
child: // Widget muốn bắt cử chỉ,
);- Sử dụng widget InkWell để thực hiện các hành động khi người dùng tap hoặc long press trên widget. Ví dụ:
InkWell(
onTap: () {
// Thực hiện hành động khi người dùng tap trên widget
},
onLongPress: () {
// Thực hiện hành động khi người dùng giữ lâu trên widget
},
child: // Widget muốn bắt cử chỉ,
);- Sử dụng widget Listener để bắt tất cả các sự kiện (events) trên một widget, bao gồm cả các cử chỉ. Ví dụ:
Listener(
onPointerDown: (details) {
// Thực hiện hành động khi người dùng bắt đầu cử chỉ trên widget
},
onPointerUp: (details) {
// Thực hiện hành động khi người dùng kết thúc cử chỉ trên widget
},
onPointerMove: (details) {
// Thực hiện hành động khi người dùng di chuyển cử chỉ trên widget
},
child: // Widget muốn bắt cử chỉ,
);Các hàm callback khác như onVerticalDragEnd, onHorizontalDragEnd, onScaleStart, onScaleUpdate, onScaleEnd cũng được cung cấp để xử lý các cử chỉ khác.
