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

Display the Date in Text widget when Date is changed – Flutter

I am trying to display the Date using the showDialog(). I am using the calender_date_picker package for my calendar.

I have set my default date today, my requirement is to display the date when i am changing the date in calender_date_picker widget, but i am not getting the date in my Text widget.

Below you can fine the code and respective screen shot.

showDialog(
      barrierColor: const Color(0xff0F559E).withOpacity(0.80),
      context: context,
      builder: (context) {
        return Dialog(
          insetPadding: EdgeInsets.all(30),
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(18)),
          child: Container(
            width: MyUtility(context).width,
            // height: MyUtility(context).height,
            child: Column(
              children: [
                Row(
                  children: [
                    Expanded(
                      child: GestureDetector(
                        onTap: () {
                          print('fromActive');
                          setState(() {
                            toActive = false;
                            fromActive = true;
                          });
                        },
                        child: Container(
                          decoration: const BoxDecoration(
                            border: Border(
                              right: BorderSide(width: 0.5, color: Color(0xffD9D9D9)),
                              bottom: BorderSide(width: 1.0, color: Color(0xffD9D9D9)),
                            ),
                          ),
                          child: Padding(
                            padding: const EdgeInsets.fromLTRB(10, 13, 0, 0),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                const Text(
                                  'From',
                                  style: TextStyle(fontFamily: 'Outfit', fontSize: 16, fontWeight: FontWeight.w400, color: Color(0xff828282)),
                                ),
                                SizedBox(
                                  height: MyUtility(context).height * 0.01,
                                ),
                                Text(
                                  _getValueText(
                                    config.calendarType,
                                    todayReport,
                                  ),
                                  style: TextStyle(
                                      fontFamily: 'Outfit',
                                      fontSize: 18,
                                      fontWeight: FontWeight.w600,
                                      color: fromActive ? const Color(0xff015CBD) : Colors.black),
                                ),
                                SizedBox(
                                  height: MyUtility(context).height * 0.01,
                                ),
                                Text(
                                  '03:30',
                                  style: TextStyle(
                                      fontFamily: 'Outfit',
                                      fontSize: 18,
                                      fontWeight: FontWeight.w600,
                                      color: fromActive ? const Color(0xff015CBD) : Colors.black),
                                ),
                                SizedBox(
                                  height: MyUtility(context).height * 0.01,
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      child: GestureDetector(
                        onTap: () {
                          print('toActive');
                          setState(() {
                            toActive = true;
                            fromActive = false;
                          });
                        },
                        child: Container(
                          decoration: const BoxDecoration(
                            border: Border(
                              left: BorderSide(width: 0.5, color: Color(0xffD9D9D9)),
                              bottom: BorderSide(width: 1.0, color: Color(0xffD9D9D9)),
                            ),
                          ),
                          child: Padding(
                            padding: const EdgeInsets.fromLTRB(10, 13, 0, 0),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                const Text(
                                  'To',
                                  style: TextStyle(fontFamily: 'Outfit', fontSize: 16, fontWeight: FontWeight.w400, color: Color(0xff828282)),
                                ),
                                SizedBox(
                                  height: MyUtility(context).height * 0.01,
                                ),
                                Text(
                                  _getValueText(
                                    config.calendarType,
                                    todayReport,
                                  ),
                                  style: TextStyle(
                                      fontFamily: 'Outfit',
                                      fontSize: 18,
                                      fontWeight: FontWeight.w600,
                                      color: toActive ? Color(0xff015CBD) : Colors.black),
                                ),
                                SizedBox(
                                  height: MyUtility(context).height * 0.01,
                                ),
                                Text(
                                  '01:30',
                                  style: TextStyle(
                                      fontFamily: 'Outfit',
                                      fontSize: 18,
                                      fontWeight: FontWeight.w600,
                                      color: toActive ? Color(0xff015CBD) : Colors.black),
                                ),
                                SizedBox(
                                  height: MyUtility(context).height * 0.01,
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
                Row(
                  children: [
                    Expanded(
                      child: CalendarDatePicker2(
                        config: config,
                        initialValue: todayReport,
                        onValueChanged: (values) {
                          print('printL: $values');
                          setState(() => todayReport = values);
                        },
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 10),
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    const Text('Selection(s):  '),
                    const SizedBox(width: 10),
                    Text(
                      _getValueText(
                        config.calendarType,
                        todayReport,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        );
      },
    )

enter image description here

Tags:

2

Answers


  1. 0

    You can use StatefulBuilder to update dialog ui, wrap Dialog like

        showDialog(
      barrierColor: const Color(0xff0F559E).withOpacity(0.80),
      context: context,
      builder: (context) {
        return StatefulBuilder(
          builder: (context, setStateSB) => Dialog( //use this `setStateSB` as setState , or renamed just to avoid confusion
    Login or Signup to reply.
  2. 0

    Use StatefulBuilder to use setState inside Dialog and update Widgets only inside of it.

    void dialog(context) {
  showDialog(
    context: context,
    builder: (context) {
      String text = "Hello";
      return StatefulBuilder(
        builder: (context, setState) {
          return AlertDialog(
            title: const Text("Title of Dialog"),
            content: Text(text),
            actions: <Widget>[
              TextButton(
                onPressed: () => Navigator.pop(context),
                child: const Text("Cancel"),
              ),
              TextButton(
                onPressed: () {
                  setState(() {
                    text = "Text Change";
                  });
                },
                child: const Text("Change"),
              ),
            ],
          );
        },
      );
    },
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search