flutter 2.0: nested MaterialApps -> problem with textInput inside showModalBottomSheet

Question

In my App, I use 2 Material Apps to handle the Navigation with the BottomNavigation Bar. As my App is pretty complex, this was the best way to do this.

On one Screen, when the user is not logged in, a bottomSheet opens, where the user can put in his login credentials.

The bottomSheet shall appear above the Navigation Bar.

In the following Code Snippet, this is how i solved it.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

final _navigationKey = GlobalKey<NavigatorState>();

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      resizeToAvoidBottomInset: true,
      body: MaterialApp(
        navigatorKey: _navigationKey,
        routes: {
          '0': (context) => Home(),
          '1': (context) => Scaffold(backgroundColor: Colors.yellow),
        },
        initialRoute: '0',
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.account_box_rounded),
            label: 'account',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.baby_changing_station),
            label: 'stuff',
          )
        ],
        onTap: (int index) {
          setState(() {
            currentIndex = index;
          });
          Navigator.of(context).popUntil((route) => !(route is PopupRoute));
          _navigationKey.currentState.pushReplacementNamed(index.toString());
        },
      ),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      showModalBottomSheet(
        context: context,
        useRootNavigator: false,
        isScrollControlled: true,
        builder: (_) => Container(
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: TextField(),
          ),
        ),
      );
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      backgroundColor: Colors.red,
    );
  }
}

Now to the problem:

In flutter 1.22:
When the user taps on the TextInput, the Keyboard opens and the bottomSheet moves its position above the keyboard.

In flutter 2.0:
When the user taps on the TextInput, the Keyboard opens and the bottomSheet moves its position out of screen

Does anyone have a good workaround?

what I tried so far I gave the bottomSheet a bottom Padding:

bottom: MediaQuery.of(context).viewInsets.bottom),

But it didn't solve the problem

also asked on github: https://github.com/flutter/flutter/issues/71418#issuecomment-799192616 — Markus Hein, Mar 15 '21 at 07:44

score 1 · Answer 1 · answered Mar 18 '21 at 11:39

1

I think the app structure is a bit strange with the two nested MaterialApps. The behavior you described is not exactly the same I get when I use your code on my device.

However in my case I solved the problem by setting resizeToAvoidBottomInset: false to both the Scaffold elements.

answered Mar 18 '21 at 11:39

L. Gangemi

3,110
1
22
47

Do you use flutter 2.0? – Markus Hein Mar 19 '21 at 09:42
Yes, i do use flutter 2.0 – L. Gangemi Mar 19 '21 at 12:08

score 0 · Answer 2 · answered Mar 15 '21 at 14:00

I had the same issue, I fixed using a SingleChildScrollView inside my bottom sheet.

showModalBottomSheet(
  isScrollControlled: true,
  context: context,
  builder: (context) {
    return SingleChildScrollView(
    child: Container(
      padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
      child: ...,
    ),
  );
});

Source: https://github.com/flutter/flutter/issues/18564#issuecomment-586205403

flutter 2.0: nested MaterialApps -> problem with textInput inside showModalBottomSheet

2 Answers2