CupertinoTabScaffold prevents Textfield from gaining focus

[woozbooz]

I want to put TextField on AppBar. When i tap on TextField keyboard just appear for a second and then it disapear without any debug or error message.

sample code

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_icons/flutter_icons.dart';
import 'package:flutter/cupertino.dart';
import 'dart:math';

class MainPage extends StatefulWidget {
  @override
  _MyMainPageState createState() => _MyMainPageState();
}

class _MyMainPageState extends State<MainPage> with SingleTickerProviderStateMixin {
  final _scaffoldKey = GlobalKey<ScaffoldState>();
  GlobalKey globalKey = new GlobalKey(debugLabel: 'btm_app_bar');
  final _navigatorKey = GlobalKey<NavigatorState>();
  CupertinoTabController _tabController;
  TextEditingController _txtContrSearch;
  FocusNode _focusSearch;
  var rng = new Random();

  @override
  void initState() {
    super.initState();
    _tabController = new CupertinoTabController();
    _txtContrSearch=TextEditingController();
    _focusSearch = FocusNode();
  }

  @override
  void dispose() {
    _tabController.dispose();
    _txtContrSearch?.dispose();
    _focusSearch?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return 
            Scaffold(
                   key: _scaffoldKey,
                   backgroundColor: Colors.grey[100],
                   resizeToAvoidBottomInset: false,
                   appBar:
                      AppBar(
                        titleSpacing: 0,
                        leading:
                        GestureDetector(
                         child:
                          Icon(Icons.menu, size: 30,
                               color: Colors.black,
                          ),
                          onTap: () {
                            SystemSound.play(SystemSoundType.click);
                            _scaffoldKey.currentState.openDrawer();
                          },
                        ),
                        title:
                         Padding(padding: EdgeInsets.only(right: 5),
                         child:
                            Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Expanded(flex: 1,
                                child:
                                Container(alignment: Alignment.center,
                                margin: EdgeInsets.only(top: 6, bottom: 5),
                                padding: EdgeInsets.only(left: 5, right: 5),
                                decoration:
                                  BoxDecoration(shape: BoxShape.rectangle, borderRadius: BorderRadius.circular(8),
                                                color: Colors.white, border: Border.all(width: 1, color: Colors.grey[350])
                                ),
                                child:
                                CupertinoTextField(
                                  controller: _txtContrSearch,
                                  focusNode: _focusSearch,
                                  decoration: null,
                                  textInputAction: TextInputAction.done,
                                  onSubmitted: (x) {
                                  },
                                )),
                              ),
                              SizedBox(
                                width: 5,
                              ),
                              SizedBox(height: 40, width: 40,
                              child:
                              Stack(alignment: Alignment.center,
                              children: [
                                Icon(Icons.chat_bubble_outline, size: 30, color: Color(0xFF6985AB),),
                                Positioned(left: 30/4, top: 6,
                                  child:
                                  Container(alignment: Alignment.center, height: 13,
                                  width: 13,
                                  decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.redAccent),
                                  child:
                                  Text(rng.nextInt(100).toString(), textScaleFactor: 1.0, softWrap: false, overflow: TextOverflow.visible,),
                                  ))
                              ])),
                              Icon(AntDesign.getIconData('pushpino'), size: 30, color: Colors.black),
                            ])
                        ),
                        toolbarOpacity: 1,
                   ),
                   //bottomSheet: _bottomSheet(),
                   drawer: ....drawer(),                   
                   body:
                    SafeArea(child:
                        CupertinoTabScaffold(
                          resizeToAvoidBottomInset: false,
                          tabBar: CupertinoTabBar(
                            key: globalKey,
                            backgroundColor: Colors.white,
                            activeColor: Colors.blue,
                            inactiveColor: Colors.grey,
                            currentIndex: 0,
                            items: ...getTabItems(),
                            onTap: (x) {
                              SystemSound.play(SystemSoundType.click);
                            },
                          ),
                          tabBuilder: (_context, _index) {
                            return Container();
                          }
                        )
                    ),
    );
  }
}

If i remove CupertinoTabScaffold keyboard appear and work as intended.

Tested on Android 7.

Flutter doctor

