개요

Flutter로 모바일 앱의 UI 구현을 할 때, isScrollControlled를 true로 한 ModalBottomSheet가 화면 상단의 음영 부분에 걸려 버리는 문제의 해소법을 소개하겠습니다.

사용할 Widget

부모 Widget (문의 양식) - main.dart


자식 Widget (메시지 제출 양식) - child.dart


화면 상부의 음영 부분에 View가 덮여 버리고 있군요··.
AppBar가 없는 View에서는 SafeArea를 사용하여 화면 상단에 덮이지 않도록 구현할 수 있어야합니다.

childView.dart

  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea( //SafeAreaを使えば画面上部に被るのを防止できるはず・・
        child: Container(...),
      )
    );
  }

불행히도 변하지 않습니다 ··.

해결책

main.dart

// --省略
child: ElevatedButton(
  child: Text("お問い合わせをする"),
  onPressed: () {
    BuildContext mainContext = context; //これを追加
    showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (BuildContext context) {
      return parentWidget(
        mainContext //子Widgetに渡す
      );
    });
  },
),

childView.dart

Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          margin: EdgeInsets.all(20),
          padding: EdgeInsets.only( //
            top: MediaQuery.of(widget.context).padding.top, //親Widgetから渡されたBuildContextをpaddingで指定
          ),
          child: Column(//..省略),
        ),
      ),
    );
  }

안전한 느낌으로 나타났습니다.

문제점

부모 Widget이 main.dart가 아닌 경우, 아이 Widget에 BuildContext를 건네주어 padding에 지정해도 0.0으로서 취급되어 올바르게 대처할 수 없다.

→ main.dart에서 MediaQuery를 사용하여 화면 상단의 padding을 얻고 자식 Widget까지 전달하고 padding으로 지정하면 좋습니까?

main.dart

double height = MediaQuery.of(context).padding.top;

단말기별 화면 상단의 높이는 이 방법으로 얻을 수 있습니다.
좋은 느낌의 해결책은 현재 조사 중입니다.

참고