I am using dropdown_search package in my flutter app. I have a dropdown field in bottom and when trying to search any item from the dropdown menu my search bar with popup goes behind the keyboard and I can’t even scroll the screen that time.
My screen code:
import 'package:bdbl_app/controller/leave_controller.dart';
import 'package:bdbl_app/model/active_employee_details_model.dart';
import 'package:bdbl_app/model/all_leave_employee.dart';
import 'package:bdbl_app/model/leave_model.dart';
import 'package:bdbl_app/theme/custom_color.dart';
import 'package:bdbl_app/ui/widgets/custom_appbar.dart';
import 'package:bdbl_app/ui/widgets/custom_button.dart';
import 'package:bdbl_app/utils/constants.dart';
import 'package:date_time_picker/date_time_picker.dart';
import 'package:dropdown_search/dropdown_search.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:intl/intl.dart';
class LeaveApplyScreen extends StatefulWidget {
LeaveApplyScreen({Key? key, this.title}) : super(key: key);
final title;
@override
State<LeaveApplyScreen> createState() => _LeaveApplyScreenState();
}
class _LeaveApplyScreenState extends State<LeaveApplyScreen> {
final _formKey = GlobalKey<FormState>();
final controller = Get.find<LeaveController>();
DateTime fromDate = DateTime.now();
void submit() {
if (!_formKey.currentState!.validate()) {
return;
}
_formKey.currentState!.save();
controller.applyPersonalLeave();
}
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
appBar: customAppbar(widget.title),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 20.0),
child: Form(
key: _formKey,
child: Column(
children: [
DropdownSearch<AllLeaveTypes>(
mode: Mode.MENU,
popupBackgroundColor: whiteColor,
showSearchBox: true,
showClearButton: true,
dropdownSearchDecoration: const InputDecoration(
hintText: 'Select Leave Type',
),
items: controller.leaveTypeList,
itemAsString: (AllLeaveTypes? lt) => lt!.nameEn.toString(),
validator: (value) {
if (value == null) {
return 'This field is required';
}
return null;
},
onChanged: (data) {
controller.leaveTypeId.value = data?.Id ?? 0;
for (var leaveData in controller.leaveList) {
if (leaveData.LeaveTypeName == data?.nameEn) {
controller.remainingLeaveBalance.value =
leaveData.userLeaveBalance!;
} else if (controller.leaveTypeId.value == 0) {
controller.remainingLeaveBalance.value = 0.0;
}
}
}),
Obx(() => Padding(
padding: const EdgeInsets.only(top: 10.0),
child: TextFormField(
enabled: false,
decoration: InputDecoration(
labelText: controller.remainingLeaveBalance.value
.toStringAsFixed(0)),
),
)),
const SizedBox(height: 10),
DropdownSearch<String>(
mode: Mode.MENU,
popupBackgroundColor: whiteColor,
showSearchBox: false,
showClearButton: true,
dropdownSearchDecoration: const InputDecoration(
hintText: 'When Leave?',
),
items: ['Pre Leave', 'Post Leave'],
// itemAsString: () => lt!.nameEn.toString(),
onChanged: (data) {
controller.whenLeave.value = data.toString();
}),
const SizedBox(height: 10),
Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(right: 5),
child: DateTimePicker(
type: DateTimePickerType.date,
dateMask: 'd MMM, yyyy',
initialDate: DateTime.now(),
firstDate: DateTime(2010),
lastDate:
DateTime.now().add(const Duration(days: 365)),
dateHintText: 'Leave From',
validator: (value) {
if (value!.isEmpty) {
return 'Required!';
}
return null;
},
onChanged: (val) {
final date = DateTime.parse(val);
fromDate = date;
String formattedDate =
DateFormat('yyyy-MM-dd').format(date);
controller.fromDate.value = formattedDate;
},
),
),
),
Expanded(
child: DateTimePicker(
type: DateTimePickerType.date,
dateMask: 'd MMM, yyyy',
initialDate: DateTime.now(),
firstDate: DateTime(2010),
lastDate: DateTime.now().add(const Duration(days: 365)),
dateHintText: 'To Date',
validator: (value) {
if (value!.isEmpty) {
return 'Required!';
}
return null;
},
onChanged: (val) {
final date = DateTime.parse(val);
Constants.validateDate(controller.fromDate.value, date);
// calculating difference for api
controller.differDate.value =
controller.daysBetween(fromDate, date);
String formattedDate =
DateFormat('yyyy-MM-dd').format(date);
controller.toDate.value = formattedDate;
},
),
),
],
),
Obx(() => Padding(
padding: const EdgeInsets.only(top: 10.0),
child: TextFormField(
enabled: false,
decoration: InputDecoration(
labelText: controller.differDate.toString(),
),
),
)),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: TextFormField(
decoration: InputDecoration(
labelText: 'Remarks',
),
onSaved: (value) {
controller.purposeOfLeave.value = value ?? '';
},
),
),
const SizedBox(height: 10),
const Divider(thickness: 2, color: whiteColor),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: TextFormField(
decoration:
InputDecoration(labelText: 'Address During Leave'),
onSaved: (value) {
controller.address.value = value ?? '';
},
),
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: TextFormField(
decoration: InputDecoration(labelText: 'Emergency No'),
onSaved: (value) {
controller.emergencyContactNo.value = value ?? '';
},
),
),
const SizedBox(height: 10),
const Divider(thickness: 2, color: whiteColor),
const SizedBox(height: 10),
DropdownSearch<AllLeaveEmployee>(
mode: Mode.MENU,
popupBackgroundColor: whiteColor,
showSearchBox: true,
showClearButton: true,
dropdownSearchDecoration: const InputDecoration(
hintText: 'Subs. Employee Name',
// hintStyle: TextStyle(color: whiteColor),
),
items: controller.allEmployee,
itemAsString: (AllLeaveEmployee? em) =>
'${em?.employeeCode.toString()}, ${em?.nameEnglish.toString()}',
onChanged: (data) {
controller.employeeCode.value = data?.employeeCode ?? '';
}),
const SizedBox(height: 20),
customButton(context, 'Submit', submit),
],
),
),
),
),
);
}
@override
void dispose() {
controller.leaveTypeList.clear();
controller.remainingLeaveBalance.value = 0.0;
controller.leaveTypeId.value = 0;
controller.differDate.value = 0;
super.dispose();
}
}
Without keyboard:
After keyboard pop up:
Is there any way to move dropdown field top when keyboard is pop up?
2
Answers
Try setting resizeToAvoidBottomInset to false
try the last version 5.0.1. this issue was fixed.