Hide FAB when onscreen keyboard appear

Question

In Flutter, how to make FAB button hide when onscreen keyboard appear?

FAB button cover up other element when on screenkeyboard show up.

Flatboat

Answer 1

Wrap your FloatingActionButton with a Visibility widget and control the visibility with a bool value.

Snippet:

Widget build(context) {
  bool keyboardIsOpen = MediaQuery.of(context).viewInsets.bottom != 0;
  return Scaffold(
    body: // ...
    floatingActionButton: Visibility(
      visible: !keyboardIsOpen,
      child: // your FloatingActionButton
    ),
  );
}

This solution also gets rid of the animation when the button disappears and appears.

Be sure that the class extends StatefulWidget and you have created a state for it

Magavern

I would prefer this solution over the answered one – Nard

great solution, but no need for variable or StatefulWidget, simplify as... visible:MediaQuery.of(context).viewInsets.bottom == 0 – Gorse

I implemented this in my project. Working only in two of the screens and the rest is not changing. – Obel

Answer 2

You can achieve it by checking for keyboard visibility using viewInsets and hide fab based on it.

Example:

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: "Example",
    home: new FabHideOnKeyboard(),
  ));
}

class FabHideOnKeyboard extends StatefulWidget {
  @override
  _FabHideOnKeyboardState createState() => new _FabHideOnKeyboardState();
}

class _FabHideOnKeyboardState extends State<FabHideOnKeyboard> {
  @override
  Widget build(BuildContext context) {
    final bool showFab = MediaQuery.of(context).viewInsets.bottom==0.0;
    return Scaffold(
      resizeToAvoidBottomPadding: true,
      body:Container(
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("TextField:"),
            TextField()
          ],
        ),
      ),
      floatingActionButton: showFab?Icon(Icons.add):null,
    );
  }
}

Hesiod

Isn't MediaQuery.of(context) will trigger the rebuild everytime when that value change and then it will trigger rebuild again... which end up in a loop ? – Luis

this causes the widget to rebuild. – Gaze

@CharlesC, it will rebuild, and this is ok, even though if you don't use MediaQuery.of(context). Because when you trigger a focus, screen should rebuild. – Disorganization

Answer 3

I hope this is what you are looking for

Scaffold(resizeToAvoidBottomInset: false)

Ocd

Perfect for my use case. – Dinka

a simple one liner – Lust

Answer 4

For future reference, this is an implementation following the basic idea from https://github.com/flutter/flutter/issues/26100 but using already existing mixins to reduce quirks and code:

class FixedCenterDockedFabLocation extends StandardFabLocation
    with FabCenterOffsetX, FabDockedOffsetY {
  const FixedCenterDockedFabLocation();

  @override
  String toString() => 'FloatingActionButtonLocation.fixedCenterDocked';

  @override
  double getOffsetY(
      ScaffoldPrelayoutGeometry scaffoldGeometry, double adjustment) {
    final double contentBottom = scaffoldGeometry.contentBottom;
    final double bottomMinInset = scaffoldGeometry.minInsets.bottom;
    if (bottomMinInset > 0) {
      // Hide if there's a keyboard
      return contentBottom;
    }
    return super.getOffsetY(scaffoldGeometry, adjustment);
  }
}

You can then use it as simple as floatingActionButtonLocation: const FixedCenterDockedFabLocation(), (don't forget the const ;)).

Feel free to use this code without limitations or attribution.

Lection

Answer 5

Widget build(context) {
  return Scaffold(
    resizeToAvoidBottomInset: false,
    appBar: // ...
    body: // ...
    floatingActionButton: Visibility(
      child: // your FloatingActionButton
    ),
  );
}

Leavings

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Wadmal

i just added resizeToAvoidBottomInset: false, in scaffold widget. It works for me to hide floating action button. – Leavings

Please read "How to Answer". It helps more if you supply an explanation why this is the preferred solution and explain how it works. We want to educate, not just provide code. – Selfexecuting

Answer 6

Widget build(context) {


 bool iskeyboardOpen = MediaQuery.of(context).viewInsets.bottom != 0;
  return Scaffold(
    body: Container()// ...
    floatingActionButton: Visibility(
      visible: !iskeyboardOpen,
      child: DashboardActionButton(
            onTap: () {
              Navigator.push(context, MaterialPageRoute(builder: (c) {
                return const YourPage();
              })).then((_) {
                AsyncOrderActions(store).fetchData();
              });
            },
            svgIcon: 'send-white',
          ), // your FloatingActionButton
    ),
  );
}

Venereal