The input field is hiding under the keyboard when it is used in the drawer widget

Question

I'm using the Text field in a drawer as shown in below GIF, the issue is when I'm selecting text field, it is hiding under the keyboard without scrolling up.

Code Explanation:

Firstly, I implemented a text field by wrapping it inside Scaffold and Single Child scroll view as shown in below code, when I selected text field, field is scrolling along with keyboard, which is working fine, but the problem is when I select the same text field, which is added in the Drawer, hiding the under keyboard without scrolling.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainView(),
    );
  }
}

class MainView extends StatefulWidget {
  @override
  _MainViewState createState() => _MainViewState();
}

class _MainViewState extends State<MainView> {
  /// Unique scaffold key used for drawer
  var scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      backgroundColor: Colors.white,
      endDrawer: DrawerWidget(),
      body: SingleChildScrollView(
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              SizedBox(
                height: MediaQuery.of(context).size.height / 1.5,
              ),
              _buildButton(),
              Padding(
                padding: const EdgeInsets.all(20.0),
                child: TextFormField(
                    decoration: new InputDecoration(
                  hintText: 'Text Field',
                  border: new OutlineInputBorder(
                      borderSide: new BorderSide(color: Colors.teal)),
                )),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildButton() {
    return MaterialButton(
      color: Colors.black,
      padding: EdgeInsets.only(left: 5.0, right: 5.0),
      child: Text(
        'Open End Drawer',
        style: TextStyle(fontSize: 15),
      ),
      onPressed: () {
        scaffoldKey.currentState.openEndDrawer();
      },
      minWidth: 50,
      height: 30,
      textColor: Colors.white,
    );
  }
}

Drawer with Text field

class DrawerWidget extends StatefulWidget {
  @override
  _DrawerWidgetState createState() => _DrawerWidgetState();
}

class _DrawerWidgetState extends State<DrawerWidget> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      key: Key('drawer_sized_box'),
      width: MediaQuery.of(context).size.width * 0.35,
      child: Drawer(
          child: Column(children: [
        SizedBox(
          height: MediaQuery.of(context).size.height / 1.5,
        ),
        Padding(
          padding: const EdgeInsets.all(20.0),
          child: TextFormField(
            decoration: new InputDecoration(
              hintText: 'Text Field',
              border: new OutlineInputBorder(
                  borderSide: new BorderSide(color: Colors.teal)),
            ),
          ),
        )
      ])),
    );
  }
}

Answer 1

I had the same issue, here's a workaround answer found it on github/flutter

Column(
  children: [
    Expanded(child: Drawer()),
    SizedBox(height: MediaQuery.of(context).viewInsets.bottom),
  ],
)

Thank to mhrst for the workaround solution