I am trying to create a custom bottom sheet class to be re-usable, but it gives me the error of missing "State build" method. I know that I may include the @override method, but I have checked other responses like this, and I did not see the build method.
class ModalBottomSheet extends StatefulWidget {
final Function()? onPressed;
const ModalBottomSheet({Key? key, this.onPressed}) : super(key: key);
@override
State<ModalBottomSheet> createState() => _ModalBottomSheetState();
}
//error here
class _ModalBottomSheetState extends State<ModalBottomSheet> {
modal(context){
showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
builder: (BuildContext context) {
return Container(
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20), topRight: Radius.circular(20)),
),
child: Padding(
padding: EdgeInsets.all(10),
child: Column(
children: [
TextButton(
onPressed: () { widget.onPressed?.call();},
child: Text(
...
),
),
Divider(
height: 1,
),
TextButton(
onPressed: () {
widget.onPressed?.call();
},
child: Text(
...
),
),
],
),
),
);
});
}
}
CodePudding user response:
You are extending the StatefulWidget
, which requires you to override the build
method. Instead, you can create a class or mixin that doesn't extend Widget
, it will have a method that shows modal and requires BuildContext
as a function parameter.
class ModalBottomSheet {
void modal(context) {
showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
builder: (BuildContext context) {
return ...
},
);
}
}