Dismissible widget: dismiss widget only when tapping a button

Question

I'm trying to use the dismissible widget to get dismissed only when a button is pressed, not by swiping. Is there any way to achieve this or is that impossible to do with the Dismissible widget (or maybe I woukld have to implement my own with custom animations or something like that)?

Any ideas of how to achieve this?

I tried changing the direction setting to DismissDirection.none to prevent swiping. That works, but then I don't know how I would make it dismiss when a button is pressed. I was hoping Dismissible would have some sort of controller parameter, but it doesn't.

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Dismissible(
          key: UniqueKey(),
          direction: DismissDirection.none, // This prevents it from being swiped
          child: Container(
            width: 300.0,
            height: 100.0,
            color: Colors.blue,
          )
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {}, // I want this to somehow dismiss the Dismissible widget when this is pressed
      ),
    );
  }
}

(I saw a similar question here, but the answer doesn't solve my issue, since I'm not trying to implement a notification-like widget that appears on the screen. I'm trying to dismiss a widget that is present in the body of my app.)

Answer 1

Dismissible(
  key: ValueKey(id),
  background: Container(
    color: Theme.of(context).errorColor,
    child: Icon(
      Icons.delete,
      color: Colors.white,
      size: 40,
    ),
    alignment: Alignment.centerRight,
    padding: EdgeInsets.only(right: 20),
  ),
  direction: DismissDirection.endToStart,
  confirmDismiss: (direction) => showDialog(
    context: context,
    builder: ((context) => AlertDialog(
          title: Text('Are you sure?'),
          content: Text('Do you want to remove item from the cart'),
          actions: [
            TextButton(
                onPressed: () => Navigator.of(context).pop(false),
                child: Text('No')),
            TextButton(
                onPressed: () => Navigator.of(context).pop(true),
                child: Text('Yes'))
          ],
        )),
  ),
  onDismissed: (direction) {
    Provider.of<Cart>(context, listen: false).removeItem(productId);
  },
  child: Card(
    margin: EdgeInsets.symmetric(
      horizontal: 15,
      vertical: 4,
    ),
    child: Padding(
      padding: EdgeInsets.all(8),
      child: ListTile(
        leading: CircleAvatar(
            child: Padding(
                padding: EdgeInsets.all(5),
                child: FittedBox(child: Text('\$ $price')))),
        title: Text(title),
        subtitle: Text('Total: \$ ${(price * quantity)}'),
        trailing: Text('$quantity x'),
      ),
    ),
  ),
);



this might help, there's a on dismissed method which you need to apply,and inside the action list, you will get two button i.e yes or no, where you can perform your action.