I implemented a getx bottomsheet which i use to pick date and time. However when i select the date and time, the ui doesn't update on the bottomsheet immediately until i close and reopen the bottomsheet then the selected value appears in the bottomsheet.
How do i fix this for the value to show as soon as it is selected.
The variables to be update are _date and _time.
Find my bottomsheet code below
Get.bottomSheet(Container(
height: SizeConfig.height250,
width: double.maxFinite,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(
SizeConfig.radius10),
topRight: Radius.circular(
SizeConfig.radius10)),
),
child: Padding(
padding: EdgeInsets.all(
SizeConfig.width10),
child: Column(
children: [
TitleTextWidget(
titleText: services[index]
.title
.toString(),
titleSize:
SizeConfig.font25,
),
SizedBox(
height:
SizeConfig.width10),
Column(
mainAxisSize:
MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment
.center,
children: <Widget>[
ElevatedButton(
onPressed: () {
DatePicker.showDatePicker(
context,
theme: DatePickerTheme(
containerHeight:
SizeConfig
.height200),
showTitleActions:
true,
minTime:
DateTime
.now(),
maxTime:
DateTime(
2025,
12,
31),
onConfirm:
(date) {
// print(
// 'confirm $date');
_date =
'${date.year} - ${date.month} - ${date.day}';
setState(() {});
},
currentTime:
DateTime
.now(),
locale:
LocaleType
.en);
},
child: Container(
alignment: Alignment
.center,
height: SizeConfig
.height50,
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: <
Widget>[
Row(
children: <
Widget>[
Container(
child:
Row(
children: <
Widget>[
Icon(
Icons.date_range_outlined,
size:
SizeConfig.width20,
color:
AppStyles.appSecondaryColor,
),
SizedBox(width: SizeConfig.width10),
TitleTextWidget(
titleText:
"$_date",
titleColor:
AppStyles.appSecondaryColor,
)
],
),
),
],
),
TitleTextWidget(
titleText:
"Change",
titleColor:
AppStyles
.appSecondaryColor,
)
],
),
),
),
SizedBox(
height: SizeConfig
.height10),
ElevatedButton(
onPressed: () {
DatePicker.showTimePicker(
context,
theme: DatePickerTheme(
containerHeight:
SizeConfig
.height200),
showTitleActions:
true,
onConfirm:
(time) {
// print(
// 'confirm $time');
_time = '${time.hour} : ${time.minute} : ${time.second}';
setState(() {});
},
currentTime: DateTime.now(), locale: LocaleType.en
);
setState(() {});
},
child: Container(
alignment: Alignment.center,
height: SizeConfig.height50,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Container(
child: Row(
children: <Widget>[
Icon(
Icons.access_time,
size: SizeConfig.width20,
color: AppStyles.appSecondaryColor,
),
SizedBox(width: SizeConfig.width10),
TitleTextWidget(
titleText: " $_time",
titleColor: AppStyles.appSecondaryColor,
),
],
),
),
],
),
TitleTextWidget(
titleText: "Change",
titleColor: AppStyles.appSecondaryColor,
)
],
),
),
)
],
),
SizedBox(
height:
SizeConfig.width10),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Container(
padding:
EdgeInsets.all(
SizeConfig
.width10),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
ElevatedButton(
onPressed:
() {},
child: const Icon(
Icons
.remove_outlined),
),
SizedBox(
width: SizeConfig
.width10),
TitleTextWidget(
titleText: "0",
titleSize:
SizeConfig
.font30,
),
SizedBox(
width: SizeConfig
.width10),
ElevatedButton(
onPressed:
() {},
child: const Icon(
Icons
.add_outlined),
),
],
),
),
ElevatedButton(
onPressed: () {},
child: TitleTextWidget(
titleText:
"Book Now"),
)
],
),
],
),
),
));
