Disparition du champ Flutter TexField lorsqu'il est saisi à partir d'un clavier iOS

Question

Je suis relativement novice en matière de Flutter. J'essaie d'implémenter un formulaire de connexion et je rencontre un problème où la saisie dans un TextField à partir d'un appareil iOS disparaît lors de la sélection d'un élément en dehors du TextField.

Ce comportement est observé à la fois sur un appareil iOS réel et sur le simulateur. Lorsque je n'utilise pas le clavier iOS sur le simulateur (en utilisant le clavier de mon MacBook), le problème ne se produit pas. Le problème ne se produit pas non plus sur un simulateur Android, une application web Chrome ou une application MacOS.

Voici mon 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),
              )),
        )
      ]))
    ]));
  }
}

Voici quelques informations potentiellement pertinentes sur Flutter :

  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!

Answer 1

C'est une erreur. Le problème est que vous créez Le contrôleur d'édition de texte à l'intérieur de la méthode de construction, donc il crée un nouveau contrôleur à chaque fois que la méthode de construction est exécutée, déplacez ces lignes dans l'état initial ou dans le constructeur et tout devrait bien se passer.

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

Answer 2

Appuyez sur cmd + k pour activer le clavier virtuel dans l'émulateur ios.