플러터 CupertinoPageScaffold 가려지는 현상

플러터에서 CupertinoPage Scaffold 내에 Material Widget을 사용하는 경우 위젯이 보이지 않는 경우가 있습니다. CupertinoNavigationBar에 위젯이 가려지는 현상으로 인해 발생하는 상황인데요. Navigation Bar를 제거하면 보이긴 하지만 여전히 보기 좋지가 않습니다. 그래서 간단한 해결 방법을 알려드립니다.

CupertinoPageScaffold 가려지는 현상 확인

반응형

우선 제가 기존에 작성한 소스코드는 아래와 같습니다.

    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('일정표'),
      ),
        child: Scaffold(
          body: TableCalendar(
            focusedDay: DateTime.now(),
            firstDay: DateTime.now().add(Duration(days: -30)),
            lastDay: DateTime.now().add(Duration(days: 30)),
          ),
        ),
    );

CupertinoPage Scaffold 내부에서 Material Widget 기반의 TableCalendar를 사용하기 위해 Scaffold로 한번 더 덮어준 거죠.

여기서 문제가 발생합니다.

Widget이 가려지는 현상

일정표라고 되어있는 내비게이션 바에 가려서 Table Calendar가 잘린 게 보이죠?

CupertinoPage Scaffold 내에서 Cupertino 위젯을 사용하는 경우에는 이런 문제가 없는 걸로 봐서 Material Widget과 호환이 덜된 것으로 보입니다.

이 상황을 해결하기 위해서 상단에 마진을 추가하는 방법도 있을 수 있겠지만 기종에 따라 Navigation Bar 크기가 바뀐다면 문제가 되겠죠?

그래서 가장 간단히 해결할 수 있는 방법을 알려드립니다.

반응형

Safe Area 위젯 사용으로 해결하기

바로 SafeArea 위젯을 사용하는 건데요. 이 위젯으로 Scaffold를 감싸주면 자동으로 Navigation Bar 크기를 감안해 안전 영역에 해당 위젯을 뿌려줍니다.

소스가 어떻게 바뀌는지 한번 보여드릴게요.

반응형

    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('일정표'),
      ),
      child: SafeArea(
        child: Scaffold(
          body: TableCalendar(
            focusedDay: DateTime.now(),
            firstDay: DateTime.now().add(Duration(days: -30)),
            lastDay: DateTime.now().add(Duration(days: 30)),
          ),
        ),
      ),
    );

보시면 SafeArea로 Scaffold 위젯을 감싼 것 말고는 한 게 없습니다. 매우 간단한 방법이죠.

Widget이 가려지는 현상 해결된 화면

화면을 보면 윗부분이 잘리는 현상이 해결된 걸 볼 수 있죠.