Flutter - How to fix time selected bugs?

JohnReaper
July 4, 2023
152 views
1 vote
2 Answers

I use customRadio to select the time. The problem is when I choose the time. The time I chose is not the same as the review details.

This picture is an example when I select the time 9.00 AM in the review details, the time indicated is 5.00 PM. Just like any other time when selected. Can anyone help me.

Code Time selected

Container(
                    padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
                    color: AppConst.bgLightBlue,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const SizedBox(height: 30),
                        const Text(
                          "Choose available time",
                          style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.w600,
                              color: Color(0xFF172B37)),
                        ),
                        const SizedBox(height: 10),
                        customTabHeader(),
                        _tabIndex == 0
                            ? Column(
                                children: [
                                  customRadio("8:00 AM", "08:00:00.000Z"),
                                  customRadio("9:00 AM", "09:00:00.000Z"),
                                  customRadio("10:00 AM", "10:00:00.000Z"),
                                  customRadio("11:00 AM", "11:00:00.000Z"),
                                ],
                              )
                            : Column(
                                children: [
                                  customRadio("12:00 PM", "12:00:00.000Z"),
                                  customRadio("1:00 PM", "13:00:00.000Z"),
                                  customRadio("2:00 PM", "14:00:00.000Z"),
                                  customRadio("3:00 PM", "15:00:00.000Z"),
                                  customRadio("4:00 PM", "16:00:00.000Z"),
                                  customRadio("5:00 PM", "17:00:00.000Z"),
                                  customRadio("6:00 PM", "18:00:00.000Z"),
                                  customRadio("7:00 PM", "19:00:00.000Z"),
                                  customRadio("8:00 PM", "20:00:00.000Z"),
                                  customRadio("9:00 PM", "21:00:00.000Z"),
                                ],
                              ),
                      ],
                    ),
                  )

Code Detail Review

Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Expanded(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              const Text("Date",
                                  style: TextStyle(fontSize: 12)),
                              Text(timestampToDate(
                                  _appointment.appointmentUnixTime, 3)),
                            ],
                          ),
                        ),
                        Expanded(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              const Text("Time",
                                  style: TextStyle(fontSize: 12)),
                              Text(timestampToDate(
                                  _appointment.appointmentUnixTime, 1)),
                            ],
                          ),
                        )
                      ],
                    ),

Code TimeStampToDate

String timestampToDate(int timestamp, int type) {
  var date = DateTime.fromMillisecondsSinceEpoch(timestamp);
  //var formatter = new DateFormat('dd/MM/yyyy hh:mm a');
  var formattedDate = DateFormat('dd/MM/yyyy').format(date).toString();
  if (type == 1) {
    formattedDate = DateFormat('hh:mm a').format(date).toString();
  } else if (type == 2) {
    formattedDate = DateFormat('dd/MM/yyyy hh:mm a').format(date).toString();
  } else if (type == 3) {
    formattedDate = DateFormat('EEE, d MMM, yyyy').format(date).toString();
  } else if (type == 4) {
    formattedDate =
        DateFormat('EEE, d MMM, yyyy hh:mm a').format(date).toString();
  } else if (type == 5) {
    formattedDate = DateFormat('d MMM').format(date).toString();
  }
  return formattedDate;
}

Code CustomRadio

Widget customRadio(String time, String time24) => Container(
        margin: const EdgeInsets.only(bottom: 10),
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
        decoration: const BoxDecoration(
            borderRadius: BorderRadius.all(
              Radius.circular(5.0),
            ),
            boxShadow: <BoxShadow>[
              BoxShadow(
                  color: Color(0xFFE1EAF0),
                  blurRadius: 10.0,
                  offset: Offset(0.0, 1.0))
            ],
            color: Colors.white),
        child: Row(
          children: [
            Expanded(
              child: Text(
                time,
                style: const TextStyle(fontSize: 20, color: Color(0xFF2C3F4C)),
              ),
            ),
            Radio(
              value: time24,
              groupValue: _selectedTime,
              onChanged: (value) {
                setState(() {
                  _selectedTime = value.toString();
                  _nextMediumButtonAction = true;
                });
              },
            ),
          ],
        ),
      );

