TextField is hidden by keyboard inside of a Modal Bottom Sheet

[IhorKlimov]

import 'package:flutter/material.dart';

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

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('')),
      body: Container(),
      floatingActionButton: FloatingActionButton(onPressed: () {
        showModalBottomSheet(
            context: context,
            builder: (context) {
              return SizedBox(
                height: 300.0,
                child: Scaffold(
                  body: ListView.builder(
                    itemBuilder: (context, index) {
                      return TextField(
                        decoration:
                            InputDecoration(labelText: index.toString()),
                      );
                    },
                    itemCount: 30,
                  ),
                ),
              );
            });
      }),
    );
  }
}

Result

Clicked on 4th item

Perfectly, Modal Bottom Sheet should be lifted up till a TextField is visible, just like FAB

Flutter Doctor

[√] Flutter (Channel master, v0.5.5-pre.46, on Microsoft Windows [Version 10.0.17134.112], locale en-US)
\Error retrieving device properties for ro.product.cpu.abi:
error: closed
                                                                                                                                                                                                       [
!] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    X Android license status unknown.
[√] Android Studio (version 3.1)
[√] VS Code, 64-bit edition (version 1.24.0)
[√] Connected devices (1 available)

! Doctor found issues in 1 category.

[zoechi]

Please add the output of flutter doctor

[IhorKlimov]

@zoechi Done, also updated the code. TextField is visible if the bottom sheet is high enough, else it's covered, like on a screenshot

[zoechi]

@goderbauer

[andrelsmoraes]

I'm not sure if it's related, but take a look at this gist: https://gist.github.com/andrelsmoraes/9e4af0133bff8960c1feeb0ead7fd749

Behavior after fix: https://youtu.be/ESiCr0juFG8

[mohith7548]

Any fixes? The problem still persists. Please do Fix it because we Love #Flutter.

[IhorKlimov]

@mohith7548 As of now, make sure your ModalBottomSheet is high enough (at least keyboard height + TextView height), then TextField will be visible. Else don't use MBS for your input. Also, try andrelsmoraes' solution

[mohith7548]

Hey did you use showDialog method. When there is a text field in it. The keyboard automatically shifts the dialog up and appears on screen when the text field is tapped. Why it doesn't happen in case of ModalBottom sheet. This is a bug and it needs to be fixed soon

[lucasjinreal]

@andrelsmoraes Could u provide more codes for your youtube demo? This is exactly what I want achieve.

[andrelsmoraes]

@jinfagang Added some comments in my gist, please check it out and tell me if you need more details.

[lukepighetti]

Please fix this. See #20638

[jbg]

This may not work for all situations, but I have a modalBottomSheet that contains only a TextField, and it was quite simple to make it move up with the keyboard:

Padding(
  padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
  child: TextField()
)