> Doctor summary (to see all details, run flutter doctor -v):
> [√] Flutter (Channel stable, v1.9.1+hotfix.4, on Microsoft Windows [Version 10.0.14393], locale en-US)
> 
> [√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
> [√] Android Studio (version 3.4)
> [√] IntelliJ IDEA Ultimate Edition (version 2017.2)
> [√] Connected device (1 available)
> 
> • No issues found!

[janmoppel]

Hello @woozbooz !

Thank you for posting an issue.
Can you please also post the flutter doctor -v command output?

[iapicca]

Hi @woozbooz
in your code is quite complex while the issue you describing
is specific to TextField

does this code still represent the issue you are describing?

simplified code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(home: HomePage());
}

class HomePage extends StatefulWidget {
  @override
  _HomePage createState() => _HomePage();
}

class _HomePage extends State<HomePage>  {
  String _text;
  TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
  }

  @override
  void dispose() {
     super.dispose();
    _controller?.dispose();
  }

  @override
  Widget build(BuildContext context)=> Scaffold(
    resizeToAvoidBottomInset: false,
    appBar: AppBar(
      title:  CupertinoTextField(
        controller: _controller,
        textInputAction: TextInputAction.done,
        onSubmitted: (s)=> setState(()=> _text = s) ,
      )
    ),
    body: Center(
      child: Text(_text??'hello world'),),
  );
}

thank you for the information you provided

[woozbooz]

@iapicca No, this code not represent the issue because it not contain CupertinoTabScaffold. The problem is, i think, with FocusScope mechanics inside CupertinoTabScaffold widget.

@janmoppel

[√] Flutter (Channel stable, v1.9.1+hotfix.4, on Microsoft Windows [Version 10.0.14393], locale en-US)
    • Flutter version 1.9.1+hotfix.4 at Z:\flutter
    • Framework revision cc949a8e8b (8 weeks ago), 2019-09-27 15:04:59 -0700
    • Engine revision b863200c37
    • Dart version 2.5.0

[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at Z:\ANDSDK
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • ANDROID_HOME = Z:\ANDSDK
    • Java binary at: Z:\AndStudio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
    • All Android licenses accepted.

[√] Android Studio (version 3.4)
    • Android Studio at Z:\AndStudio
    • Flutter plugin version 36.0.1
    • Dart plugin version 183.6270
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)

[√] IntelliJ IDEA Ultimate Edition (version 2017.2)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2017.2
    • Flutter plugin version 21.2.2
    • Dart plugin version 172.3317.48

[√] Connected device (1 available)
    • PRO 7 • 79BHADRNTQWEK • android-arm64 • Android 7.0 (API 24)
• No issues found!

[woozbooz]

\cupertino\tab_scaffold.dart
there is code:

@override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _focusActiveTab();
  }

if i comment this line _focusActiveTab(); keyboard appear normally on screen, but in output window i got next error:

I/flutter ( 6260): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter ( 6260): The following NoSuchMethodError was thrown building _TabSwitchingView(dirty, state:
I/flutter ( 6260): _TabSwitchingViewState#6b346):
I/flutter ( 6260): The method '[]' was called on null.
I/flutter ( 6260): Receiver: null
I/flutter ( 6260): Tried calling: [](0)
I/flutter ( 6260)

[woozbooz]

I think flutter team must add to this code (tab_scaffold) some kind of flag wich will show why exactly didChangeDependencies() called. And if it is keyboard appear then not to call _focusActiveTab();

[woozbooz]

If somebody need a workaroud:
replace code

void _focusActiveTab() {
    if (tabFocusNodes?.length != widget.tabNumber) {
      tabFocusNodes = List<FocusScopeNode>.generate(
        widget.tabNumber,
        (int index) => FocusScopeNode(debugLabel: 'Tab Focus Scope $index'),
      );
    }
    FocusScope.of(context).setFirstFocus(tabFocusNodes[widget.currentTabIndex]);
  }

in tab_scaffold.dart with next code:

void _focusActiveTab() {
    if (tabFocusNodes?.length != widget.tabNumber) {
      tabFocusNodes = List<FocusScopeNode>.generate(
        widget.tabNumber,
        (int index) => FocusScopeNode(debugLabel: 'Tab Focus Scope $index'),
      );
     FocusScope.of(context).setFirstFocus(tabFocusNodes[widget.currentTabIndex]);
    }
  }

[The-five-stooges]

same issue on bottomsheet

[TahaTesser]

flutter doctor -v

[✓] Flutter (Channel dev, 1.20.0-2.0.pre, on Mac OS X 10.15.5 19F101, locale
    en-GB)
    • Flutter version 1.20.0-2.0.pre at /Users/tahatesser/Code/flutter_dev
    • Framework revision 15a28159bc (9 days ago), 2020-06-23 04:52:58 -0700
    • Engine revision 91a63d6a44
    • Dart version 2.9.0 (build 2.9.0-19.0.dev 7e72c9ae7e)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.0
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

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

[✓] Connected device (5 available)
    • SM M305F      • 32003c30dc19668f          • android-arm64  • Android 10
      (API 29)
    • Taha’s iPhone • 00008020-001059882212002E • ios            • iOS 13.5.1
    • macOS desktop • macos                     • darwin-x64     • Mac OS X
      10.15.5 19F101
    • Web Server    • web-server                • web-javascript • Flutter Tools
    • Chrome        • chrome                    • web-javascript • Google Chrome
      83.0.4103.116

• No issues found!

Code Sample

import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      theme: ThemeData.dark(),
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  @override
  _MyMainPageState createState() => _MyMainPageState();
}

