Flutter TexField input disappearing when entered from iOS keyboard

Question

Relatively new to Flutter. I'm trying to implement a login form and am encountering an issue where input in a TextField from an iOS device is disappearing upon selection of anything outside of the TextField.

This behaviour is observed both on a real iOS device, and also on the simulator. When not using the iOS keyboard on the simulator (using my MacBook keyboard) the issue does not occur. The issue also does not occur on an Android simulator, a Chrome web app or a MacOS app.

Here is my Widget

class LoginForm extends ConsumerWidget {
  const LoginForm({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    var emailController = TextEditingController();
    var passwordController = TextEditingController();
    ref.listen<AsyncValue>(loginControllerProvider, (previous, next) {
      if (next is AsyncError) {
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
            content: Text(next.error.toString()), backgroundColor: Colors.red));
      }
    });
    return Scaffold(
        body: CustomScrollView(slivers: [
      SliverAppBar(
          pinned: true,
          snap: false,
          floating: false,
          expandedHeight: (MediaQuery.of(context).size.height -
                  MediaQuery.of(context).padding.bottom) /
              2,
          flexibleSpace: const FlexibleSpaceBar(
              title: Text("foo"), background: FlutterLogo())),
      SliverList(
          delegate: SliverChildListDelegate([
        const SizedBox(height: 12),
        const Center(
            child: Text(
          'Welcome back',
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        )),
        const SizedBox(height: 12),
        const Center(
            child: Text(
          'Login to manage your account.',
          style: TextStyle(
            fontSize: 14,
          ),
        )),
        const SizedBox(height: 24),
        TextField(
          controller: emailController,
          decoration: const InputDecoration(
              border: OutlineInputBorder(), labelText: 'Email'),
        ),
        const SizedBox(height: 12),
        TextField(
          obscureText: true,
          controller: passwordController,
          decoration: const InputDecoration(
              border: OutlineInputBorder(), labelText: 'Password'),
        ),
        const SizedBox(height: 24),
        ElevatedButton(
            style: ElevatedButton.styleFrom(
                elevation: 0, minimumSize: const Size(1024, 60)),
            onPressed: () => ref
                .read(loginControllerProvider.notifier)
                .login(emailController.text, passwordController.text),
            child: const Text("Login", style: TextStyle(fontSize: 16))),
        SizedBox(
          width: 1024,
          height: 60,
          child: TextButton(
              onPressed: () => ref
                  .read(loginControllerProvider.notifier)
                  .authRepo
                  .registering = true,
              child: const Text(
                "Don't have an account? Register",
                style: TextStyle(fontSize: 14),
              )),
        )
      ]))
    ]));
  }
}

Here is some potentially relevant Flutter details:

➜ ✗ flutter doctor -v
[✓] Flutter (Channel stable, 3.3.2, on macOS 12.6 21G115 darwin-arm, locale en-GB)
    • Flutter version 3.3.2 on channel stable at /opt/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision e3c29ec00c (9 days ago), 2022-09-14 08:46:55 -0500
    • Engine revision a4ff2c53d8
    • Dart version 2.18.1
    • DevTools version 2.15.0

...

[✓] Xcode - develop for iOS and macOS (Xcode 14.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A309
    • CocoaPods version 1.11.3

...

• No issues found!

score 2 · Accepted Answer · answered Sep 24 '22 at 05:23

2

My bad. The issue is that you are creating Text editing controller inside the build method so it creates new controller every time build method is executed, move these lines to initstate or constructor it should be fine

var emailController = TextEditingController();
var passwordController = TextEditingController(

answered Sep 24 '22 at 05:23

Sanketh B. K

759
8
22

1

Ali I don’t see how this issue doesn’t occur on android, would like to know the reason if anyone knows – Sanketh B. K Sep 24 '22 at 05:26
That's really interesting, that has solved my issue, but like you've said I'm confused as to why the issue doesn't happen on any other platform. I'm guessing the keyboard causes a rebuild for some reason? – bchards Sep 24 '22 at 09:36
Thank you for you help by the way, I realise I didn’t actually say! – bchards Sep 24 '22 at 11:49
I found this question and answer about the keyboard causing a rebuild, which makes sense after reading https://stackoverflow.com/questions/56313800/why-does-the-software-keyboard-cause-widget-rebuilds-on-open-close but doesn’t answer why it doesn’t happen on android – bchards Sep 24 '22 at 11:53

score -1 · Answer 2 · answered Sep 23 '22 at 19:01

-1

Press cmd + k to toggle soft keyboard in ios emulator

answered Sep 23 '22 at 19:01

Sanketh B. K

759
8
22

1

The issue isn't that I can't get the keyboard to appear, it's that when I type from said keyboard into a TextField, the input then disappears. On both the simulator and a real device - as per the question. – bchards Sep 23 '22 at 19:15

Flutter TexField input disappearing when entered from iOS keyboard

2 Answers2