Keyboard is adding extra padding above

Question

When I launch a keyboard (on iOS and Android) I have an extra 50 px padding added above it which shows an empty space.

This isn't caused by other suggested problems where there are multiple Scaffold widgets. I know that this is caused by my layout and I'm not sure if it can be fixed at the moment.

I have a static navigation bar that appears across the app at the bottom. This is 50px high and sits below CupertinoApp . When the keyboard is launched, extra padding is added to fill this space it seems. This navigation bar is a Container widget with InkWell links to open views directly, sort of like CupertinoTabScaffold except I don't have tabs, it just pushes or replaces the current navigation item

Adding resizeToAvoidBottomInset: false, can't be used as this removes the scroll action or doesn't include the 50px so content is hidden.

This problem only occurs when the keyboard is active

The CupertinoApp builder

Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () => Future<bool>.value(true),
      child: Column(
        children: <Widget>[
          Expanded(
            child: DefaultTextStyle(
                style: Fonts.defaultFontStyle(),
                child: CupertinoApp(
                  navigatorKey: navigatorKey,
                  routes: routes.builder,
                )),
          ),
          BottomBar(),
        ],
      ),
    );
  }

Adding a minimal example to get across a better idea

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  final NAVIGATION_HEIGHT = 50.0;

  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  static const home = "/";
  static const about = "/about";
  static const products = "/products";

  Map<String, WidgetBuilder> builder = {
    home: (BuildContext context) => MyPage(),
    about: (BuildContext context) => MyPage(),
    products: (BuildContext context) => MyPage(),
  };

  Widget _createButtonsBuilder(int index) {
    String pageTitle = builder.keys.toList()[index].substring(1);
    if (pageTitle.length == 0) {
      pageTitle = "Home";
    }

    return Expanded(
      child: Material(
        color: Colors.black87,
        child: InkWell(
            onTap: () {
              navigatorKey.currentState.push(CupertinoPageRoute<void>(
                builder: (BuildContext context) => MyPage(
                      title: "$pageTitle",
                  navigationHeight: NAVIGATION_HEIGHT,
                    ),
              ));
            },
            child: Container(
              padding: EdgeInsets.all(10.0),
              height: NAVIGATION_HEIGHT,
              child: Text(
                "$pageTitle",
                style: TextStyle(
                    inherit: true, color: Colors.white, fontSize: 20.0),
                textAlign: TextAlign.center,
              ),
            )),
      ),
    );
  }

  Widget _BottomBar() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: List.generate(builder.keys.toList().length,
              (int i) => _createButtonsBuilder(i)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.ltr,
      child: Container(
        color: Colors.white,
        child: Column(
          children: <Widget>[
            Expanded(
              child: CupertinoApp(
                title: 'Flutter Demo',
                routes: builder,
                navigatorKey: navigatorKey,
              ),
            ),
            _BottomBar()
          ],
        ),
      ),
    );
  }
}

class MyPage extends StatefulWidget {
  MyPage({Key key, this.title, this.navigationHeight}) : super(key: key);

  final String title;
  final double navigationHeight;

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

class _MyPageState extends State<MyPage> {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(),
        child: Scrollbar(
          child: SingleChildScrollView(
            child: SafeArea(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    '${widget.title}',
                  ),
                  SizedBox(height: 40.0),
                  Container(
                    margin: EdgeInsets.all(30.0),
                    child: CupertinoTextField(
                      placeholder: "Tap in here",
                    ),
                  ),
                  Container(
                      margin: EdgeInsets.all(30.0),
                      child: Text(
                          "When tapping to add focus to the above CupertinoTextField Widget the keyboard will appear as normal but because of the _BottomBar() outside the CupertinoApp the height (${widget.navigationHeight}px) is included in the padding above the keyboard")),
                  Container(
                      margin: EdgeInsets.all(30.0),
                      child: Text(
                          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi interdum blandit diam sed faucibus. Donec ut enim in ante luctus sagittis. Donec vestibulum aliquet nunc, in efficitur erat molestie quis. In dictum aliquet neque. Vivamus pharetra nibh dictum urna sodales malesuada. Nunc porta condimentum mi, sed laoreet erat maximus vitae. Nunc luctus nisi urna, a luctus nisi consectetur quis. Sed rhoncus euismod nisl, in laoreet leo molestie sed. Suspendisse aliquet commodo dui, sit amet rhoncus sapien venenatis in. Nulla tempus libero diam, non cursus odio euismod at. Fusce nec ipsum ipsum. Mauris congue blandit risus, vitae pretium leo euismod id. Vivamus venenatis finibus diam id auctor. Donec vel urna finibus erat viverra bibendum. Vivamus sagittis eros id bibendum tristique. Nullam eleifend elit dapibus elit porttitor, ac egestas libero mollis.\n\nMorbi eleifend ligula sed leo placerat tristique. Mauris consequat fringilla maximus. Fusce pharetra ultrices risus, quis fermentum urna ultrices non. Vivamus suscipit nunc non ipsum ultrices laoreet. Etiam sed vestibulum eros, nec tempus neque. Vestibulum efficitur mauris ac ipsum aliquet, et tincidunt massa suscipit. Vivamus enim justo, viverra tempor purus eu, elementum tempor tortor. Sed rhoncus gravida sem, vitae molestie augue iaculis et. Donec augue ligula, interdum id interdum sit amet, condimentum in dolor. Donec dignissim erat lorem, ut accumsan felis porta id. Nunc lorem enim, maximus ut odio at, ultrices sodales velit."))
                ],
              ),
            ),
          ),
        ) // This trailing comma makes auto-formatting nicer for build methods.
        );
  }
}

Answer 1

I wrapped my CupertinoApp in Scaffold widget which exposed bottomNavigationBar .

@override
  Widget build(BuildContext context) {
    return WillPopScope(
        onWillPop: () => Future<bool>.value(true),
        child: Scaffold(
          body: DefaultTextStyle(
                style: Fonts.defaultFontStyle(),
                child: CupertinoApp(
                  navigatorKey: navigatorKey,
                  routes: routes.builder,
                )),
          ),
          bottomNavigationBar: HomeBottomBar(),
        ));
  }

And then added resizeToAvoidBottomPadding = true to any CupertinoPageScaffold's that have CupertinoTextfield children