Flutter 일기
참고 1: https://api.flutter.dev/flutter/widgets/SafeArea-class.html

SafeArea

간만에 배워볼 것은 SafeArea
자식 위젯에 패딩을 넣어서 디바이스 영역이 앱의 위젯 영역을 침범하는 것을 막아준다.

간단하고 쉬운 기능인데, 처음 플러터를 배웠을 때는 이걸 몰라서 아래와 같은 실행화면을 만났을 때 top padding을 줘서 억지로 끌어내릴 때도 있었다...

AppBar 있을 때	AppBar 없을 때 (Android)	AppBar 없을 때 (iOS)

누가 이거 비율 맞추는 것 좀 가르쳐 주세요...
AppBar가 있을 떄는 알아서 그 밑으로 body 가 만들어지는데, AppBar가 없을 때는 화면 상단까지 침범해 들어간다. 특히 아이폰의 경우 카메라가 있는 영역 때문에 텍스트가 아예 가려진다.

해결 방법은 간단하다.

코드 예시로 알아보자

위에서 본 화면은 아래 코드를 실행한 것이다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test SafeArea',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //appBar: AppBar(
      //title: Text("Test SafeArea"),
      //
      body: ListView.separated(
        padding: const EdgeInsets.symmetric(vertical: 10),
        itemCount: 10,
        separatorBuilder: (BuildContext context, int index) =>
            const Divider(thickness: 3),
        itemBuilder: (BuildContext context, int index) {
          return Text(
            'This is some Text',
            style: TextStyle(fontSize: 25),
          );
        },
      ),
    );
  }
}

위 코드에서 body 부분을 SafeArea로 감싸주기만 하면 된다.

body: SafeArea(
        child: ListView.separated(
          padding: const EdgeInsets.symmetric(vertical: 10),
          itemCount: 50,
          separatorBuilder: (BuildContext context, int index) =>
              const Divider(thickness: 3),
          itemBuilder: (BuildContext context, int index) {
            return Text(
              'This is some Text',
              style: TextStyle(fontSize: 25),
            );
          },
        ),
      ),

실행화면은 아래와 같다.

Android	iOS

+ SafeArea의 build 함수 내에 MediaQuery가 포함되어 있는데, 이것으로 화면의 정보를 가져와서 적절한 패딩을 설정하게 된다. MediaQuery는 다음 시간에 배워보도록 하자.
오늘의 일기는 여기까지!