Android application-Flutter implements silky sliding deletion, mobile sorting, etc.-Detailed explanation of Dismissible control

Introduction to Dismissible

Dismissible is a useful widget in Flutter for implementing slideable deletion or dragging operations. It is mainly used to provide an easy way to implement when the user performs a delete or drag operation on a list item or any other swipeable element.

scenes to be used

• List item deletion: Allows users to delete an item from a list using a swipe gesture.
• Swipe left or right: Provides a customizable background that displays when the user swipes left or right.
• Drag sorting: Can be used to implement drag sorting. When the user long presses and drags the list item, it can be dragged to a new position.
• Any scenario that requires sliding gestures: Suitable for any scenario that requires sliding gestures.

Common properties

• key (Key? key): The identifier of the widget. Usually the unique identifier of the data item is used as the key.

• child (Widget child): The wrapped widget can slide to delete or drag the content.

• onDismissed (void Function(DismissDirection direction)? onDismissed): Callback function called when the sliding operation is completed. The callback parameter direction represents the sliding direction and is a value of the DismissDirection enumeration.

• direction (DismissDirection direction): Defines the swipeable direction. The default is DismissDirection.horizontal, which is the horizontal direction. You can choose DismissDirection.vertical, DismissDirection.endToStart, DismissDirection.startToEnd, DismissDirection.up, DismissDirection.down.

• resizeDuration (Duration? resizeDuration): Controls the animation time for widget resizing. If set to null, animation is disabled and the widget will resize immediately. The default value is const Duration(milliseconds: 200).

• dismissThresholds (Map<DismissDirection, double>? dismissThresholds): Define the threshold for how far the slide triggers the onDismissed callback. The key is the DismissDirection enumeration value, and the value is a double type, indicating the sliding percentage. For example, { DismissDirection.endToStart: 0.5 } means that sliding more than 50% to the left triggers a callback.

• movementDuration (Duration? movementDuration): Defines the animation time for adjusting the widget's position. The default is const Duration(milliseconds: 200).

• crossAxisEndOffset (double crossAxisEndOffset): When direction is DismissDirection.horizontal, define the offset of the widget in the vertical axis direction. A positive value indicates a downward shift, a negative value indicates an upward shift. Default is 0.

• background (Widget? background): Defines the background displayed when dragging. Typically a button or icon that performs an action such as deletion.

• secondaryBackground (Widget? secondaryBackground): Defines a secondary background that displays when dragging, usually a button or icon used to perform other actions. This is the background displayed on the right when direction is DismissDirection.horizontal.

• confirmDismiss (Future Function(DismissDirection direction)? confirmDismiss): An optional callback function used to confirm whether to execute sliding delete or drag before actually executing it. If true is returned, the delete or drag operation is performed; if false is returned, the operation is canceled. The callback parameter direction represents the direction of sliding.

• dragStartBehavior (DragStartBehavior? dragStartBehavior): Defines how drag is handled when it starts. The default is DragStartBehavior.start.

• crossAxisStartDragOffset (double crossAxisStartDragOffset): Defines the offset to start dragging in the vertical axis direction. A positive value indicates a downward shift, a negative value indicates an upward shift. Default is 0.

• movementDurationVsCurrent} (bool? movementDurationVsCurrent): When handling sliding, if set to true, the size of the current widget will be used to calculate the distance moved, rather than the size before the widget was slid. Default is false.

These properties provide a lot of flexibility to customize the interaction effect of sliding to delete or dragging according to specific needs. When using, select the appropriate attributes for configuration according to the specific situation.

Basic usage examples

Dismissible(
  key: Key(item.id.toString()), // 唯一标识，通常使用数据项的唯一标识
  onDismissed: (direction) {
    
    
    // 在用户滑动时调用，可以在这里执行删除等操作
    // direction 表示滑动的方向，是DismissDirection的枚举值之一
    // DismissDirection.horizontal 表示水平滑动
    // DismissDirection.vertical 表示垂直滑动
    // DismissDirection.endToStart 表示从右向左滑动（LTR语言环境）
    // DismissDirection.startToEnd 表示从左向右滑动（LTR语言环境）
    // DismissDirection.up 表示从下向上滑动
    // DismissDirection.down 表示从上向下滑动
  },
  background: Container(
    color: Colors.red, // 右滑或左滑时显示的背景颜色
    child: Icon(Icons.delete),
  ),
  child: ListTile(
    title: Text(item.title),
    // 其他列表项的内容
  ),
);

In this example, Dismissible wraps a ListTile that represents an item in the list. When the user slides this item, the onDismissed callback will be triggered, and you can perform operations such as deletion here. The background attribute defines the background displayed when swiping right or left, which can include icons, text, etc.

Precautions

• The key is required and is usually used to uniquely identify the data item. This is used to uniquely identify the Dismissible to ensure correct deletion and sorting.
• In the onDismissed callback, you need to perform specific operations, such as deleting the corresponding item from the data list.
• The direction parameter indicates the direction of sliding and can be used to perform different operations according to different directions.
• The background attribute defines the background displayed when sliding, usually used to indicate deletion operations.
  Overall, Dismissible is a very useful widget that facilitates some common sliding gesture operations, especially for items in lists.

---

Conclusion Flutter is an open source UI toolkit developed by Google that allows you to create high-quality, beautiful applications on different platforms without writing a lot of platform-specific code. I will learn and delve into all aspects of Flutter. From basic knowledge to advanced techniques, from UI design to performance optimization, join us to discuss and learn together, and enter the wonderful world of Flutter together!