flutter - After closing a page, the keyboard is displayed - Stack Overflow

When I click on the TextField, the keyboard appears which is OK. If I close the keyboard and open TestPage() and close it again, the keyboard appears without being asked.

Can I prevent this?

Why it is annoying: even if I am not on the 1st tab - the keyboard appears! The user does not understand this - as there is no text input on tabs 2 and 3, for example.

Is there a solution?

Thanks

The code:

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

class App extends StatefulWidget {
  const App({super.key});

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

class AppState extends State<App> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      top: false,
      bottom: false,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('APP'),
          actions: [
            IconButton(
              icon: const Icon(Icons.settings),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const TestPage()),
                );
              },
            ),
          ],
        ),
        body: SafeArea(child: buildContent()),
        bottomNavigationBar: buildBottomNavigationBar(),
      ),
    );
  }

  Widget buildContent() {
    return IndexedStack(
      index: _currentIndex,
      children: const [
        TextField(
          autofocus: false,
        ),
        Text('d'),
        Text('g'),
      ],
    );
  }

  BottomNavigationBar buildBottomNavigationBar() {
    return BottomNavigationBar(
      currentIndex: _currentIndex,
      onTap: (index) {
        setState(
          () {
            _currentIndex = index;
          },
        );
      },
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.telegram_sharp),
          label: 'Page 1',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.hail),
          label: 'Page 2',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.adb),
          label: 'Page 3',
        ),
      ],
    );
  }
}

When I click on the TextField, the keyboard appears which is OK. If I close the keyboard and open TestPage() and close it again, the keyboard appears without being asked.

Can I prevent this?

Why it is annoying: even if I am not on the 1st tab - the keyboard appears! The user does not understand this - as there is no text input on tabs 2 and 3, for example.

Is there a solution?

Thanks

The code:

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

class App extends StatefulWidget {
  const App({super.key});

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

class AppState extends State<App> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      top: false,
      bottom: false,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('APP'),
          actions: [
            IconButton(
              icon: const Icon(Icons.settings),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const TestPage()),
                );
              },
            ),
          ],
        ),
        body: SafeArea(child: buildContent()),
        bottomNavigationBar: buildBottomNavigationBar(),
      ),
    );
  }

  Widget buildContent() {
    return IndexedStack(
      index: _currentIndex,
      children: const [
        TextField(
          autofocus: false,
        ),
        Text('d'),
        Text('g'),
      ],
    );
  }

  BottomNavigationBar buildBottomNavigationBar() {
    return BottomNavigationBar(
      currentIndex: _currentIndex,
      onTap: (index) {
        setState(
          () {
            _currentIndex = index;
          },
        );
      },
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.telegram_sharp),
          label: 'Page 1',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.hail),
          label: 'Page 2',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.adb),
          label: 'Page 3',
        ),
      ],
    );
  }
}

• flutter
• dart

Share Improve this question Follow edited Jan 29 at 19:25 MrDevil asked Jan 29 at 11:19 MrDevilMrDevil 2133 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 2

You can write below code there to make sure the keyboard closes when you are done with the keyboard.

FocusScope.of(context).unfocus();

An example for your code

IconButton(
    icon: const Icon(Icons.settings),
    onPressed: () {
      FocusScope.of(context).unfocus(); // Unfocus any active text fields
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => const TestPage()),
      );
    },
  ),

If the solution I mentioned earlier did not work, you can try disabling the keyboard focus when the page first opens as another method.

Write a initState right above build widget like this:

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    FocusScope.of(context).requestFocus(FocusNode());
  });
}

or like this:

 final FocusNode _textFieldFocusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    _textFieldFocusNode.unfocus();
  }

 ...

TextField(
          focusNode: _textFieldFocusNode,
          autofocus: false,
        ),

  onTapOutside: (event) {
              FocusManager.instance.primaryFocus?.unfocus();
            },

Thank you here for at least steering me in a good direction! Now it works.