Question 76598 in Flutter Question posted in
The official Flutter documentation can be found here.

setState in showModalBottomSheet using TimePicker – Flutter

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?

Tags:

2

Answers


  1. 0

    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,
    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search