Scaffold, SafeArea, Expanded 위젯 알아보기

 

 

 

레이아웃 위젯

Scaffold, SafeArea, Expanded와 같은 레이아웃 위젯들은 앱의 기본 구조를 설정하고,

 

콘텐츠가 다양한 디바이스와 화면에서 제대로 표시되도록 하는 데 필수적입니다.

 

이번 포스트에서는 이 세 가지 핵심 위젯의 역할과 기본적인 사용법을 소개하고자 합니다.

Scaffold: 앱의 기본적인 뼈대 구성하기

Scaffold는 Material Design 앱에서 사용되는 가장 기본적인 레이아웃 위젯입니다. 

 

AppBar(상단 앱 바), Drawer(사이드 메뉴), FloatingActionButton(플로팅 액션 버튼), BottomNavigationBar(하단 네비게이

 

션 바) 등 앱의 주요 요소들을 쉽게 추가하고 관리할 수 있게 해 줍니다. 

 

Scaffold는 단일 페이지의 뼈대를 제공하며, 일관된 앱 디자인과 구조를 유지하는 데 도움을 줍니다.

 

Scaffold(
  appBar: AppBar(
    title: Text('Scaffold 예제'),
  ),
  body: Center(
    child: Text('여기에 콘텐츠가 들어갑니다.'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

 

 

SafeArea: 콘텐츠의 안전한 표시 보장하기

SafeArea 위젯은 스마트폰의 상태 바, 노치, 홈 버튼 영역과 같은 시스템 UI에 의해 콘텐츠가 가려지지 않도록 보호합니다. 

 

사용자의 콘텐츠가 모든 디바이스에서 가시적이고 접근 가능하게 유지되도록 하며, 

 

디자인의 일관성을 유지하는 데 중요한 역할을 합니다.

 

SafeArea(
  child: Scaffold(
    body: Text('이 텍스트는 안전 영역 내에 표시됩니다.'),
  ),
)

 

Expanded: 유연한 공간 분배 활용하기

Expanded 위젯은 Row, Column, Flex와 같은 플렉스 컨테이너 내에서 자식 위젯들 사이의 공간 배분을 돕습니다. 

 

자식 위젯이 사용 가능한 추가 공간을 차지하도록 하여, 유연한 레이아웃을 구성할 수 있습니다. 

 

flex 속성을 통해 공간 배분의 비율을 조절할 수 있으며, UI의 다이내믹한 조정이 가능해집니다.

 

Row(
  children: <Widget>[
    Expanded(
      flex: 2,
      child: Container(color: Colors.red),
    ),
    Container(
      width: 50,
      color: Colors.blue,
    ),
    Expanded(
      flex: 1,
      child: Container(color: Colors.green),
    ),
  ],
)