A simple top Modal Sheet for flutter

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

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

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