setState in showModalBottomSheet using TimePicker

Question

I am having a problem. When I am showing my showModalBottomSheet I have a GeestureDetector on a Container, when pressed the TimePicker pops up and I can select a time. I take that value and set the state on a String that holds the new time value. But nothing appears to change. Unless I do a hot-reload.

My bottommodalsheet looks like this:

test() {
String openAt = "00:00";
String closeAt = "00:00";
showModalBottomSheet<void>(
  isScrollControlled: true,
  isDismissible: false,
  enableDrag: false,
  barrierColor: Colors.black.withOpacity(0.1),
  backgroundColor: Colors.white,
  shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.only(
          topLeft: Radius.circular(15), topRight: Radius.circular(15))),
  context: context,
  builder: (BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Padding(
      padding: MediaQuery.of(context).viewInsets,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  IconButton(
                      onPressed: () {
                        context.pop();
                      },
                      icon: Icon(
                        Icons.close,
                        color: Styles.blackColor,
                      ))
                ],
              ),
              s_height,
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "Open at",
                    style: TextStyle(fontWeight: FontWeight.w600),
                  ),
                  GestureDetector(
                    onTap: () {
                          showTimePicker(
                              context: context,
                              initialTime: TimeOfDay.now())
                          .then((value) =>
                              {print(value), openAt = value.toString()})
                          .whenComplete(() {
                        setState(() {
                          openAt;
                        });
                      });
                    },
                    child: Container(
                      decoration: BoxDecoration(
                          color: Styles.greyLightColor,
                          borderRadius:
                              BorderRadius.all(Radius.circular(10))),
                      padding: EdgeInsets.all(7.0),
                      child: Text(
                          openAt) /*Text(
                          "${openTime.hour.toString().padRight(2, '0')}:${openTime.minute.toString().padRight(2, '0')}")*/
                      ,
                    ),
                  )
                ],
              ),
              Divider(),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text("Close at",
                      style: TextStyle(fontWeight: FontWeight.w600)),
                  Container(
                    decoration: BoxDecoration(
                        color: Styles.greyLightColor,
                        borderRadius:
                            BorderRadius.all(Radius.circular(10))),
                    padding: EdgeInsets.all(7.0),
                    child: Text(
                        closeAt) /*Text(
                        "${closeTime.hour.toString().padRight(2, '0')}:${closeTime.minute.toString().padRight(2, '0')}")*/
                    ,
                  )
                ],
              ),
              s_height,
              Container(
                width: size.width * 0.8,
                child: ElevatedButton(
                    style: ButtonStyle(
                        foregroundColor: MaterialStateProperty.all<Color>(
                            Styles.whiteColor),
                        backgroundColor: MaterialStateProperty.all<Color>(
                            Styles.blackColor)),
                    onPressed: () {},
                    child: Text("Save")),
              )
            ],
          ),
        ),
      ),
    );
  },
);
}

I guess since this is a test() is a function that shows the modal its get run once. Then a rebuild need to be done to show the changes. What am I missing or is there a better way of doing this?

score 0 · Accepted Answer · answered Feb 12 '23 at 12:28

You can use StatefulBuilder to update showModalBottomSheet's content state.

  showModalBottomSheet<void>(
    context: context,
    builder: (BuildContext context) {
      Size size = MediaQuery.of(context).size;
      return StatefulBuilder(
        builder: (context, setState) => Padding(
          padding: MediaQuery.of(context).viewInsets,

score 0 · Answer 2 · answered Feb 12 '23 at 12:34

0

You can either use a StatefulBuilder or you can implement a proper state management solution to change and observe the state such as Getx, Provider or Bloc.

answered Feb 12 '23 at 12:34

Miro

364
1
12

setState in showModalBottomSheet using TimePicker

2 Answers2