Bounce Dismissible for helping the user

Issue

So we have a Dismissible for confirming/denying a item.
However we have some users that are trying to click/tap on the item.
Our UX team suggested that we then "bounce" the item to show that they have to swipe (and reveal the action fields).
But I don’t see any option to do so.

Does anybody have a suggestion what might work for this?
The code I have for now is shown below:

Dismissible(
  key: const ValueKey(0),
  direction: DismissDirection.horizontal,
  child: Container(
    margin: EdgeInsets.symmetric(horizontal: 3, vertical: 3),
    child: card(),
  ),
  confirmDismiss: (direction) async {
    var newStatus = direction == DismissDirection.startToEnd
        ? OkNokNvt.OK
        : OkNokNvt.NOK;

    _changeStatus(newStatus);
    return false;
  },
  background: ok(),
  secondaryBackground: nok(),
),

Solution

The Dismissable doesn’t seeem to have this functionality.

Instead, you could use the flutter_slidable package.

Here, you can programmatically open the underlying actions by calling Slideable.of(context)?.open(). No fancy bounce-animation though.

Here’s the code:

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: const MyHomePage(),
    );
  }
}

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(
      appBar: AppBar(
        title: const Text('Bouncing Widget Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Slidable(
              key: const Key('key'),
              actionPane: const SlidableDrawerActionPane(),
              actionExtentRatio: 0.25,
              child: Builder(
                builder: (context) => GestureDetector(
                  onTap: () {
                    Slidable.of(context)
                        ?.open(actionType: SlideActionType.primary);
                  },
                  child: Container(
                    color: Colors.grey,
                    height: 50,
                    child: const Center(child: Text('Tap me')),
                  ),
                ),
              ),
              actions: [
                IconSlideAction(
                  caption: 'Delete',
                  color: Colors.red,
                  icon: Icons.delete,
                  onTap: () => print('remove me from list'),
                ),
              ],
              dismissal: SlidableDismissal(
                onDismissed: (_) => print('remove me from list'),
                dragDismissible: true,
                child: const SlidableDrawerDismissal(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answered By – tmaihoff

Answer Checked By – Jay B. (FlutterFixes Admin)