How to automatically Adjust text field when the keyboard pop up

Question

I have tried to implement a searchbar like youtube but I am facing issue when I have used this searchbar in a view which in near bottom of the screen, and when I am clicking on this search bar keyboard pops in but it instantly closed due to insufficient space, please help here.

enter image description here

class YouTubeSearchBar extends GetView<YouTubeSearchBarController> {
  YouTubeSearchBarController youTubeSearchBarController;

  List<String> Suggestions;
  final String? hintText;
  final Color? textColor;
  final TextStyle? hintStyle;

  YouTubeSearchBar({
    super.key,
    required this.youTubeSearchBarController,
    required this.Suggestions,
    this.hintText,
    this.textColor,
    this.hintStyle,
  });

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Padding(
        padding: const EdgeInsets.all(5.0),
        child: Row(
          children: [
            Expanded(
              child: AutoCompleteTextField<String>(
                key: GlobalKey<AutoCompleteTextFieldState<String>>(),
                clearOnSubmit: false,
                suggestionsAmount: 50,
                style: TextStyle(color: textColor),
                suggestions: Suggestions,
                keyboardType: TextInputType.text,
                controller: controller.searchController,
                focusNode: controller.focusNode,
                decoration: InputDecoration(
                  hintText: hintText ?? '',
                  hintStyle: hintStyle,
                  filled: true,
                  fillColor: Color(0xFFFFF7EB),
                  enabledBorder: const OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(8.0)),
                      borderSide:
                          BorderSide(color: Color(0xFFF9A826), width: 1.0)),
                  border: const OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(8.0)),
                      borderSide:
                          BorderSide(color: Color(0xFFF9A826), width: 1.0)),
                  prefixIcon: Icon(Icons.search),
                ),
                itemBuilder: (context, suggestion) => ListTile(
                  title: Text(suggestion),
                  leading: SizedBox(
                    width: 15,
                    height: 15,
                    child: Obx(() => Checkbox(
                          value: true, // Replace with your logic
                          onChanged: (bool? value) {},
                        )),
                  ),
                ),
                itemFilter: (item, input) {
                  if (input.isBlank!) return true;
                  return item.toLowerCase().startsWith(input.toLowerCase());
                },
                itemSorter: (a, b) => a.compareTo(b),
                itemSubmitted: (item) {
                  if (item.isEmpty) {
                    // Handle when an empty text is submitted (show all suggestions)
                    print('Show all suggestions');
                  } else {
                    // Handle when a non-empty text is submitted
                    print('Selected item: $item');
                  }
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

I am trying to solve this keyboard UI spacing problem.

Answer 1

You can add bottom padding from viewInsetsOf

return SingleChildScrollView(
      child: Padding(
        padding: EdgeInsets.only(
           top: 5,
           left: 5,
           right: 5,
           bottom: MediaQuery.viewInsetsOf(context).bottom,
         ),