[Flutter] Set AppBar Transparent with SafeArea

앱바를 투명하게 만들고 body 위에 겹치게 하면, body안의 위젯들과 앱바가 겹치는 문제가 발생한다.(아래 시뮬레이터 캡쳐사진의 왼쪽 사진 참고)
이를 해결하기 위해 SafeArea를 body안의 위젯에 씌워주면, app bar의 그림자 효과가 다시 보이는 문제가 발생한다. (아래 시뮬레이터 캡쳐사진의 가운데 사진 참고)

구글링해보니 StackOverflow에 같은 질문도 있었다. 

https://stackoverflow.com/questions/68979682/how-to-set-flutter-appbar-transparent-without-the-status-bar

How to set Flutter AppBar Transparent without the Status bar

 

그런데 해결은 좀 다른 방법으로 해보았다. 보통 앱바는 화면 높이의 10%~15%를 차지한다고 한다. 그래서 SizedBox의 높이를 전체 화면 높이의 0.15배로 하여 앱바에 대한 안전영역을 만들어주었다.

▲ 좌측부터 순서대로 앱바와 body영역 겹치는 문제 / 앱바의 그림자 효과가 다시 생긴 문제 / 해결된 모습

return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent, //앱바 투명하게
        elevation: 0.0, //앱바의 그림자 효과 제거
        leading: IconButton(
          icon: const Icon(
            Icons.arrow_back_ios_rounded,
            color: Colors.black,
          ),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
        title: Text(
          '$year년 $month월 $day일',
          style: const TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.w500,
          ),
        ),
      ),
      extendBodyBehindAppBar: true,
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        color: Colors.white,
        child: Column(
          children: [
            SizedBox(height: MediaQuery.of(context).size.height * 0.15),//sizedbox로 안전 영역 설정
            const Text(
              '장소',
              textAlign: TextAlign.left,
            ),
            .....

 

뭐.. 별 문제는 없어보인다! Safearea도 MediaQuery를 이용해서 하는 거니까.. 같은 결이지 않을까 싶다. 문제가 발생할만한 부분을 발견하면 나중에 글을 수정해두겠다.

---

그리고 우연히 또 다른 해결방법도 찾았다. SafeArea는 body의 제일 상단 위젯(여기서는 Container)에 씌워주는 것이 일반적이다.
그런데 SafeArea()를 body의 제일 상단에 있는 위젯이 아닌, 그 아래 Column위젯에 씌워주었더니, 아까 그림자 효과가 없어졌다.

...
extendBodyBehindAppBar: true,
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        color: Colors.white,
        child: SafeArea(
          child: Column(
          ...