Hide FAB when onscreen keyboard appear
I hope this is what you are looking for
Scaffold(resizeToAvoidBottomInset: false)
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.
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,
);
}
}
Wrap your FloatingActionButton
with a Visibility
widget and control the visibility with a bool
value.
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