Flutter技术问询：软键盘弹出时如何隐藏FAB按钮？

Hey there! I’ve dealt with this exact frustration before—nothing’s more annoying than a FAB blocking your input fields when the keyboard pops up. Let me share a couple of reliable solutions to fix this:

Method 1: Use MediaQuery to Detect Keyboard State #

This is the most straightforward and reliable approach, as it directly checks if the keyboard is occupying screen space.

The key here is MediaQuery.of(context).viewInsets.bottom: this value returns the height of the screen area covered by system UI (like the soft keyboard). When the keyboard is visible, this value will be greater than 0.

Here’s a complete example:

class KeyboardAwareScreen extends StatefulWidget {
  @override
  _KeyboardAwareScreenState createState() => _KeyboardAwareScreenState();
}

class _KeyboardAwareScreenState extends State<KeyboardAwareScreen> {
  @override
  Widget build(BuildContext context) {
    // Check if keyboard is visible by checking bottom inset
    final isKeyboardVisible = MediaQuery.of(context).viewInsets.bottom > 0;

    return Scaffold(
      appBar: AppBar(title: Text("Hide FAB on Keyboard")),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: TextField(
          decoration: InputDecoration(hintText: "Tap to open keyboard"),
        ),
      ),
      // Show FAB only when keyboard is hidden
      floatingActionButton: isKeyboardVisible
          ? null
          : FloatingActionButton(
              onPressed: () => print("FAB tapped!"),
              child: Icon(Icons.add),
            ),
    );
  }
}

Method 2: Add Smooth Animation (Optional) #

If you want a polished, smooth transition instead of an abrupt hide/show, wrap your FAB in an AnimatedOpacity widget:

floatingActionButton: AnimatedOpacity(
  opacity: isKeyboardVisible ? 0.0 : 1.0,
  duration: Duration(milliseconds: 250),
  curve: Curves.easeInOut,
  child: isKeyboardVisible
      ? SizedBox.shrink() // Prevent layout shifts
      : FloatingActionButton(
          onPressed: () => print("FAB tapped!"),
          child: Icon(Icons.add),
        ),
),

This adds a nice fade effect when the FAB appears/disappears, making the UI feel more natural.

Method 3: Focus Listener (For Single Input Scenarios) #

If your screen only has one text field, you can listen to its focus state to detect when the keyboard opens/closes. This works because the keyboard usually pops up when the input field gains focus.

class FocusAwareScreen extends StatefulWidget {
  @override
  _FocusAwareScreenState createState() => _FocusAwareScreenState();
}

class _FocusAwareScreenState extends State<FocusAwareScreen> {
  late FocusNode _textFieldFocus;
  bool _isKeyboardVisible = false;

  @override
  void initState() {
    super.initState();
    _textFieldFocus = FocusNode();
    // Listen for focus changes
    _textFieldFocus.addListener(() {
      setState(() {
        _isKeyboardVisible = _textFieldFocus.hasFocus;
      });
    });
  }

  @override
  void dispose() {
    _textFieldFocus.dispose(); // Don't forget to clean up!
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Focus-Based FAB Hide")),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: TextField(
          focusNode: _textFieldFocus,
          decoration: InputDecoration(hintText: "Tap to open keyboard"),
        ),
      ),
      floatingActionButton: _isKeyboardVisible
          ? null
          : FloatingActionButton(
              onPressed: () => print("FAB tapped!"),
              child: Icon(Icons.add),
            ),
    );
  }
}

Note: This method is less reliable for screens with multiple input fields, as switching between fields won’t trigger a focus loss (so the FAB might stay hidden when it shouldn’t). Stick with Method 1 for most cases.

Final Recommendation #

Go with Method 1 for the broadest compatibility—it works regardless of how the keyboard is triggered (input focus, external keyboard, etc.) and handles all screen sizes and orientations smoothly.

内容的提问来源于stack exchange，提问作者Kyaw Tun