Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Keyboard instantly close when click on TextField

Whenever I click a text field, the keyboard opens for a split second and closes. There are no errors in the debug menu as well. I have a login page that is in development, and it has nothing but a TextFiled() empty widget. It’s working fine.

How it worked: I removed key: scaffoldkey (but then drawer will not open)

Here is my HomePage file

import 'package:flutter/material.dart';
import 'package:resturant/constant.dart';
import 'package:resturant/widgets/items.dart';
import 'package:resturant/widgets/sidemenu.dart';
import 'package:resturant/widgets/welcome.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    TabController tabController = TabController(length: 3, vsync: this);
    var scaffoldkey = GlobalKey<ScaffoldState>();
    double devicewidth = MediaQuery.of(context).size.width;
    double deviceheight = MediaQuery.of(context).size.height;
    return PopScope(
      canPop: false,
      child: SafeArea(
          child: Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: const Color(0xFFFFF5F5),
        key: scaffoldkey,
        drawer: const SideMenu(),
        appBar: AppBar(
          backgroundColor: const Color(0xFFFFF5F5),
          title: IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.shopping_cart_checkout_rounded,
              color: Color(0xffFF3A3A),
              size: 30,
            ),
          ),
          titleSpacing: devicewidth - 110,
          leading: IconButton(
            onPressed: () {
              scaffoldkey.currentState!.openDrawer();
            },
            icon: const Icon(
              Icons.menu_rounded,
              color: Color(0xffFF3A3A),
              size: 35,
            ),
          ),
          automaticallyImplyLeading: false,
        ),
        body: Column(
          children: [
            const Expanded(flex: 2, child: WelcomeWidget()),
            SizedBox(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Padding(
                    padding: EdgeInsets.only(
                        left: defaultPadding + 10,
                        top: 8,
                        right: defaultPadding + 10),
                    child: TextField(
                      decoration: InputDecoration(
                          prefixIconColor: Color(0xFFFF6666),
                          filled: true,
                          fillColor: Color(0xFFFFDDDD),
                          prefixIcon: Icon(Icons.search),
                          hintText: 'Search Food',
                          hintStyle: TextStyle(color: Color(0xFFFF6666)),
                          focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Color(0xFFFFDDDD), width: 0)),
                          enabledBorder: OutlineInputBorder(
                              borderRadius:
                                  BorderRadius.all(Radius.circular(8)),
                              borderSide: BorderSide(
                                  color: Color(0xFFFFDDDD), width: 0)),
                          border: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Color(0xFFFFDDDD), width: 0),
                              borderRadius:
                                  BorderRadius.all(Radius.circular(8)))),
                    ),
                  ),
                  Padding(
                      padding: const EdgeInsets.only(bottom: 15),
                      child: TabBar(
                        padding: EdgeInsets.zero,
                        labelPadding: EdgeInsets.zero,
                        indicatorPadding: EdgeInsets.zero,
                        controller: tabController,
                        indicatorColor: const Color(0xffFF2B2B),
                        labelColor: const Color(0xffFF2B2B),
                        labelStyle:
                            const TextStyle(fontWeight: FontWeight.bold),
                        unselectedLabelColor: Colors.black,
                        tabs: const [
                          Tab(
                            text: 'Items',
                          ),
                          Tab(
                            text: 'Combos',
                          ),
                          Tab(
                            text: 'Deals',
                          ),
                        ],
                      ))
                ],
              ),
            ),

            // List of food items

            Expanded(
                flex: deviceheight > 830 ? 8 : 8,
                child: TabBarView(controller: tabController, children: [
                  const ItemsWidget(),
                  Container(
                    width: devicewidth,
                    color: Colors.yellow,
                  ),
                  Container(
                    width: devicewidth,
                    color: Colors.black,
                  )
                ])),
          ],
        ),
      )),
    );
  }
}

I don’t know how I can make both work together the drawer open drawer and textfield. Can someone help me with this?

Tags:

2

Answers


  1. 0

    scaffoldkey should not be initialized inside build, when keyboard is showing, build will be invoked, then created a new scaffoldkey, a new Scaffold, then keyboard will hide immediately, just move scaffoldkey outside like below

    class _HomePageState extends State<HomePage> with TickerProviderStateMixin {

  var scaffoldkey = GlobalKey<ScaffoldState>();

}
    Login or Signup to reply.
  2. 0

    By making the scaffoldKey static, you ensure it is not recreated during widget rebuilds caused by the keyboard opening or closing. This stabilization prevents the issue of the keyboard unexpectedly closing

    import 'package:flutter/material.dart';
import 'package:resturant/constant.dart';
import 'package:resturant/widgets/items.dart';
import 'package:resturant/widgets/sidemenu.dart';
import 'package:resturant/widgets/welcome.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
// make the scaffoldKey static
 static var scaffoldkey = GlobalKey<ScaffoldState>();
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search