[Flutter 플러터] SafeArea 위젯 간단 설명과 사용법

핸드폰의 종류는 너무나 다양하게 각양각색 입니다. 

디바이스의 종류도 많고 물리적인 모양도 다르고 디스플레이 규격도 다릅니다.

특히 상단 혹은 하단에 어떤 영역을 배치할때 물리적인 디바이스 모양에 따라 짤리거나 들어가거나

원하지 않는 모양으로 보일 수 있습니다. 

 

SafeArea 위젯은 이런 iPhone의 노치나 디스플레이의 다른 창의적인 물리적 특징을 피하는 데 필요한 양만큼 패딩을 줘서 사용자가 보여지기에 문제가 없게 자동으로 처리해 줍니다.

 

▶ SafeArea 위젯을 사용 하지 않았을 때 

// 옵션 보여주기
void _showOptions(BuildContext context, String messageId, String userId) {
showModalBottomSheet(
    context: context,
    builder: (context) {
      return Wrap(
        children: [
          ListTile(
            leading: const Icon(Icons.flag),
            title: const Text(
                'Report'),
            onTap: () {},
          ),
        ],
      );
    });
}

 

 

▶ SafeArea 위젯을 사용 했을 때 

// 옵션 보여주기
void _showOptions(BuildContext context, String messageId, String userId) {
showModalBottomSheet(
    context: context,
    builder: (context) {
      return SafeArea(
        child: Wrap(
          children: [
            ListTile(
              leading: const Icon(Icons.flag),
              title: const Text('Report'),
              onTap: () {},
            ),
          ],
        ),
      );
    });
  }