Skip to content

The BottomNavigationBar and FloatingActionButton are jacked up by the keyboard #120342

@malgee012

Description

@malgee012
          "_When I was using flutter 3.0 and above, I found that when the input box is focused, bottomNavigationBar and floatingActionButton will be pushed up by the soft keyboard, even if resizeToAvoidBottomInset: false is set, it is invalid. Such a checkup is not very friendly. Is there any solution please?_" - Google Translate

Hi @shijia2118
I can not reproduce the issue with below sample code. When setting resizeToAvoidBottomInset: false, the bottomNavigationBar and floatingActionButton are not pushed up by the keyboard.

Sample code
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

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

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
  TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static List<Widget> _widgetOptions = <Widget>[
    Column(
      children: [
        Text(
          'Index 0: Home',
          style: optionStyle,
        ),
        TextField(),
      ],
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {

        },
        child: const Icon(Icons.add),
      ),
    );
  }
}
Demo
XRecorder_12092022_132746.mp4

Please provide a completed and minimal reproducible code sample so that we may verify this. Also, please provide the output of flutter doctor -v as well.

Thank you!

Originally posted by @huycozy in #111334 (comment)

Activity

malgee012

malgee012 commented on Feb 9, 2023

@malgee012
Author

I also encountered the problem that BottomNavigationBar and FloatingActionButton are pushed up by the keyboard, but it is caused by nesting an extra layer of Scaffold. According to the provided example demo, adding an extra layer of Scaffold will also appear to be pushed up The case where the keyboard is raised

malgee012

malgee012 commented on Feb 9, 2023

@malgee012
Author

I also encountered the problem that BottomNavigationBar and FloatingActionButton are pushed up by the keyboard, but it is caused by nesting an extra layer of Scaffold. According to the provided example demo, adding an extra layer of Scaffold will also appear to be pushed up The case where the keyboard is raised

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Scaffold(
        resizeToAvoidBottomInset: false,
        appBar: AppBar(
          title: const Text('BottomNavigationBar Sample'),
        ),
        body: Center(
          child: _widgetOptions.elementAt(_selectedIndex),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              label: 'Business',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.school),
              label: 'School',
            ),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.amber[800],
          onTap: _onItemTapped,
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {

          },
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
malgee012

malgee012 commented on Feb 9, 2023

@malgee012
Author

My solution: Reducing nested Scaffold solved my problem

added
in triagePresently being triaged by the triage team
on Feb 9, 2023
huycozy

huycozy commented on Feb 9, 2023

@huycozy
Member

Closing the issue as solved by yourself. When you have an issue in the future, please try to provide all or some of the information indicated in the template so that we can address this issue properly.

Issue Template
If you are looking for support, please check out our documentation
or consider asking a question on Stack Overflow:
- https://flutter.dev/
- https://api.flutter.dev/
- https://stackoverflow.com/questions/tagged/flutter?sort=frequent

If you have found a bug or if our documentation doesn't have an answer
to what you're looking for, then fill our the template below. Please read
our guide to filing a bug first: https://flutter.dev/docs/resources/bug-reports

Steps to Reproduce

Please tell us exactly how to reproduce the problem you are running into.

Please attach a small application (ideally just one main.dart file) that
reproduces the problem. You could use https://gist.github.com/ for this.

If the problem is with your application's rendering, then please attach
a screenshot and explain what the problem is.

1. ...
2. ...
3. ...


Please tell us which target platform(s) the problem occurs (Android / iOS / Web / macOS / Linux / Windows)
Which target OS version, for Web, browser, is the test system running?
Does the problem occur on emulator/simulator as well as on physical devices?

Target Platform:
Target OS version/browser:
Devices:

Run your application with `flutter run --verbose` and attach all the
log output below between the lines with the backticks. If there is an
exception, please see if the error message includes enough information
to explain how to solve the issue.

Run `flutter analyze` and attach any output of that command below.
If there are any analysis errors, try resolving them before filing this issue.

Finally, paste the output of running `flutter doctor -v` here.
added
r: solvedIssue is closed as solved
and removed
in triagePresently being triaged by the triage team
on Feb 9, 2023
github-actions

github-actions commented on Mar 3, 2023

@github-actions

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

locked as resolved and limited conversation to collaborators on Mar 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    r: solvedIssue is closed as solved

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @malgee012@huycozy

        Issue actions

          The BottomNavigationBar and FloatingActionButton are jacked up by the keyboard · Issue #120342 · flutter/flutter