class _MyMainPageState extends State<MainPage>
    with SingleTickerProviderStateMixin {
  final _scaffoldKey = GlobalKey<ScaffoldState>();
  GlobalKey globalKey = new GlobalKey(debugLabel: 'btm_app_bar');
  final _navigatorKey = GlobalKey<NavigatorState>();
  CupertinoTabController _tabController;
  TextEditingController _txtContrSearch;
  FocusNode _focusSearch;
  var rng = new Random();

  @override
  void initState() {
    super.initState();
    _tabController = new CupertinoTabController();
    _txtContrSearch = TextEditingController();
    _focusSearch = FocusNode();
  }

  @override
  void dispose() {
    _tabController.dispose();
    _txtContrSearch?.dispose();
    _focusSearch?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      backgroundColor: Colors.grey[100],
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        titleSpacing: 0,
        leading: GestureDetector(
          child: Icon(
            Icons.menu,
            size: 30,
            color: Colors.black,
          ),
          onTap: () {
            SystemSound.play(SystemSoundType.click);
            _scaffoldKey.currentState.openDrawer();
          },
        ),
        title: Padding(
            padding: EdgeInsets.only(right: 5),
            child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(
                    flex: 1,
                    child: Container(
                        alignment: Alignment.center,
                        margin: EdgeInsets.only(top: 6, bottom: 5),
                        padding: EdgeInsets.only(left: 5, right: 5),
                        decoration: BoxDecoration(
                            shape: BoxShape.rectangle,
                            borderRadius: BorderRadius.circular(8),
                            color: Colors.white,
                            border:
                                Border.all(width: 1, color: Colors.grey[350])),
                        child: CupertinoTextField(
                          controller: _txtContrSearch,
                          focusNode: _focusSearch,
                          decoration: null,
                          textInputAction: TextInputAction.done,
                          onSubmitted: (x) {},
                        )),
                  ),
                  SizedBox(
                    width: 5,
                  ),
                  SizedBox(
                      height: 40,
                      width: 40,
                      child: Stack(alignment: Alignment.center, children: [
                        Icon(
                          Icons.chat_bubble_outline,
                          size: 30,
                          color: Color(0xFF6985AB),
                        ),
                        Positioned(
                            left: 30 / 4,
                            top: 6,
                            child: Container(
                              alignment: Alignment.center,
                              height: 13,
                              width: 13,
                              decoration: BoxDecoration(
                                  shape: BoxShape.circle,
                                  color: Colors.redAccent),
                              child: Text(
                                rng.nextInt(100).toString(),
                                textScaleFactor: 1.0,
                                softWrap: false,
                                overflow: TextOverflow.visible,
                              ),
                            ))
                      ])),
                  Icon(Icons.add, size: 30, color: Colors.black),
                ])),
        toolbarOpacity: 1,
      ),
      //bottomSheet: _bottomSheet(),
      drawer: Drawer(),
      body: SafeArea(
          child: CupertinoTabScaffold(
              resizeToAvoidBottomInset: false,
              tabBar: CupertinoTabBar(
                items: const <BottomNavigationBarItem>[
                  BottomNavigationBarItem(
                    icon: Icon(CupertinoIcons.home),
                    title: Text('Home'),
                  ),
                  BottomNavigationBarItem(
                    icon: Icon(CupertinoIcons.conversation_bubble),
                    title: Text('Support'),
                  ),
                  BottomNavigationBarItem(
                    icon: Icon(CupertinoIcons.profile_circled),
                    title: Text('Profile'),
                  ),
                ],
              ),
              tabBuilder: (_context, _index) {
                return Container();
              })),
    );
  }
}

