I'm having trouble with the TAB key in a web project I'm working on with Flutter. Basically, when I press the TAB key inside TextFields, I expect the Cursor to go to the next TextField. But it goes as I posted in the picture. In the lower part I add all the necessary codes. I would be grateful if you could share even the tiniest detail you know about how I can solve this.

My page

class UserForm extends GetView<UserRegistrationController> {
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          if (Responsive.isDesktop(context)) Expanded(child: SideMenu()),
          Expanded(
            flex: 5,
            child: SafeArea(
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    Header(),
                    Container(
                      color: backgrounContainerColor,
                      width: double.infinity,
                      height: MediaQuery.of(context).size.height,
                      child: Form(
                        child: Padding(
                          padding: const EdgeInsets.all(16.0),
                          child: Column(
                            children: [
                              userTextField(
                                  text: 'Name',
                                  controller: controller.nameController),
                              SizedBox(height: 16),
                              userTextField(
                                  text: 'Surname',
                                  controller: controller.surnameController),
                              SizedBox(height: 16),
                              userTextField(
                                  text: 'Telefon Numarası',
                                  controller: controller.phoneController),
                              SizedBox(height: 16),
                              userTextField(
                                  text: 'Email',
                                  controller: controller.emailController),
                         
                            ],
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

My TextFiled

  Row userTextField({text, controller}) {
    return Row(
      children: [
        Expanded(
          child: Column(
            children: [
              Container(
                height: 51,
                decoration: BoxDecoration(
                    color: Colors.white,
                    border: Border.all(color: borderColor),
                    borderRadius: BorderRadius.circular(8)),
                child: TextFormField(
                  controller: controller,
                  decoration: InputDecoration(
                    isCollapsed: true,
                    contentPadding: EdgeInsets.only(
                      left: 10,
                      bottom: 10,
                      top: 20,
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                          color: Color.fromARGB(255, 255, 255, 255),
                          width: 1.0),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                            color: Color.fromARGB(255, 255, 255, 255),
                            width: 1.0),
                        borderRadius: BorderRadius.circular(8)),
                    fillColor: Color(0xFFFFFFFF),
                    filled: true,
                    hintText: text,
                    hintStyle: TextStyle(
                      fontSize: 17,
                      fontFamily: 'Popins',
                      fontWeight: FontWeight.w400,
                      color: Color(0xFF82889A),
                    ),
                    prefixStyle: TextStyle(color: Colors.black),
                    labelStyle: TextStyle(color: Colors.black),
                  ),
                ),
              ),
            ],
          ),
        )
      ],
    );
  }

My SideMenu

class SideMenu extends GetView<DrawerMenuController> {
  const SideMenu({
    Key? key,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: SingleChildScrollView(
        child: Column(
          children: [
            DrawerHeader(
                child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Flexible(
                  child: SizedBox(
                    height: defaultPadding * 3,
                  ),
                ),
                SizedBox(
                  height: defaultPadding,
                ),
              ],
            )),
            DrawerListTile(
                title: "menu",
                imgUrl: "assets/menu/create_patrol.png",
                press: () {
                  Get.toNamed('/menu1');
                },
              ),
      
            DrawerListTile(
                title: "menu",
                imgUrl: "assets/menu/obyekt.png",
                press: () {
                  Get.toNamed('/menu2');
                },
              ),
     
           DrawerListTile(
                title: "menu",
                imgUrl: "assets/menu/other_check.png",
                press: () {
                  Get.toNamed('/menu3');
                },
              ),
              DrawerListTile(
                title: "menu",
                imgUrl: "assets/menu/other_check.png",
                press: () {
                  Get.toNamed('/menu4');
                },
              ),
            DrawerListTile(
                title: "menu",
                imgUrl: "assets/menu/novbetci.png",
                press: () {
                  Get.toNamed('/menu5');
                },
              ),
            DrawerListTile(
                title: "menu",
                imgUrl: "assets/menu/camera.png",
                press: () {
                  Get.toNamed('/menu6');
                },
              ),
            ),
            DrawerListTile(
              title: "menu",
              imgUrl: "assets/images/other.jpeg",
              press: () {
                Get.toNamed('/menu7');
              },
            ),
             DrawerListTile(
                title: "menu",
                imgUrl: "assets/menu/other_check.png",
                press: () {
                  Get.toNamed('/menu8');
                },
              ),  
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

You need to wrap the Column containing userTextField widgets with a FocusTraversalGroup class. This segregates focusable widgets in the the widget tree. Documentation link with example: https://api.flutter.dev/flutter/widgets/FocusTraversalGroup-class.html

This explains the flutter implementaion of keyboard focus system https://docs.flutter.dev/development/ui/advanced/focus