[플러터] SafeArea 위젯

 

 

안녕하세요,

 

오늘은 Flutter에서 SafeArea Widget에 대하여 대한 포스팅하도록 하겠습니다.

 

 

SafeArea Widget

 

Flutter의 SafeArea 위젯은 스마트 폰 디스플레이에서 화면의 상단과 하단 부분에 표기되는 상태 표시줄과 하단 내비게이션 바와 같은 시스템 UI 요소로 인해 가려지는 영역을 고려하여 자식 위젯을 레이아웃하는 데 사용됩니다.

SafeArea는 iOS 및 Android 디바이스 모두에서 작동하며, 각 플랫폼의 시스템 UI 영역을 고려하여 올바른 레이아웃을 제공합니다. 이를 통해 앱이 다양한 디바이스 및 화면 크기에서 일관된 모습을 유지할 수 있습니다

 

반응형

 

예제 코드

 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('SafeArea Example'),
        ),
        body: const SafeArea(
          child: TextField(
            decoration: InputDecoration(
              labelText: "Search",
              fillColor: Colors.grey,
              filled: true,
            ),
          ),
        ),
      ),
    );
  }
}

 

 

감사합니다.