Keyboard is pushing the FloatingActionButton upward in flutter app

Question

I am trying to create a simple To Do App in in flutter with a Floating Action Button in the bottom which when clicked show an Alert Dialog to add items to the list. Every time I click on the button, the Keyboard pushes the Action Button upward causing overflowing error. Is there any way to avoid pushing the action button upward when Keyboard is opened? Here is the snapshot I took: Snapshot Below the source code:

import 'package:flutter/material.dart';
import '../model/todo_item.dart';

class ToDoScreen extends StatefulWidget {
  @override
  _ToDoScreenState createState() => _ToDoScreenState();
}

class _ToDoScreenState extends State<ToDoScreen> {
  TextEditingController _textEditingController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueAccent,
      body: Column(
        children: <Widget>[ToDoItem("Going for a Walk", "12 January, 2019")],
      ),
      floatingActionButton: FloatingActionButton(
        tooltip: 'Add Item',
        child: Icon(Icons.add),
        backgroundColor: Colors.red,
        onPressed: _showFormDialog,
      ),
    );
  }

  void _showFormDialog() {
    var alert = AlertDialog(
      content: Row(
        children: <Widget>[
          Expanded(
            child: TextField(
              controller: _textEditingController,
              autofocus: true,
              decoration: InputDecoration(
                  labelText: "Item",
                  hintText: "eg. Buy Vegetables",
                  icon: Icon(Icons.note_add)),
            ),
          )
        ],
      ),
      actions: <Widget>[
        FlatButton(
          onPressed: () {
            // _handleSubmit(_textEditingController.text);
            _textEditingController.clear();
          },
          child: Text("Save ToDo"),
        ),
        FlatButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text("Cancel"),
        )
      ],
    );
    showDialog(context: context, builder: (BuildContext context) => alert);
  }
}

Answer 1

I had the same issue, where my Floating Action Button would get pushed up.

I solved this using the property:

resizeToAvoidBottomPadding: false, // fluter 1.x
resizeToAvoidBottomInset: false // fluter 2.x

On the parent Scaffold.

I tested it with your code, it solves the issue as well.

Answer 2

You can check if the keyboard is show up or not, and based on that create the floating button or not.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: keyboardIsOpened ? 
          null ://or an empty container
          FloatingActionButton(
          tooltip: 'Add Item',
          child: Icon(Icons.add),
          backgroundColor: Colors.red,
          onPressed: _showFormDialog,
      ),
    );
  }

Inside the build method you can know if the keyboard show up by using MediaQuery.of(context).viewInsets.bottom and save its value on a bool variable keyboardIsOpened like the following code.

@override
Widget build(BuildContext context) {
  bool keyboardIsOpened = MediaQuery.of(context).viewInsets.bottom != 0.0;

Answer 3

Used MediaQuery and Visibility

Visibility(
          visible: MediaQuery.of(context).viewInsets.bottom == 0.0,
          child: FloatingActionButton(
            onPressed: () {},
            child: Icon(Icons.chat),
          ),
        ),

When the keyboard is opened, the bottom will not be zero, which will cause fab to get invisible.

Answer 4

Wrap your complete code in this

 new Container(
child: Column(
children: <Widget>[
        Expanded(
          child: SingleChildScrollView(
            child: Stack(
              children: <Widget>[
              // Your body code
              ] // Widget
             ), // Stack
            ), // SingleChildScrollView
           ), // Expanded
        Container(
        alignment: Alignment.bottomCenter,
        padding: EdgeInsets.all(10.0),
        child : 
        // button code here 
        // to make button full width use minWidth: double.infinity,
         ,
        ), //Container
        ], // Widget
        ), // Column
        ), // Container