dropdown_search package 在 flutter 中弹出键盘时搜索框不向上移动

Question

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?

Answer 1

Try setting resizeToAvoidBottomInset to false

Answer 2

try the last version 5.0.1. this issue was fixed.