Hiding a Flutter widget while the keyboard is visible

Making a widget invisible does not necessarily remove its layout space or disable interaction. The original wrapper exposed those choices through keepView and a reversed visibility condition:

import 'package:flutter/material.dart';
import 'package:nft/utils/app_route.dart';

class WBehindKeyboard extends StatefulWidget {
  const WBehindKeyboard(
      {Key key,
      @required this.child,
      this.reversed = false,
      this.keepView = true})
      : super(key: key);

  final Widget child;

  /// As default, view hide when keyboard opened.
  /// Set reversed = true, it'll reverse the logic.
  final bool reversed;

  /// if you want hide view but keep the layout, set keepView = true as default
  /// otherwise a view will dispose when keyboard opened
  /// Both mode support touch through below widget as well
  final bool keepView;

  @override
  _WBehindKeyboardState createState() => _WBehindKeyboardState();
}

class _WBehindKeyboardState extends State<WBehindKeyboard> {
  bool _keyboardVisible = false;

  @override
  Widget build(BuildContext context) {
    _keyboardVisible =
        MediaQuery.of(AppRoute.I.appContext).viewInsets.bottom != 0;
    final bool visible =
        !(widget.reversed ? !_keyboardVisible : _keyboardVisible);
    return widget.keepView
        ? Opacity(
            opacity: visible ? 1 : 0,
            child: IgnorePointer(ignoring: !visible, child: widget.child),
          )
        : Visibility(
            child: IgnorePointer(ignoring: !visible, child: widget.child),
            visible: visible);
  }
}

The opacity path keeps the subtree in layout and uses IgnorePointer to prevent invisible content from receiving touches. The other path uses Visibility, whose replacement/lifetime behavior needs review alongside the application’s state.

The keyboard check reads bottom view insets through an application-global context. That assumption should be checked for the actual window, navigator, and keyboard arrangement. The code uses older Dart annotations and was not rerun.

Source: Gist revision.

← Back to the garden