How to make reusable modal bottom sheet

Question

usually I use showModalBottomSheet for each view to call a ModalBottomSheet with the same content on it. I just want to make it simple as I can call the class of reusable modal bottomsheet.

 _moreModalBottomSheet(context) {
    Size size = MediaQuery.of(context).size;
    showModalBottomSheet(
        isScrollControlled: true,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(40.0),
        ),
        context: context,
        builder: (BuildContext bc) {
          return Container(
            height: size.height * 0.5,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(40.0),
                topLeft: Radius.circular(40.0),
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
              child: ListView(
                physics: ClampingScrollPhysics(),
                children: [
                  //content of modal bottomsheet
                ],
              ),
            ),
          );
        });
  }

for example, I use button to show modal bottom sheet

ElevatedButton(onPressed: _moreModalBottomSheet(context), child: Text('show modal bottom sheet'))

I want to make _moreModalBottomSheet() as a class so it reusable.

on this answer its only a reusable a layout. But, what I trying to achieve is make a custom class ModalBottomSheet. So I can call ModalBottomSheet in other class only like ModalBottomSheet() not showModalBottomSheet that return ModalBottomSheet . It's that possible?

Answer 1

You just need to extract it to a new class like:

class ModalBottomSheet {
  static void _moreModalBottomSheet(context) {
    Size size = MediaQuery.of(context).size;
    showModalBottomSheet(
        isScrollControlled: true,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(40.0),
        ),
        context: context,
        builder: (BuildContext bc) {
          return Container(
            height: size.height * 0.5,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(40.0),
                topLeft: Radius.circular(40.0),
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
              child: ListView(
                physics: ClampingScrollPhysics(),
                children: [
                  //content of modal bottomsheet
                ],
              ),
            ),
          );
        });
  }
}

Now you can call it everywhere like:

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: ElevatedButton(
            onPressed: () =>
                ModalBottomSheet._moreModalBottomSheet(context),
            child: Text('open modal'),
          ),
        ),
      ),
    );
  }
}