[carmas123]

Confirm, same problem in 1.20 :(
This is a very bad news for me. This regression is a big problem when update Flutter. After every framework upgrade we need to recheck all app functionality for each app element.
After that we discover a bug that we cannot solve without edit the source framework code.

If Flutter want to become the world's first multi platform SDK we cannot have this problem after every update.

[GuoZhiQiang]

Try put the code in a @try @catch block ? May be it has an error . When I navigate from page A to B, an error of Navigator occurs during navigation. That results the keyboard auto disappear in page B.

[maheshmnj]

Reproduces with this minimal code sample on stable 3.3 and the master 3.6.

Screen.Recording.2022-11-23.at.4.16.49.PM.mov

On removing CupertinoTabScaffold textfield works as intended, This is definitely an issue with CupertinoTabScaffold

code sample

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  @override
  _MyMainPageState createState() => _MyMainPageState();
}

class _MyMainPageState extends State<MainPage>
    with SingleTickerProviderStateMixin {
  late TextEditingController _txtContrSearch;

  @override
  void initState() {
    _txtContrSearch = TextEditingController();
    super.initState();
  }

  @override
  void dispose() {
    _txtContrSearch.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: Container(
            decoration: BoxDecoration(
                shape: BoxShape.rectangle,
                borderRadius: BorderRadius.circular(8),
                color: Colors.white,
                border: Border.all(width: 1, color: Colors.grey.shade400)),
            child: CupertinoTextField(
              controller: _txtContrSearch,
              decoration: null,
              textInputAction: TextInputAction.done,
              onSubmitted: (x) {},
            )),
        toolbarOpacity: 1,
      ),
      body: CupertinoTabScaffold(
          tabBar: CupertinoTabBar(
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(CupertinoIcons.home),
                label: 'Home',
              ),
              BottomNavigationBarItem(
                icon: Icon(CupertinoIcons.conversation_bubble),
                label: 'Support',
              ),
              BottomNavigationBarItem(
                icon: Icon(CupertinoIcons.profile_circled),
                label: 'Profile',
              ),
            ],
          ),
          tabBuilder: (_context, _index) {
            return Container();
          }),
    );
  }
}

flutter doctor -v (mac)

[✓] Flutter (Channel master, 3.6.0-6.0.pre.33, on macOS 12.6 21G115 darwin-arm64,
    locale en-IN)
    • Flutter version 3.6.0-6.0.pre.33 on channel master at
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision a9858ec524 (72 minutes ago), 2022-11-21 10:58:11 -0500
    • Engine revision 46a6b54295
    • Dart version 2.19.0 (build 2.19.0-406.0.dev)
    • DevTools version 2.19.0
    • If those were intentional, you can disregard the above warnings; however it is
      recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

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

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64
      • macOS 12.6 21G115 darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript
      • Google Chrome 107.0.5304.110

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[✓] Flutter (Channel stable, 3.3.9, on macOS 12.6 21G115 darwin-arm, locale en-IN)
    • Flutter version 3.3.9 on channel stable at /Users/mahesh/Development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b8f7f1f986 (24 hours ago), 2022-11-23 06:43:51 +0900
    • Engine revision 8f2221fbef
    • Dart version 2.18.5
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

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

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.6 21G115 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 107.0.5304.110

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[flutter-triage-bot]

The triaged-android label is irrelevant if there is no team-android label or fyi-android label.

[justinmc]

Can this still be reproduced on the latest master?