Flutter SearchBar (TextField) automatically losing focus and popping back to the previous screen

264 Views Asked by At

I have made a searchbar using flutter TextField. the problem is , whenever I touch on the field, it gains focus, keyboard rises, and then after a split second the keyboard goes back down and the screen pops up to the previous screen.

Here's the code.I have almost commented out every possible error causing line but it still remains intact.

import 'package:bookflix/Utils/Colors.dart';
import 'package:bookflix/Utils/Text.dart';
import 'package:bookflix/View/Widgets/tags_grid.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
import 'package:google_fonts/google_fonts.dart';

class Search extends StatefulWidget {
  const Search({super.key});

  @override
  State<Search> createState() => _SearchState();
}

class _SearchState extends State<Search> {
  final TextEditingController searchController = TextEditingController();

  //FocusNode myfocus = FocusNode();
  // bool isVisible = false;

  @override
  void initState() {
    super.initState();
    //myfocus.requestFocus();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      backgroundColor: AppColors.backgroundColor,
      appBar: AppBar(
          backgroundColor: AppColors.backgroundColor,
          elevation: 1,
          leading: IconButton(
              onPressed: () => context.pop(),
              icon: const Icon(
                Icons.arrow_back_ios,
                size: 25,
                color: AppColors.primaryColor,
              )),
          title: Text(
            'Explore',
            style: AppFonts.titleText,
          )),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: Container(
                  height: .045.sh,
                  width: .9.sw,
                  decoration: BoxDecoration(
                      color: AppColors.accentColor,
                      borderRadius: BorderRadius.circular(5)),
                  child: TextField(
                    //autofocus: true,
                    // focusNode: myfocus,
                    controller: searchController,
                    style: const TextStyle(
                        fontSize: 15, color: AppColors.textPrimary),
                    cursorWidth: 1,
                    cursorColor: AppColors.primaryColor,
                    decoration: InputDecoration(
                      enabledBorder:
                          const OutlineInputBorder(borderSide: BorderSide.none),
                      focusedBorder: const OutlineInputBorder(
                          borderSide: BorderSide(width: 1)),
                      suffixIcon: Visibility(
                        visible: searchController.text.isNotEmpty,
                        child: IconButton(
                            onPressed: () {
                              searchController.clear();
                            },
                            icon: const Icon(
                              Icons.clear,
                              size: 20,
                              color: AppColors.textSecondary,
                            )),
                      ),
                      //suffixIconConstraints: ,
                      hintText: 'psychology, colleen hoover, comics...',
                      hintStyle: const TextStyle(
                          fontWeight: FontWeight.w400, color: Colors.grey),
                      contentPadding: EdgeInsets.symmetric(vertical: .01.sh),
                      prefixIcon: const Icon(
                        Icons.search,
                        size: 28,
                      ),
                      border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(5)),
                    ),
                  ),
                ),
              ),
              Padding(
                padding:
                    EdgeInsets.only(left: .03.sw, top: .03.sh, bottom: .02.sh),
                child: Align(
                  alignment: Alignment.bottomLeft,
                  child: Text(
                    'Browse tags',
                    style: GoogleFonts.poppins(
                        color: AppColors.primaryColor,
                        fontWeight: FontWeight.w500,
                        fontSize: 20),
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(left: 0.015.sw, right: 0.015.sw),
                child:
                    SizedBox(height: 1.4.sh, width: 1.sw, child: const Tags()),
              )
            ],
          ),
        ),
      ),
    ));
  }
}


PS: Tags() is just a widget made up of gridBuilder. It is not causing problems. The problem existed before it was made.

Here's the ScreenShot [1]: https://i.stack.imgur.com/ZU2qc.png

0

There are 0 best solutions below