top_modal_sheet
A popup simple topModalSheet menu button widget with handsome design and easy to use.
Installations
Add top_modal_sheet: ^1.0.0 in your pubspec.yaml dependencies. And import it:
import 'package:top_modal_sheet/top_modal_sheet.dart';
How to use
Simply call showModalTopSheet to display it
(context: context, child: DumyModal()); if(value != null){ setState(() { _topModalData = value; }); } }, )">
MaterialButton( color: Colors.white, elevation: 5, child: const Text("Show TopModal"), onPressed: () async { var value = await showTopModalSheet<String>(context: context, child: DumyModal()); if(value != null){ setState(() { _topModalData = value; }); } }, )
Here is another way to invoke the modal using a Globalkey to get a smooth pop animation
>(PageRouteBuilder(pageBuilder: (_, __, ___) { return TopModalSheet( key: _topModalSheetKey, child: Container(color: Colors.teal, height: MediaQuery.of(context).size.height * .2, child: Center( child: MaterialButton( color: Colors.white, child: const Text("Back", style: TextStyle(color: Colors.teal),), onPressed: () { _topModalSheetKey.currentState.onBackPressed(data: [1,2,3]); }, ) )), ); }, opaque: false)); if(value != null){ setState(() { _topModalData = "$value"; }); } }, )">
final _topModalSheetKey = GlobalKey<TopModalSheetState>(); MaterialButton( color: Colors.white, elevation: 5, child: const Text("Show TopModal 2"), onPressed: () async { var value = await Navigator.of(context).push<List<int>>(PageRouteBuilder(pageBuilder: (_, __, ___) { return TopModalSheet( key: _topModalSheetKey, child: Container(color: Colors.teal, height: MediaQuery.of(context).size.height * .2, child: Center( child: MaterialButton( color: Colors.white, child: const Text("Back", style: TextStyle(color: Colors.teal),), onPressed: () { _topModalSheetKey.currentState.onBackPressed(data: [1,2,3]); }, ) )), ); }, opaque: false)); if(value != null){ setState(() { _topModalData = "$value"; }); } }, )
For a more detail example please take a look at the example folder.
Example
-
If something is missing, feel free to open a ticket or contribute!
7 Dec 7, 2022
362 Jan 1, 2023
2 Nov 13, 2021
174 Dec 19, 2022
44 Jul 5, 2022
7 Dec 18, 2022
0 Nov 24, 2022
4 Apr 19, 2022
1.7k Jan 7, 2023
222 Nov 8, 2022