flutterdartuser-interfaceslide

Flutter ListTile content overlay Card when apply Slidable

I am applying a Slidable widget on my Card widget to allow user to take do action based on their needs. However, when I slide the card the content in the card overlay the Card widget which doesn't look nice from the UI. The following is my sample code and the image attached is the output I currently obtained.

Output

Sample Code:

Card(
  child: Slidable(
    endActionPane: ActionPane(motion: const DrawerMotion(), children: [
      Expanded(
        child: Container(
            decoration: BoxDecoration(
                borderRadius: const BorderRadius.only(
                    bottomRight: Radius.circular(10),
                    topRight: Radius.circular(10)),
                gradient: customColors.progressBarGradient),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconButton(
                    onPressed: () {},
                    icon: const Icon(Icons.local_phone_rounded,
                        color: Colors.white)),
                IconButton(
                    onPressed: () {},
                    icon: const Icon(Icons.mail_outlined,
                        color: Colors.white)),
                IconButton(
                    onPressed: () {},
                    icon: const Icon(Icons.mail_outlined,
                    color: Colors.white)
              ],
            )))
      ]),
  child: ListTile(
      dense: true,
      leading: const AccountIcon(size: 42),
      title: Text('KOO KIAN KEAT'),
      subtitle:
          Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        Text('----')
      ])),
));
Solution

  • I wrapped the whole Card widget with Slidable widget to make it slide all together. And I also wrapped Slidable with Container widget which imitates card styling and will adjust the shape and color when start sliding (look at the end of the card widget when start sliding):

    // This container follows card decoration and adjusts shape (and backgroud color) when sliding
Container(
  decoration: ShapeDecoration(
    // imitating card shape
    shape: Theme.of(context).cardTheme.shape ??
        // material 3 default card shape
        const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(12.0)),
        ),
    // using card color (this is default card color)
    color: Theme.of(context).cardColor,
  ),
  child: Slidable(
    endActionPane: ActionPane(
      motion: const DrawerMotion(),
      children: [
        Expanded(
          child: Container(
            decoration: const BoxDecoration(
              borderRadius: BorderRadius.only(
                bottomRight: Radius.circular(10),
                topRight: Radius.circular(10),
              ),
              color: Colors.purple,
            ),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconButton(
                  onPressed: () {},
                  icon: const Icon(
                    Icons.local_phone_rounded,
                    color: Colors.white,
                  ),
                ),
                IconButton(
                  onPressed: () {},
                  icon: const Icon(
                    Icons.mail_outlined,
                    color: Colors.white,
                  ),
                ),
                IconButton(
                  onPressed: () {},
                  icon: const Icon(
                    Icons.mail_outlined,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),
        )
      ],
    ),
    child: const Card(
      margin: EdgeInsets.zero,
      elevation: 0,
      child: ListTile(
        dense: true,
        leading: Icon(Icons.supervised_user_circle, size: 50),
        title: Text('KOO KIAN KEAT'),
        subtitle: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [Text('----')],
        ),
      ),
    ),
  ),
),