Here's the code where I'm opening a dialog on click of FloatingActionButton:
FloatingActionButton(
elevation: 4,
onPressed: () {
Get.defaultDialog(
title: 'Add Reminder',
titleStyle: kSubHeading2TextStyle,
content: Container(
height: screenSize.height * 0.7,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
controller: ScrollController(),
physics: BouncingScrollPhysics(),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
GetBuilder<CalendarController>(
builder: (dropDownController) {
return DropdownButton(
borderRadius: BorderRadius.circular(16),
elevation: 12,
isExpanded: true,
underline: const Divider(
thickness: 2,
color: kPrimaryColor,
),
hint: const Text(
'Select Category',
style: kSubHeading3TextStyle,
),
value: dropDownController.dropdownvalue,
// Down Arrow Icon
icon:
const Icon(Icons.keyboard_arrow_down),
items: dropDownController.categoryItems.map((String items) {
return DropdownMenuItem(
value: items,
child: Text(
items,
style: kSubHeading3TextStyle,
),
);
}).toList(),
onChanged: (String? newValue) {
dropDownController.changeCategory(newValue!);
},
);
}
),
const Text(
'Journey Date & Time',
style: kSubHeading2TextStyle,
),
GetBuilder<CalendarController>(
builder: (calendarController) {
return SizedBox(
height: 100,
child: CupertinoDatePicker(
initialDateTime: calendarController.focusedDay ,
onDateTimeChanged: (datetime) {
print(datetime);
eventDateTime = datetime;
}),
);
}
),
const Divider(
thickness: 2,
color: kPrimaryColor,
),
const Text(
'Reminder Before:',
style: kSubHeading2TextStyle,
),
//hour before (reminder)
const Text(
'Hour',
style: kSubHeading3TextStyle,
),
GetBuilder<CalendarController>(
builder: (hourController) {
return Slider(
label: 'Hour',
divisions: 23,
activeColor: kPrimaryColor,
value: calendarController.hourValue,
onChanged: (val) {
//TODO: implement slider on dialog in reminder page
hourController.changeHour(val);
},
);
}
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
GetBuilder<CalendarController>(
builder: (hourController) {
return IconButton(
onPressed: () {
hourController.increaseOneHour();
},
icon: const Icon(Icons.add),
);
}
),
GetBuilder<CalendarController>(
builder: (hourController) {
return Text(
'${(hourController.hourValue * 23).toInt().toString()} hours',
style: kSubHeading3TextStyle,
);
}
),
GetBuilder<CalendarController>(
builder: (hourController) {
return IconButton(
onPressed: () {
hourController.decreaseOneHour();
},
icon: const Icon(Icons.remove),
);
}
),
],
),
// s
///minutes before (reminder)
const Text(
'Minute',
style: kSubHeading3TextStyle,
),
///MINUTE SLIDER
GetBuilder<CalendarController>(
builder: (minuteController) {
return Slider(
label: 'Minute',
divisions: 59,
activeColor: kPrimaryColor,
value: calendarController.minuteValue,
onChanged: (val) {
minuteController.changeMin(val);
},
);
}
),
///MINUTE + -
GetBuilder<CalendarController>(
builder: (minuteController) {
return Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
IconButton(
onPressed: () {
minuteController.increaseOneMin();
},
icon: const Icon(Icons.add),
),
Text(
'${(minuteController.minuteValue * 59).toInt().toString()} minutes',
style: kSubHeading3TextStyle,
),
IconButton(
onPressed: () {
minuteController.decreaseOneMin();
},
icon: const Icon(Icons.remove),
),
],
);
}
),
///frequency
const Text(
'How many times you wish to be reminded?',
style: kSubHeading3TextStyle,
),
GetBuilder<CalendarController>(
builder: (frequencyController) {
return Slider(
label: 'Frequency',
divisions: 10,
activeColor: kPrimaryColor,
value: frequencyController.frequency,
onChanged: (val) {
frequencyController.changeFrequency(val);
},
);
}
),
//
Row(
mainAxisAlignment:
MainAxisAlignment.end,
children: [
GetBuilder<CalendarController>(
builder: (frequencyController) {
return Text(
'${(frequencyController.frequency * 10).toInt().toString()} times',
style:
kSubHeading3TextStyle,
);
}
),
],
),
//travel medium
GetBuilder<CalendarController>(
builder: (dropDownController) {
return Text(
dropDownController.dropdownvalue == 'Select Category'
? 'Flight Name'
: dropDownController.dropdownvalue + ' Name/ Number',
style: kSubHeading2TextStyle,
);
}
),
TextField(
controller:
travelMediumTxtEditingController,
maxLines: 1,
style: kSubHeading3TextStyle,
decoration: InputDecoration(
hintText: 'Type here',
hintStyle: kNormalTextStyle.copyWith(
color: Colors.blueGrey.shade300,
fontSize: 12,
),
),
),
const SizedBox(
height: 8,
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
Expanded(
flex: 4,
child: TextField(
controller:
txtSourceTxtEditingController,
textAlign: TextAlign.start,
maxLines: 1,
style: kSubHeading3TextStyle,
decoration: InputDecoration(
labelText: 'Source',
hintText: 'Type source here',
labelStyle: kNormalTextStyle.copyWith(
color: Colors.blueGrey.shade300,
fontSize: 12,
),
hintStyle:
kNormalTextStyle.copyWith(
color: Colors.blueGrey.shade300,
fontSize: 12,
),
),
),
),
const VerticalDivider(
width: 4,
color: kDarkPrimaryColor,
),
Expanded(
flex: 4,
child: TextField(
controller:
txtDestinationTxtEditingController,
textAlign: TextAlign.end,
maxLines: 1,
style: kSubHeading3TextStyle,
decoration: InputDecoration(
labelText: 'Destination',
labelStyle: kNormalTextStyle.copyWith(
color: Colors.blueGrey.shade300,
fontSize: 12,
),
hintText: 'Type destination here',
hintStyle:
kNormalTextStyle.copyWith(
color: Colors.blueGrey.shade300,
fontSize: 12,
),
),
),
),
],
),
const SizedBox(
height: 8,
),
//special message
const Text(
'Any special message?',
style: kSubHeading2TextStyle,
),
TextField(
controller:
specialMessageTxtEditingController,
style: kSubHeading3TextStyle,
maxLines: 2,
decoration: InputDecoration(
hintStyle: kNormalTextStyle.copyWith(
color: Colors.blueGrey.shade300,
fontSize: 12,
),
hintText:
'Any special message that you may wish to be sent to you, when being reminded? \n(optional)'),
),
Container(
margin: EdgeInsets.only(top: 4),
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
GetBuilder<CalendarController>(builder: (calendarController){
return ElevatedButton(
onPressed: () {
if (validateData()) {
addReminder(hr: (calendarController.hourValue * 23).toInt(), min: (calendarController.minuteValue * 59).toInt(), dropDownValue: calendarController.dropdownvalue, frequency: (calendarController.frequency * 10).toString());
Navigator.pop(context);
}
//TODO: handle submit button action button on popup dialog in reminder page
},
child: const Text('Submit'),
);
})
],
),
),
Padding(padding:EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),),
],
),
),
),
);
},
child: const Icon(Icons.add, color: Colors.black,),
),
dialog before keyboard appears screen pixel overflow after the keyboard appears
I tried Expanded widget. Then I tried with SingleChildScrollView, but the issue is still there. I want that when the keyboards appears, either the container gets smaller or it should go behind the screen without causing any overflow.
