modal_top_sheet #

Modal sheets that slide in from the top, like an app bar dropdown.

It behaves like the modals the framework already ships: it is awaitable and returns a result, the barrier is configurable, and it animates out however it is closed — a tap on the barrier, a system back gesture or Navigator.pop.

Installation #

dependencies:
  modal_top_sheet: ^1.0.0

Requires Dart 3.8 / Flutter 3.32 or newer.

Usage #

import 'package:modal_top_sheet/modal_top_sheet.dart';

final String? picked = await showModalTopSheet<String>(
  context,
  child: const LanguagePicker(),
);

Return a value from inside the sheet the usual way:

Navigator.of(context).pop('Deutsch');

A sheet that cannot be dismissed #

isDismissible: false refuses both the barrier tap and the system back gesture, so the sheet can only be closed from inside:

showModalTopSheet<void>(
  context,
  isDismissible: false,
  child: const TermsSheet(),
);

Appearance and motion #

showModalTopSheet<void>(
  context,
  barrierColor: Colors.indigo.withValues(alpha: 0.3),
  duration: const Duration(milliseconds: 900),
  curve: Curves.elasticOut,
  reverseCurve: Curves.easeInBack,
  padding: const EdgeInsets.only(top: 120),
  child: const MySheet(),
);

Parameters #

ModalTopSheetRoute is public too, for pushing the sheet yourself.

Migrating from 0.0.2 #

• showModalTopSheet returns Future<T?> instead of void, so the sheet can report what the user picked. Existing calls keep working — the future can be ignored.
• isDismissible: false now also refuses the system back gesture. It used to guard only the tap area, so a back gesture closed the sheet anyway.
• Closing always animates. Previously only a tap on the empty area animated out; a back gesture made the sheet disappear at once.
• customEaseInExpo is gone. Pass any Curve through curve / reverseCurve.

License #

MIT.