How to make reusable modal bottom sheet - flutter

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

Answer 2

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