KijeviGombooc
KijeviGombooc

Reputation: 342

Why does the following Flutter AutofillGrouo code have keyboard disappearing bug?

The below code has the following problem on android Samsung phone: When I enter a TextFormField, it suggests login data while showing up keyboard. If I start typing the keyboard disappears. My guess is that the Samsung password manager is the focus and that is why keyboard disappears when I tap on it. How to solve this? The code works on emulated Google device as expected. I use two custom widgets but feel free to treat AsyncElevatedButton as an ElevatedButton and AnimatedAppear as some combination of Animated widgets.

     @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Login"),
      ),
      body: Form(
        key: _formKey,
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: AutofillGroup(
            child: Column(
              children: [
                TextFormField(
                  enabled: !loading,
                  controller: _usernameController,
                  validator: _usernameValidator,
                  textInputAction: TextInputAction.next,
                  autofillHints: const [
                    AutofillHints.email,
                    AutofillHints.name
                  ],
                  decoration: const InputDecoration(
                    hintText: "Username",
                    hintStyle: TextStyle(color: Colors.grey),
                  ),
                ),
                const SizedBox(height: 20),
                TextFormField(
                  enabled: !loading,
                  controller: _passwordController,
                  validator: _passwordValidator,
                  textInputAction: TextInputAction.done,
                  autofillHints: const [
                    AutofillHints.password,
                  ],
                  decoration: InputDecoration(
                    hintText: "Password",
                    hintStyle: const TextStyle(color: Colors.grey),
                    suffixIcon: IconButton(
                      onPressed: _onObscurePasswordPressed,
                      isSelected: obscurePassword,
                      icon: const Icon(Icons.visibility_off),
                      selectedIcon: const Icon(Icons.visibility),
                    ),
                  ),
                  obscureText: obscurePassword,
                ),
                const SizedBox(height: 24),
                AsyncElevatedButton(
                  onPressed: _dummyLoginPressed,
                  width: 200,
                  height: 50,
                  child: const Text("Login"),
                ),
                if (errorMessage != null) const SizedBox(height: 24),
                AnimatedAppear(
                  visible: errorMessage != null,
                  duration: const Duration(milliseconds: 150),
                  invisibleOffset: const Offset(0, -1),
                  child: Text(
                    errorMessage ?? "",
                    style: const TextStyle(color: Colors.red),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

Upvotes: 0

Views: 20

Answers (0)

Related Questions