Tags: dart flutter

Answers

change the type of _selectedTime to TimeOfDay, then update customRadio mothod:

Widget customRadio(TimeOfDay time) {
    final localizations = MaterialLocalizations.of(context);
    final formattedTimeOfDay = localizations.formatTimeOfDay(time);
    return Container(
      margin: const EdgeInsets.only(bottom: 10),
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
      decoration: const BoxDecoration(
          borderRadius: BorderRadius.all(
            Radius.circular(5.0),
          ),
          boxShadow: <BoxShadow>[
            BoxShadow(
                color: Color(0xFFE1EAF0),
                blurRadius: 10.0,
                offset: Offset(0.0, 1.0))
          ],
          color: Colors.white),
      child: Row(
        children: [
          Expanded(
            child: Text(
              formattedTimeOfDay,
              style: const TextStyle(fontSize: 20, color: Color(0xFF2C3F4C)),
            ),
          ),
          Radio<TimeOfDay>(
            value: time,
            groupValue: _selectedTime,
            onChanged: (value) {
              setState(() {
                _selectedTime = value;
              });
            },
          ),
        ],
      ),
    );
  }

then use it like this:

Container(
        padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 30),
            const Text(
              "Choose available time",
              style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.w600,
                  color: Color(0xFF172B37)),
            ),
            const SizedBox(height: 10),
            customTabHeader(),
            _tabIndex == 0
                ? Column(
                    children: [
                      customRadio(const TimeOfDay(hour: 8, minute: 0)),
                      customRadio(const TimeOfDay(hour: 9, minute: 0)),
                      customRadio(const TimeOfDay(hour: 10, minute: 0)),
                      customRadio(const TimeOfDay(hour: 11, minute: 0)),
                    ],
                  )
                : Column(
                    children: [
                      customRadio(const TimeOfDay(hour: 12, minute: 0)),
                      customRadio(const TimeOfDay(hour: 13, minute: 0)),
                      customRadio(const TimeOfDay(hour: 14, minute: 0)),
                      customRadio(const TimeOfDay(hour: 15, minute: 0)),
                      customRadio(const TimeOfDay(hour: 16, minute: 0)),
                      customRadio(const TimeOfDay(hour: 17, minute: 0)),
                      customRadio(const TimeOfDay(hour: 18, minute: 0)),
                      customRadio(const TimeOfDay(hour: 19, minute: 0)),
                      customRadio(const TimeOfDay(hour: 20, minute: 0)),
                      customRadio(const TimeOfDay(hour: 21, minute: 0)),
                    ],
                  ),
          ],
        ),
      )

then pass the _selectedTime to the next page to show it in review details. and if you want to format the selected time using DateTimeFormat, do it like this:

String formatTimeOfDay(TimeOfDay tod) {
    final now = new DateTime.now();
    final dt = DateTime(now.year, now.month, now.day, tod.hour, tod.minute);
    final format = DateFormat('dd/MM/yyyy hh:mm a');
    return format.format(dt);
}

Use below function:

Text(timestampToDate(appointmentUnixTime("2023-07-04", "09:00:00.000Z"), 1))

Instead of :

Text(timestampToDate(_appointment.appointmentUnixTime, 1))

  int appointmentUnixTime(String yourDate, String selectedTime) {

    // Create a DateFormat object with the "yyyy-MM-dd" pattern.
    DateFormat dateFormat = DateFormat('yyyy-MM-dd');

    // Format the DateTime object using the DateFormat object.
    String dateOnly = dateFormat.format(DateTime.parse(yourDate));

    // Create a DateFormat object with the desired format.
    DateFormat tempDate = DateFormat('yyyy-MM-dd HH:mm:ssZ');

    // Parse the Dart string into a DateTime object.
    DateTime dateTime = tempDate.parse("$dateOnly $selectedTime");

    return dateTime.millisecondsSinceEpoch;
  }

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – How to fix time selected bugs?

Answers