Question 363464 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter Card widget onTap() to open Slidable

I have a Slidable widget with a Card child and was wondering is it possible for me to open the Slidable when I tapped on the Card? I have tried using SlidableController but this class seems buggy as it keeps returning null for me. Besides, I also tried using the groupTag property in Slidable but it also not working on my project. The below is the sample code and hoping if anyone could help:

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('----')],
        ),
      ),
    ),
  ),
),
Tags:

2

Answers


  1. 0

    Following the documentation:

    You can do something like

    final controller = SlidableController();

// Open the actions
void _handleOpen() {
  controller.openEndActionPane();
  // OR
  //controller.openStartActionPane();
}

// ...

child: Slidable(
    controller: controller,
    endActionPane: ActionPane(
      motion: const DrawerMotion(),
      ...
))

    So, put your card inside a Inkwell widget

    child: InkWell(
  onTap: _handleOpen,
  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('----')],
      ),
    ),
  ),
),
    Login or Signup to reply.
  2. 0

    Please use below code for your issue

    final GlobalKey<SlidableState> _slidableKey = GlobalKey<SlidableState>();

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: GestureDetector(
    onTap: () {
      // Trigger opening of the Slidable here
      // You can use a GlobalKey to access the SlidableState and open it
      if (_slidableKey.currentState != null) {
        _slidableKey.currentState!.open(actionType: SlideActionType.secondary);
      }
    },
    child: Slidable(
      key: _slidableKey, // GlobalKey to access SlidableState
      endActionPane: ActionPane(
        motion: const DrawerMotion(),
        children: [
          // Your widget
        ],
      ),
      child: // child 
    ),
  ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search