Flutter Bottom Navigation Bar pads twice for keyboard

Question

Having problem with BottomNavigationBar where it increases in height when the keyboard is up

Before

After focused on TextField

Would really appreciate insight on this problem. Thank you very much!

Code:

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      bottomNavigationBar: new BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          new BottomNavigationBarItem(icon: new Icon(Icons.all_inclusive), title: new Text("Hello"), backgroundColor: Colors.cyan),
          new BottomNavigationBarItem(icon: new Icon(Icons.home), title: new Text("Hello"), backgroundColor: Colors.lightGreen),
        ],
      ),
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new TextField(),
    );
  }
}

Solution 1

Scaffold(
        ...
        resizeToAvoidBottomPadding: false,
        ...
}

try this. There was a large space between keyboard and input field in my case. (not totally the same, my tab bar was normal)

I solved it by setting this property. I have no idea if it would work in your case. Good luck!!

Solution 2

This looks to me like this known issue. https://github.com/flutter/flutter/issues/12084

If there are more than one scaffold, the padding is added once for each scaffold.