A nice flutter swipe action cell

flutter swipe action cell

a package that can give you a cell that can be swiped ,effect is like ios native.

why do i want to create this lib?

swipe action

i like ios native ‘s swipe action ,but flutter doesn’t give an official widget .
so i try to create one.

get started with example

swipe action

tip:this widget should be put in the itembuilder of your listview

• example 1:simple delete the item in listview

(tip:there is a gif here,if it unable to load,please go to homepage)

 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)),
     ),
   );