How to update the ParentWidget of ModalBottomSheet using setState() in Flutter?

241 views Asked by At

In my SingleDayCalendarView() I have a button which calls a showModalBottomSheet() with AddShiftBottomSheet as its child :

class SingleDayCalendarView extends StatelessWidget {
...
    onPressed: () {
                  showModalBottomSheet(
                      context: context,
                      isScrollControlled: true,
                      enableDrag: true,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(25),
                          topRight: Radius.circular(25),
                        ),
                      ),
                      builder: (BuildContext context) {
                        return AddShiftBottomSheet(
                          dayOfTheShift: id,
                        );
                      });
                },

Then inside AddshiftBottomSheet, which is a stateful widget in another file, I call another showModalBottomSheet to show a TimePicker

class AddShiftBottomSheet extends StatefulWidget {

 @override
  Widget build(BuildContext context) {

DateTime _startDateTime;

...

Text("${DateFormat("HH:mm").format(_startDateTime)}",
    
showModalBottomSheet(
                              
                         context: context,
                              builder: (BuildContext context) {
                                return Container(
                                  height: 200,
                                  color: Colors.white,
                                  child: CupertinoDatePicker(
                                    onDateTimeChanged: (dateTime) {
                                      setState(() {
                                        _startDateTime = dateTime;
                                      });

                                      print(_startDateTime);
                                    },

The problem is that when I change the time with the TimePicker, the Text() which should display the _startDateTime, doesn't change and keeps displaying its initial value. With print statement I see that the variable _startDateTime it's changing as it should and that setState its triggered, but nothing happens.

One strange behavior: if I but the _startDateTime variable between:

class AddShiftBottomSheet extends StatefulWidget {
 @override
  _AddShiftBottomSheetState createState() => _AddShiftBottomSheetState();
}

//here
DateTime = _startDateTime;

class _AddShiftBottomSheetState extends State<AddShiftBottomSheet> {

everything works.

enter image description here

1

There are 1 answers

2
RaSha On BEST ANSWER

Remove DateTime _startDateTime; from build method and define it in class scope:

class AddShiftBottomSheet extends StatefulWidget {

DateTime _startDateTime;

 @override
  Widget build(BuildContext context) {
...

When you call setState build method is called again, where you've defined _startDateTime.