Flutter Slidable | Swipe list item to edit or delete in flutter ~ Quick solution with full code in Flutter (Dart)

Swipe list item to edit or delete in flutter

You need to add to your pubspec.yaml file

flutter_slidable: ^0.5.4

Import the following package

import 'package:flutter_slidable/flutter_slidable.dart';

Slidable-

We need to create Slidable constructor and passing actions.

actionPane-

Defines the body part which we will swipe either left or right.

actions-

Actions may have multiple items which shows when swipe left to right.

secondaryActions-

SecondaryActions may aslo have multiple items which shows when swipe right to left.

Slidable(
      actionPane: SlidableDrawerDismissal(),
          child:

          ),
      actions: <Widget>[

          ],
      secondaryActions: <Widget>[

          ],
      )
);

Simple list example to show how left and right swipes works.

class SwipeList extends StatefulWidget {
@override
_SwipeListState createState() => _SwipeListState();
}

class _SwipeListState extends State<SwipeList> {

@override
Widget build(BuildContext context) {

    final roomDevicesListView=Container(
      margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
      child: ListView.builder(
        itemBuilder: (context, index) => ListItem(),
        itemCount: 10,
      ),
    );

    return Scaffold(
        appBar: AppBar(
          title: Text('Title'),
          centerTitle: true,
          backgroundColor: AppTheme.appBarColor,
        ),

        body: Container(
          decoration: AppTheme.bodyColor,
          child: roomDevicesListView,
        ),
    );
}
}

Need to add some more functionality on list row to achieve this-

class ListItem extends StatefulWidget {
@override
RoomEditDeleteItemState createState() => RoomEditDeleteItemState();
}

class RoomEditDeleteItemState extends State<ListItem> {
@override
Widget build(BuildContext context) {

    showEditDialog() {
      CommonUtils.showToast(context, 'Edit action');
    }

    showDeleteDialog() {
      CommonUtils.showToast(context, "Delete Action");
    }

    return InkWell(
        child: Slidable(
          actionPane: SlidableDrawerDismissal(),
          child: Center(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Card(
                    child: ListTile(
                        title: Text('List Item'),
                      ),
                  )
                ],
              ),
          ),
          actions: <Widget>[
            Container(
              padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
              child: IconSlideAction(
                caption: 'Edit',
                color: Colors.indigo,
                icon: Icons.edit,
                onTap: () {
                  showEditDialog();
                },
              ),
            )
          ],
          secondaryActions: <Widget>[
            Container(
                padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
                child: IconSlideAction(
                  caption: 'Delete',
                  color: Colors.red,
                  icon: Icons.delete,
                  onTap: () {
                    showDeleteDialog();
                  },
                )),
          ],
        ));
}
}