Flutter Slidable round

user_10500942 0
Viewed 274

I am using Slidable from flutter_slidable package .I want to give my action at my Slidable a rounding. How to do that exactly ?

My Code:

          return Slidable(
                    key: Key(packlists[index].toString()),
                    endActionPane: ActionPane(
                      motion: BehindMotion(),
                      children: [
                        SlidableAction(
                          flex: 2,
                          onPressed: null,
                          backgroundColor: Color(0xFF7BC043),
                          foregroundColor: Colors.white,
                          icon: Icons.delete,
                          label: 'Löschen',
                        ),
                      ],
                    ),
                    child: PackListCard(
                      title: 'Packliste',
                      subtitle: DateFormat.yMMMMd('de_DE')
                          .format(packlists[index].date),
                      icon: Icon(Icons.list_alt),
                      checked: packlists[index].checked,
                    ),
                  );

Screen

image

I want the green part with an rounding (BorderRadius)

I tried to use an Container

flutter-layout dart flutter
2 Answers

ActionPane's children allows widget, you can use Container with decoration instead of using SlidableAction.

endActionPane: ActionPane(
  motion: BehindMotion(),
  children: [
    Expanded(
      child: Align(
        alignment: Alignment.centerRight,
        child: InkWell(
          onTap: () {},
          borderRadius: BorderRadius.circular(16),
          child: Container(
              alignment: Alignment.center,
              width: 24 * 4, // space for actionPan
              decoration: BoxDecoration(
                  color: Color(0xFF7BC043),
                  borderRadius: BorderRadius.circular(16)),
              child: Icon(
                Icons.delete,
                color: Colors.white,
              )),
        ),
      ),
    )
  ]

If you find any issue, provide width as screen width on Slidable's child: Container.

user_101571270

You can use Custom Action Like this

endActionPane: ActionPane(
                          motion: const ScrollMotion(),
                          extentRatio: 0.3,
                          children: [
                            Builder(builder: (sContext) {
                              return Expanded(
                                  child: RoundedIconWidget(
                                onClickIcon: () =>
                                    Slidable.of(sContext)?.close(),
                                icon: Icon(
                                  Icons.delete_rounded,
                                  color: Colors.red,
                                ),
                              ));
                            }),
                            Container(
                              width: 0.5,
                              height: 24,
                              color: AppColors.ITEM_BORDER_COLOR,
                            ),
                            Builder(builder: (context) {
                              return Expanded(
                                child: RoundedIconWidget(
                                  onClickIcon: () =>
                                      {Slidable.of(context)?.close()},
                                  icon: Icon(
                                    Icons.mode_edit_rounded,
                                    color: Colors.blueAccent,
                                  ),
                                ),
                              );
                            }),
                          ],
                        )
user_97196950
Related