Open Keyboard unexpectedly closes if its Textfield is in a bottomSheet of a named Route

Question

In an app we're writing right now, we have the problem, that if one focuses a textfield inside a bottom sheet, the keyboard disappears after a short flicker.

After hours of trying to fix it, i tried to isolate this strange behavior and came up with the following bug:

If I'm tapping on a TextField inside a Bottom Sheet of a Scaffold of a Page which is not the home page, the keyboard disappears. (see sample)

I already posted this on https://github.com/flutter/flutter/issues/36271 but got no response yet.

Anyone got an idea? Is it really a bug or did I do something wrong with the routes?

Thank you in advance. Markus

sample code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        'secondPage': (_) => SecondPage(),
      },
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('it does work here'),
      ),
      body: Center(
        child: FlatButton(
            onPressed: () => Navigator.of(context).pushNamed('secondPage'),
            child: Container(
              width: 123,
              height: 23,
              color: Colors.red,
              child: Text(
                '2nd Page',
                textAlign: TextAlign.center,
              ),
            )),
      ),
      bottomSheet: Container(
        width: double.infinity,
        color: Colors.lightGreen,
        height: 90,
        child: Center(child: Container(width: 200, child: TextField())),
      ),
    );
  }
}

class SecondPage extends StatefulWidget {
  SecondPage({Key key}) : super(key: key);

  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('it does not work here'),
      ),
      bottomSheet: Container(
        width: double.infinity,
        color: Colors.lightGreen,
        height: 90,
        child: Center(child: Container(width: 200, child: TextField())),
      ),
    );
  }
}

Steps to Reproduce:

1. Tap on the Textfield on the Bottom. => Normal behavior
2. Tap on the red Button => Navigation to 2nd screen
3. Tap on the Textfield on the Bottom. => Keyboard does not stay open.

Update 1:

Providing a Global Key to the Container in the bottom Sheet forces the keyboard to stay alive, but then a red screen flickers on Ios and i get the following error:

I/flutter (15864): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (15864): The following assertion was thrown while finalizing the widget tree:
I/flutter (15864): Duplicate GlobalKey detected in widget tree.
I/flutter (15864): The following GlobalKey was specified multiple times in the widget tree. This will lead to parts of
I/flutter (15864): the widget tree being truncated unexpectedly, because the second time a key is seen, the previous
I/flutter (15864): instance is moved to the new location. The key was:
I/flutter (15864): - [GlobalKey#06a16]
I/flutter (15864): This was determined by noticing that after the widget with the above global key was moved out of its
I/flutter (15864): previous parent, that previous parent never updated during this frame, meaning that it either did
I/flutter (15864): not update at all or updated before the widget was moved, in either case implying that it still
I/flutter (15864): thinks that it should have a child with that global key.
I/flutter (15864): The specific parent that did not update after having one or more children forcibly removed due to
I/flutter (15864): GlobalKey reparenting is:
I/flutter (15864): - _InheritedResetNotifier
I/flutter (15864): A GlobalKey can only be specified on one widget at a time in the widget tree.
I/flutter (15864): 
I/flutter (15864): When the exception was thrown, this was the stack:
I/flutter (15864): #0      BuildOwner.finalizeTree.<anonymous closure> (package:flutter/src/widgets/framework.dart:2485:15)
I/flutter (15864): #1      BuildOwner.finalizeTree (package:flutter/src/widgets/framework.dart:2510:8)
I/flutter (15864): #2      _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:702:18)
I/flutter (15864): #3      _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:285:5)
I/flutter (15864): #4      _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1016:15)
I/flutter (15864): #5      _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:958:9)
I/flutter (15864): #6      _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:874:5)
I/flutter (15864): #10     _invoke (dart:ui/hooks.dart:236:10)
I/flutter (15864): #11     _drawFrame (dart:ui/hooks.dart:194:3)
I/flutter (15864): (elided 3 frames from package dart:async)
I/flutter (15864): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/HwSecImmHelper(15864): mSecurityInputMethodService is null
I/flutter (15864): Another exception was thrown: Duplicate GlobalKey detected in widget tree.

updated CodeSnippet:

class SecondPage extends StatefulWidget {
  SecondPage({Key key}) : super(key: key);

  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  static final Key _key = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('it does not work here'),
      ),
      bottomSheet: Container(
        key: _key,
        width: double.infinity,
        color: Colors.lightGreen,
        height: 90,
        child: Center(child: Container(width: 200, child: TextField())),
      ),
    );
  }
}

flutter doctor:

dynClient36:flutter_app mhein$ flutter doctor -v
[✓] Flutter (Channel stable, v1.7.8+hotfix.3, on Mac OS X 10.14.5 18F132, locale de-DE)
    • Flutter version 1.7.8+hotfix.3 at /Users/mhein/Documents/flutter
    • Framework revision b712a172f9 (8 days ago), 2019-07-09 13:14:38 -0700
    • Engine revision 54ad777fd2
    • Dart version 2.4.0

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at /Users/mhein/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 10.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.2.1, Build version 10E1001
    • CocoaPods version 1.7.0

[✓] iOS tools - develop for iOS devices
    • ios-deploy 1.9.4

[✓] Android Studio (version 3.4)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 37.0.1
    • Dart plugin version 183.6270
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)

[✓] VS Code (version 1.36.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.2.0

[✓] Connected device (2 available)
    • ONEPLUS A6003             • 89a98b7a      • android-arm64 • Android 9 (API 28)
    • Android SDK built for x86 • emulator-5554 • android-x86   • Android 9 (API 28) (emulator)

• No issues found!

Answer 1

A kind of magic, but when you keep the bottom sheet in state, it works:

class _SecondPageState extends State<SecondPage> {
  final _bottomSheet = Container(
    color: Colors.lightGreen,
    height: 90,
    child: Center(child: Container(width: 200, child: TextField())),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('it does not work here'),
      ),
      bottomSheet: _bottomSheet,
    );
  }
}

I got the idea, when i noticed that build method was called twice on TextField activation.

UPD:

It seems to me that keeping the BottomSheet in state helps maintain focus on the input field. Without this trick, when the widget is redrawn a second time due to the keyboard opening, the input field loses focus and the keyboard closes. The question remains - why the loss of focus does not occur when the router stack is empty?

Answer 2

This is an error with _formKey.currentState!.validate() You must have a Form(key: _formKey child: ..) wrapper for the fields you are submitting for validation.