Keyboard hiding my bottom sheet text field in flutter

Question

Keyboard hiding my bottom sheet text field in flutter. I opened a bottom sheet for textfield but when starting to enter some text, keyboard opens and hides textfield bottom sheet and 'save' buttom too, so not able to see what i'm typing in textfield.

see below image

I want this result:

Code:

Opening bottom sheet on click of '+ Add' button.

showModalBottomSheet(
                  context: context,
                  builder: (BuildContext context) {
                    return Form(
                      key: formKey,
                      child: Container(
                        padding: const EdgeInsets.all(8),
                        height: MediaQuery.of(context).size.height/4.5,
                        // color: Colors.red,
                        child: Column(
                          children: <Widget>[
                            Container(
                              padding: const EdgeInsets.all(10),
                              child: TextFormField(
                                controller: _noteTextController,
                                maxLines: 2,
                                 minLines: 2,
                                decoration: InputDecoration(
                                  hintText: "Add Note",
                                  border: InputBorder.none
                                ),
                                validator: (value){
                                  if(value.trim().isEmpty){
                                    return 'Notes can\'t be empty';

                                  } else {
                                    return null;
                                  }
                                },
                              ),
                            ),
                            Container(
                              padding: const EdgeInsets.all(8),
                              width: MediaQuery.of(context).size.width,
                              // color: Colors.black,
                              alignment: Alignment.topRight,
                              child: InkWell(
                                onTap: (){
                                  if (formKey.currentState.validate()) {
                                    formKey.currentState.save();
                                    DateTime noteDate = DateTime.now();
                                    setState(() {
                                      notes.add(
                                        NoteModel(
                                          date: noteDate,
                                          noteText: _noteTextController.text
                                        )
                                      );
                                    });
                                    Navigator.of(context).pop();
                                    _noteTextController.clear();
                                  }

                                },
                                child: Container(
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                    color: Colors.blue,
                                    borderRadius: BorderRadius.circular(8)
                                  ),
                                  width: MediaQuery.of(context).size.width/5,
                                  height: MediaQuery.of(context).size.height/25 ,
                                  child: Text("Save", style:TextStyle(
                                    color: Colors.white,
                                    fontSize: 19
                                  )),
                                ),
                              ),

                            )
                          ],
                        ),
                      ),
                    );
                  }, 

                );

Solution

Here is a simple workaround that would suite your use case:

Using the minimal code from your example, try to wrap the Widget with AnimatedPadding and wraps it inside SingleChildScrollView to push the BottomSheet from bottom and thus preventing keyboard from overlapping.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: TextButton.icon(
        icon: Icon(
          Icons.add,
          color: Colors.blue,
        ),
        label: Text(
          'Add',
          style: TextStyle(
            color: Colors.blue,
          ),
        ),
        onPressed: () {
          showModalBottomSheet<void>(
            // isScrollControlled: true,
            context: context,
            builder: (BuildContext context) {
              return Form(
                key: key,
                child: SingleChildScrollView(
                  child: AnimatedPadding(
                    padding: MediaQuery.of(context).viewInsets,
                    duration: const Duration(milliseconds: 100),
                    curve: Curves.decelerate,
                    child: Column(
                      children: <Widget>[
                        Container(
                          padding: const EdgeInsets.all(10),
                          child: TextFormField(
                            maxLines: 2,
                            minLines: 2,
                            decoration: InputDecoration(
                                hintText: "Add Note", border: InputBorder.none),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

Comments

[Mohammad Assad Arshad]

try the fix here if that works: github.com/flutter/flutter/issues/17861

[Shruti Ramnandan Sharma]

Yes , thank you so much it works

[Shruti Ramnandan Sharma]

Thank you for giving your precious time.