Sample of using dismissible with the top layer not clipping the dismissible background

dismissible_sample.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.cyan),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var items = List.generate(10, (i) => 'Item $i');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary, title: Text(widget.title)),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          final item = items[index];
          return Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
              child: FabianDismissibleDelete(
                key: ValueKey('dismissible-item-${item}'),
                child: Card(margin: EdgeInsets.zero, child: ListTile(title: Text(item))),
              ));
        },
      ),
    );
  }
}

typedef CanDismissCallback = Future<bool?> Function();

/// A custom implementation of the Dismissible widget with custom theming.
/// This dismissible handles only deletion of an item and provides an optional [confirmDismiss] to react to it.
class FabianDismissibleDelete extends StatelessWidget {
  final Widget child;
  final CanDismissCallback? confirmDismiss;
  final ShapeBorder? shapeBorder;

  const FabianDismissibleDelete({required Key key, required this.child, this.confirmDismiss, this.shapeBorder}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final shape = RoundedRectangleBorder(borderRadius: BorderRadius.circular(12));
    return DecoratedBox(
      decoration: ShapeDecoration(
        color: Theme.of(context).primaryColor,
        shape: Theme.of(context).cardTheme.shape ?? shape,
      ),
      child: Dismissible(
        key: key!,
        secondaryBackground: Padding(
          padding: const EdgeInsets.only(right: 13),
          child: Align(
            alignment: Alignment.centerRight,
            child: SizedBox(height: 18, width: 20, child: Icon(Icons.delete)),
          ),
        ),
        background: DecoratedBox(
          decoration: ShapeDecoration(
            color: Theme.of(context).primaryColor,
            shape: Theme.of(context).cardTheme.shape ?? shape,
          ),
          child: const SizedBox.shrink(),
        ),
        direction: DismissDirection.endToStart,
        confirmDismiss: (_) async {
          if (confirmDismiss != null) return confirmDismiss?.call();

          return false;
        },
        child: child,
      ),
    );
  }
}