flutter_swipe_action_cell 1.0.4+3

Flutter Android iOS web

An awesome UI package incluing iOS style cell swipe action effect.You can use this package to implement iOS style tableView cell swipe action

Language: English |中文简体

flutter_swipe_action_cell #

A package that can give you a cell that can be swiped ,effect is like iOS native

Get started #

pub home page click here: pub
install:
flutter_swipe_action_cell: ^1.0.4+2

Preview: #

Simple deletePerform first action when full swipe
Delete with animationMore than one action

Effect like WeChat(confirm delete) | -------- | |

Effect like WeChat(Adjust the width of button) | -------- | |

Example #

Tip:This widget should be put in the itemBuilder of your ListView

  • Example 1:Simple delete the item in ListView #

 SwipeActionCell(
      key: ObjectKey(list[index]),///this key is necessary
      actions: <SwipeAction>[
        SwipeAction(
            title: "delete",
            onTap: (CompletionHandler handler) async {
              list.removeAt(index);
              setState(() {});
            },
            color: Colors.red),
      ],
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text("this is index of ${list[index]}",
            style: TextStyle(fontSize: 40)),
      ),
    );
  • Example 2:Perform first action when full swipe #

 SwipeActionCell(
       ///this key is necessary
       key: ObjectKey(list[index]),
 
       ///this is the same as iOS native
       performsFirstActionWithFullSwipe: true,
       actions: <SwipeAction>[
         SwipeAction(
             title: "delete",
             onTap: (CompletionHandler handler) async {
               list.removeAt(index);
               setState(() {});
             },
             color: Colors.red),
       ],
       child: Padding(
         padding: const EdgeInsets.all(8.0),
         child: Text("this is index of ${list[index]}",
             style: TextStyle(fontSize: 40)),
       ),
     );
  • Example 3:Delete with animation #

SwipeActionCell(
      ///this key is necessary
      key: ObjectKey(list[index]),
      ///this name is the same as iOS native
      performsFirstActionWithFullSwipe: true,
      actions: <SwipeAction>[
        SwipeAction(
            title: "delete",
            onTap: (CompletionHandler handler) async {
              
              /// await handler(true) : will delete this row
              ///And after delete animation,setState will called to 
              /// sync your data source with your UI

              await handler(true);
              list.removeAt(index);
              setState(() {});
            },
            color: Colors.red),
      ],
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text("this is index of ${list[index]}",
            style: TextStyle(fontSize: 40)),
      ),
    );
  • Example 4:More than one action: #

SwipeActionCell(
      ///this key is necessary
      key: ObjectKey(list[index]),

      ///this name is the same as iOS native
      performsFirstActionWithFullSwipe: true,
      actions: <SwipeAction>[
        SwipeAction(
            title: "delete",
            onTap: (CompletionHandler handler) async {
              await handler(true);
              list.removeAt(index);
              setState(() {});
            },
            color: Colors.red),

        SwipeAction(
            widthSpace: 120,
            title: "popAlert",
            onTap: (CompletionHandler handler) async {
              ///false means that you just do nothing,it will close
              /// action buttons by default
              handler(false);
              showCupertinoDialog(
                  context: context,
                  builder: (c) {
                    return CupertinoAlertDialog(
                      title: Text('ok'),
                      actions: <Widget>[
                        CupertinoDialogAction(
                          child: Text('confirm'),
                          isDestructiveAction: true,
                          onPressed: () {
                            Navigator.pop(context);
                          },
                        ),
                      ],
                    );
                  });
            },
            color: Colors.orange),
      ],
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(
            "this is index of ${list[index]}",
            style: TextStyle(fontSize: 40)),
      ),
    );
  • Example 5:Delete like wechat message page(need to confirm it: #

return SwipeActionCell(
      ///this key is necessary
      key: ValueKey(list[index]),

      ///this is the same as iOS native
      performsFirstActionWithFullSwipe: true,
      actions: <SwipeAction>[
        SwipeAction(
          nestedAction: SwipeNestedAction(title: "确认删除"),
          title: "删除",
          onTap: (CompletionHandler handler) async {
            await handler(true);
            list.removeAt(index);
            setState(() {});
          },
          color: Colors.red,
        ),
        SwipeAction(
            title: "置顶",
            onTap: (CompletionHandler handler) async {
              ///false means that you just do nothing,it will close
              /// action buttons by default
              handler(false);
            },
            color: Colors.grey),
      ],
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text("this is index of ${list[index]}",
            style: TextStyle(fontSize: 40)),
      ),
    );

About CompletionHandler in onTap function of SwipeAction #

it means how you want control this cell after you tap it. If you don't want any animation,just don't call it and update your data and UI with setState()

If you want some animation:

  • handler(true) : Means this row will be deleted(You should call setState after it)

  • await handler(true) : Means that you will await the animation to complete(you should call setState after it so that you will get an animation)

  • handler(false) : means it will not delete this row.By default,it just close this cell's action buttons.

  • await handler(false) : means it will wait the close animation to complete.

About all parameter: #

I wrote them in my code with dart doc comments.You can read them in source code.

2
likes
110
pub points
47%
popularity

An awesome UI package incluing iOS style cell swipe action effect.You can use this package to implement iOS style tableView cell swipe action

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

2539699336@qq.com

License

Apache 2.0 (LICENSE)

Dependencies

event_bus, flutter

More

Packages that depend on flutter_swipe_action_cell