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?

CodePudding user response：

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'),
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

Open bottom sheet like this

InkWell(
          onTap: () {
            showModalBottomSheet(
                context: context,
                isScrollControlled: true,
                builder: (context) {
                  return ModalBottomSheet(
                    
                      );
                });
          })

Stateful bottom sheet

class ModalBottomSheet extends StatefulWidget {
 

      @override
     _ModalBottomSheetState createState() => _ModalBottomSheetState();
    }

     class _ModalBottomSheetState extends State<ModalBottomSheet>
      with SingleTickerProviderStateMixin {

      @override
    Widget build(BuildContext context) {
    double keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
    // TODO: implement build
    return Wrap(
      children: <Widget>[
        Container(
          margin:
              EdgeInsets.only(left: 10.0, right: 10.0, top: 15.0, bottom: 15.0),
          child: Column( 
           children: <Widget>[
            Widgets(),
            
          ]
            )
          )
        ],
      );
     }

    }