A code sample using "WoltModalSheet" and "action_slider" packages

wolt_modal_sheet_and_slider_sample.dart

// Always to remember to import the packages 
import 'package:action_slider/action_slider.dart';
import 'package:wolt_modal_sheet/wolt_modal_sheet.dart';

1.) ACTION_SLIDERS (https://pub.dev/packages/action_slider)
//There are many slide/swipe packages but this served my use case

ActionSlider.standard(
      height: 56,
      boxShadow: const [],
      //you could pass your own icons/images etc to the button
      customForegroundBuilderChild: const Icon(Icons.double_arrow_rounded),
      customForegroundBuilder: (p0, p1, p2) {
        return Center(
        
        //import flutter_svg from pub.dev and add your own svg Icon
          child: SvgPicture.asset(
            IconConstants.doubleForwardArrow,
          ),
        );
      },
      backgroundColor: context.colorScheme.primaryContainer,
      
      foregroundBorderRadius: AppBorderRadius.c10,
      backgroundBorderRadius: AppBorderRadius.c10,
      action: (controller) async {
        controller.loading(); //starts loading animation
        await Future.delayed(const Duration(milliseconds: 500));
        controller.success(); //starts success animation
     // you can pass your method here on complete of the animation, such as calling the "showCustomWoltBottomSheet" or navigating to a Screen
        controller.reset();
      },
      child: Text(
        'Swipe',
        style: context.textTheme.titleLarge?.copyWith(
          color: context.colorScheme.secondary,
        ),
      ),
    );

2.) WOLT MODAL SHEET (https://pub.dev/packages/wolt_modal_sheet)

//WE CALL THIS [showCustomWoltBottomSheet] IN OUR UI, TO DISPLAY THE MODALSHEET
Future showCustomWoltBottomSheet(
  BuildContext context, {
  
//  [body, subtitle, title]
  Widget? body,
  String? subtitle,
  required String title,
  
  // the onTap is for the button for a single page modal
  VoidCallback? onTap,
  
  // this is the constructor for the children [optional]
  List<SliverWoltModalSheetPage> Function(BuildContext)? pageBuilder,
  
  //I declare a notifier for the pages/children of the sheet, needed for Multiple children
  ValueNotifier<int>? pageIndexNotifier,

}) async {

// i customized the sheet to use either a single page[body,title,subtitle] or Multiple pages, reason for the assertions below
  assert(() {
    if (pageBuilder == null && body == null) {
      throw AssertionError('There must either be a "Body" or a "pageBuilder');
    }
    return true;
  }());
  return WoltModalSheet.show(
    context: context,
    barrierDismissible: false,
    useSafeArea: true,
    pageIndexNotifier: pageIndexNotifier,
    pageListBuilder: pageBuilder ??
        (context) {
          return [
            pagesInModalBottomSheet(
              context: context,
              subtitle: subtitle,
              title: title,
              body: body,
              onTap: onTap ?? () {},
            ),
          ];
        },
  );
}

//! THIS IS THE PAGES/BODY OF THE BOTTOMSHEET WIDGET, please check the WoltModalSheet documentation on pub.dev for more methods:
///https://pub.dev/packages/wolt_modal_sheet

WoltModalSheetPage pagesInModalBottomSheet({
  required BuildContext context,
  String? subtitle,
  required String title,
  Widget? body,
  required VoidCallback onTap,
  bool isLeading = false,
  VoidCallback? onTapPrevoius,
}) {
  return WoltModalSheetPage(
    hasSabGradient: false,
    backgroundColor: context.colorScheme.surface,
    hasTopBarLayer: false,
    enableDrag: false,
    // body
    child: Container(
      color: context.colorScheme.surface,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
        
        //custom widget for the Header of the Pages
          dialogHeader(
            context,
            subtitle: subtitle,
            title: title,
            isLeading: isLeading,
            onTapPrevoius: onTapPrevoius,
          ),
          
          // the .padSymmetric is an extension on padding i make use of in my projects, ignore or wrap with a Padding widget
          SizedBox(child: body).padSymmetric(vertical: 20),
          ElevatedButton(
            onPressed:onTap,
            child: Text(TextConstant.continuebtn),
          )
        ],
        
        // use a Padding widget instead
      ).padSymmetric(horizontal: 20, vertical: 10),
    ),
  );
}

// !THIS IS JUST FOR THE APPBAR IN THE BOTTOMSHEET, You can customize yours to fit
Column dialogHeader(
  BuildContext modalSheetContext, {
  String? subtitle,
  required String title,
  bool isLeading = false,
  VoidCallback? onTapPrevoius,
}) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          IconButton(
            padding: AppEdgeInsets.eH8,
            icon: Icon(
              isLeading == true ? Icons.arrow_back : Icons.close,
              size: 24,
              color: modalSheetContext.colorScheme.primary,
            ),
            onPressed: isLeading == true ? onTapPrevoius : Navigator.of(modalSheetContext).pop,
          ),
          Expanded(
            flex: 5,
            child: AutoSizeText(
              title,
              maxLines: 1,
              overflow: TextOverflow.fade,
              minFontSize: 18,
              textAlign: TextAlign.center,
              style: modalSheetContext.textTheme.labelMedium,
            ),
          ),
          isLeading == false
              ? const SizedBox.shrink()
              : IconButton(
                  padding: AppEdgeInsets.eH8,
                  icon: Icon(
                    Icons.close,
                    size: 24,
                    color: modalSheetContext.colorScheme.primary,
                  ),
                  onPressed: Navigator.of(modalSheetContext).pop,
                ),
          isLeading == true ? const SizedBox.shrink() : const Spacer(),
        ],
      ),
      subtitle?.isEmpty == true || subtitle == null
          ? const SizedBox.shrink()
          : AutoSizeText(
              subtitle,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: modalSheetContext.textTheme.bodyMedium?.copyWith(
                color: modalSheetContext.colorScheme.onSurface.withOpacity(0.6),
              ),
              textAlign: TextAlign.center,
            ),
    ],
  );
}