Flutter에서 레이아웃 확장하기: Expanded
Flutter에서 Expanded 위젯은 행(row), 열(column), 또는 유연한 상자(flex) 레이아웃 내에서 자식 위젯이 사용할 수 있는 여분의 공간을 채우도록 합니다. 이는 동적인 사용자 인터페이스 설계에서 필수적인 요소로, 자식 위젯이 할당된 공간을 최대한 활용할 수 있게 돕습니다.
주요 속성
flex: 자식 위젯이 차지하는 공간의 비율을 결정합니다. 기본값은1이며, 이는 동일한Expanded위젯을 가진 다른 자식들과 같은 비율로 공간을 차지하게 합니다.child:Expanded위젯 내부에 포함될 실제 위젯을 지정합니다. 이는 버튼, 이미지, 텍스트 등 다양한 위젯이 될 수 있습니다.
주요 활용도
- 레이아웃 내에서 공간 균등 배분: 여러 자식을 가진
Row나Column에서 각 위젯에 공평하게 공간을 할당합니다. - 콘텐츠의 가시성 개선: 중요한 콘텐츠가 화면 공간을 충분히 사용하여 더욱 눈에 띄게 합니다.
- 동적인 인터페이스 조정: 화면 크기나 방향이 변경될 때 자동으로 콘텐츠 크기를 조정하여 최적의 사용자 경험을 제공합니다.
코드 예제
아래 예제는 Column 레이아웃에서 Expanded를 사용하여 중간 콘텐츠를 동적으로 확장하는 방법을 보여줍니다.
Scaffold(
body: Column(
children: <Widget>[
Text('상단 텍스트'),
Expanded(
flex: 2,
child: Center(
child: Text('이곳은 확장된 중앙 콘텐츠입니다.'),
),
),
Text('하단 텍스트')
],
),
)추가 팁
- 비율 조절을 통한 세밀한 레이아웃 조정:
flex속성을 다르게 설정하여 각 위젯의 크기 비율을 세밀하게 조정할 수 있습니다. - 다양한 레이아웃 전략 활용:
Expanded는 단순히 공간을 채우는 것이 아니라, 복잡한 사용자 인터페이스에서 다양한 레이아웃 전략을 구현할 수 있게 도와줍니다.
관련 자료
-
Flex:
Row및Column과 같은 유연한 상자 레이아웃의 기반 클래스입니다.Flex는 레이아웃의 방향성을 정의할 수 있는 기본 클래스로, 하위 위젯들에게 공간 분배 방식을 제어할 수 있는 속성을 제공합니다. -
Flexible:
Expanded와 유사하지만,Flexible위젯은 자식 위젯이 할당된 공간을 꼭 채울 필요는 없으며,fit속성을 통해 남은 공간을 어떻게 채울지 유연하게 조정할 수 있습니다. 주요fit옵션은 다음과 같습니다: -
FlexFit.tight: 자식이 할당된 공간을 완전히 채웁니다 (기본값). -
FlexFit.loose: 자식이 필요한 만큼만 공간을 사용하고 나머지는 비웁니다. -
Spacer: 레이아웃 내에서 공간을 생성할 때 사용하는 위젯입니다.
Spacer는Flexible의 구현체로서, 기본적으로FlexFit.tight를 사용하여 지정된flex값에 따라 빈 공간을 만들어냅니다. 이는 주로 위젯들 사이의 간격을 조절할 때 사용됩니다.
추가 참고 리소스
flutter 개발자(진)