[Flutter] 上下の操作不可部分にWidgetが隠れないようにする

結論: SafeArea Widgetを使う

これはSafeAreaクラスのドキュメント

例: 下記はWebViewを用いてYoutubeを表示するコード

 Widget build(BuildContext context, WidgetRef ref) {
  final TopProvider provider = ref.watch(topProvider);
  return Scaffold(
    body: Column(
      children: [
        Expanded(
          child: WebViewWidget(controller: provider.controller),
        ),
      ],
    ),
  );
}

表示したいWidgetをSafeArea Widgetで囲む。
今回ならColumn()を囲む。

Widget build(BuildContext context, WidgetRef ref) {
    final Provider provider = ref.watch(provider);
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: WebViewWidget(controller: provider.controller),
            ),
          ],
        ),
      ),
    );
  }

ノッチとは

スマホ画面に、カメラやセンサー類を搭載するために設けられたディスプレイのくぼみ部分を指す。

ノッチ(notch)は以下の意味がある。

• 切り欠き
• くぼみ
• 切り目
• 刻み目

SafeAreaクラスとは

詳細はこちら
オペレーティングシステムインターフェイスを回避するウィジェット。
また端末画面のノッチなどを避けるために必要な量だけPaddingをセットする。

コードはこちら

コンストラクタ

SafeArea({
  Key? key,
  /// 上下左右のpadding反映
  bool left = true, 
  bool top = true,
  bool right = true,
  bool bottom = true,
  /// 最小のpadding値
  EdgeInsets minimum = EdgeInsets.zero,
  /// 下部障害物出現時に下部のpaddingを維持するか
  /// trueにすると、例えばキーボード表示の際にもpaddingが維持される
  bool maintainBottomViewPadding = false,
  required Widget child
})