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

Question

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.

score 0 · Accepted Answer · answered Oct 19 '20 at 13:20

0

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.

answered Oct 19 '20 at 13:20

RaSha

1,356
1
16
30

Thanks, this solved the issue. Can you explain me why I should always define variables in the class and not in the build method in Stateful Widgets? I actually moved the variable in the build method because I had to use widget.argument as its initial value, and it is not permitted in the class scope. – LateBoy Oct 19 '20 at 14:05
1

Actually you shouldn't define the variables which are expected to keep a global state in your build method, because when you call `setState`, your build method is called and the variable value will be overwritten. – RaSha Oct 19 '20 at 14:50

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

1 Answers1