Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide FAB when onscreen keyboard appear

Tags:

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

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

enter image description here

like image 358
Kyaw Tun Avatar asked Jan 19 '18 09:01

Kyaw Tun


People also ask

How do you hide show fab?

To show and hide a FloatingActionButton with the default animation, just call the methods show() and hide() . It's good practice to keep a FloatingActionButton in the Activity layout instead of putting it in a Fragment, this allows the default animations to work when showing and hiding.


2 Answers

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,
    );
  }
}
like image 188
Hemanth Raj Avatar answered Sep 20 '22 06:09

Hemanth Raj


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

like image 36
stereo Avatar answered Sep 18 '22 06:09

stereo