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

To prevent the keyboard from pushing the FloatingActionButton (FAB) upwards in your Flutter app, you can use the MediaQuery and Visibility widgets.

The MediaQuery widget provides access to information about the current device screen. By checking the value of viewInsets.bottom, we can determine whether the keyboard is open or closed. If viewInsets.bottom is zero, it indicates that the keyboard is closed.

To implement this solution, wrap your FAB widget with the Visibility widget and set the visible property to the condition MediaQuery.of(context).viewInsets.bottom == 0.0. This ensures that the FAB remains visible when the keyboard is closed and hidden when the keyboard is open.

use Visibility with the FAB:

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

With this implementation, the FAB will be visible when the keyboard is closed, and it will disappear when the keyboard is open, providing a consistent user interface.

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

Answer 5

Wrapping the Floating Action Button inside a column together with my bottom navigation, then passing this as the child to my bottom navigation bar solved most of the stated concerns: Also ensure you add mainAxisSize: MainAxisSize.min,to your column.

Answer 6

i try this so good

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