Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter package Slidable width

Tags:

flutter

dart

im using flutter_slidable: ^1.2.0 package how do i adjust the width of the SlidableAction ? and is it able to edit the radius? with BorderRadius.circular maybe

one more if i press the delete button i want to run dismiss animation function how ?

enter image description here

here is the full code

 for (var i = 0; i < c.noteList.length; i++)
                  Slidable(
                    key: ValueKey(
                      c.noteList[i]['id'],
                    ),
                    startActionPane: ActionPane(
                      motion: StretchMotion(),
                      dismissible: DismissiblePane(
                        onDismissed: () {
                          handleDeleteSet(
                            c.noteList[i]['id'],
                          );
                        },
                      ),
                      children: [
                        SlidableAction(
                          onPressed: (context) {},
                          backgroundColor: Colors.red,
                          foregroundColor: Colors.white,
                          icon: Icons.delete,
                          label: 'Delete',
                        ),
                      ],
                    ),
                    child: NoteTile(
                      index: i + 1,
                      item: c.noteList[i],
                      deleteItem: (id) {
                        handleDeleteSet(id);
                      },
                      onSaveData: () {
                        saveData();
                      },
                    ),
                  ),
like image 674
CCP Avatar asked Oct 30 '25 17:10

CCP


1 Answers

For editing the width of the slidable area, you should use the extentRatio parameter, which accepts a double value above 0 and below 1:

ActionPane(
    extentRatio: 0.7,
    motion: const ScrollMotion(),
    children: []
),

For the radius, just use a Container and decoration parameter:

ActionPane(
    extentRatio: 0.7,
    motion: const ScrollMotion(),
    children: [
      Container(
        height: 180,
        width: width(context, 60),
        decoration: BoxDecoration(
          color: Colors.transparent,
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(10),
            bottomLeft: Radius.circular(10),
          ),
        ),
      )
    ]
)
like image 86
Mikhail Dolmatov Avatar answered Nov 01 '25 12:11

Mikhail Dolmatov



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!