Notice
Recent Posts
Recent Comments
올해는 머신러닝이다.
Flutter의 IntrinsicWidth 위젯 이해 및 사용법 본문
Flutter의 IntrinsicWidth 위젯 이해 및 사용법
Flutter에서는 다양한 레이아웃 위젯을 제공하여 UI 요소를 원하는 방식으로 배치할 수 있습니다. 그중에서 IntrinsicWidth 위젯은 자식 위젯들의 너비를 최적화하는 데 도움을 주는 중요한 도구입니다.
1. IntrinsicWidth란?
IntrinsicWidth 위젯은 자식 위젯의 최소 및 최대 고유 너비(본질적인 너비, Intrinsic Width)를 계산한 후, 가장 적절한 너비를 적용하는 역할을 합니다. 이를 통해 가변적인 크기의 위젯을 균형 있게 정렬할 수 있습니다.
일반적으로 Column 또는 Row 안에서 위젯들이 각기 다른 크기로 배치될 때, 가장 넓은 위젯의 크기에 맞춰 정렬하고 싶다면 IntrinsicWidth를 사용하면 됩니다.
2. IntrinsicWidth의 주요 동작 원리
- IntrinsicWidth는 자식 위젯들의 고유한 너비를 측정한 후, 가장 적절한 너비를 적용합니다.
- 여러 개의 위젯이 포함된 경우, 가장 넓은 위젯의 너비를 기준으로 전체 너비가 결정됩니다.
- 부모 위젯이 Expanded 또는 Flexible처럼 강제적인 크기를 요구할 경우, IntrinsicWidth는 이를 무시하고 고유 너비를 적용합니다.
3. IntrinsicWidth가 필요한 경우
- 여러 개의 버튼이 Row 내부에서 서로 다른 크기를 가질 때, 균일한 크기로 정렬하고 싶을 때.
- 동적으로 변경되는 UI 요소들이 너비를 자동 조정하도록 만들고 싶을 때.
- 부모 레이아웃이 Expanded로 인해 원하는 너비를 보장하지 못할 때.
4. IntrinsicWidth 예제 코드
다음은 IntrinsicWidth를 활용하여 여러 개의 버튼을 동일한 너비로 정렬하는 예제입니다.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text("IntrinsicWidth 예제")),
body: Center(
child: IntrinsicWidth(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
ElevatedButton(
onPressed: () {},
child: const Text("짧은 버튼"),
),
ElevatedButton(
onPressed: () {},
child: const Text("중간 길이 버튼"),
),
ElevatedButton(
onPressed: () {},
child: const Text("이 버튼은 더 길어요"),
),
],
),
),
),
),
);
}
}
예제 설명
- IntrinsicWidth를 사용하여 내부 버튼들의 너비를 가장 긴 버튼에 맞춰 자동 조정합니다.
- Column의 crossAxisAlignment를 stretch로 설정하여 너비가 일관되게 적용되도록 만듭니다.
- 버튼의 크기가 다름에도 불구하고 가장 긴 버튼을 기준으로 너비가 맞춰집니다.
5. IntrinsicWidth의 동작 비교
(1) IntrinsicWidth 미사용
Column(
children: [
ElevatedButton(
onPressed: () {},
child: const Text("짧은 버튼"),
),
ElevatedButton(
onPressed: () {},
child: const Text("중간 길이 버튼"),
),
ElevatedButton(
onPressed: () {},
child: const Text("이 버튼은 더 길어요"),
),
],
)
위 코드를 실행하면 버튼들이 각기 다른 크기로 정렬됩니다. 가장 긴 버튼은 길고, 짧은 버튼은 작게 표시됩니다.
(2) IntrinsicWidth 사용
IntrinsicWidth(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
ElevatedButton(
onPressed: () {},
child: const Text("짧은 버튼"),
),
ElevatedButton(
onPressed: () {},
child: const Text("중간 길이 버튼"),
),
ElevatedButton(
onPressed: () {},
child: const Text("이 버튼은 더 길어요"),
),
],
),
)
이제 모든 버튼의 너비가 가장 긴 버튼에 맞춰 균일하게 정렬됩니다.
6. IntrinsicWidth의 한계
- 성능 이슈: IntrinsicWidth는 레이아웃 측정 과정에서 두 번의 패스를 수행하므로 성능에 부담을 줄 수 있습니다. (layout 단계와 paint 단계가 두 번 호출됨)
- 동적 크기 변경이 많은 경우: UI가 지속적으로 변경되는 경우, IntrinsicWidth를 사용할 때 레이아웃 리빌딩이 많아질 수 있습니다.
- 제한적인 사용 사례: Expanded, Flexible을 함께 사용하는 경우 IntrinsicWidth의 영향을 받지 않을 수 있습니다.
7. 결론
IntrinsicWidth는 자식 위젯들의 너비를 가장 적절한 크기로 조정하는 유용한 도구입니다. 특히, 동적인 UI 요소들이 균일한 너비를 유지해야 할 때 매우 효과적입니다. 그러나 과도한 사용은 성능 문제를 유발할 수 있으므로, 꼭 필요한 경우에만 사용하는 것이 좋습니다.
이제 IntrinsicWidth를 활용하여 보다 정리된 UI를 구성해 보세요!
'스터디 > Flutter' 카테고리의 다른 글
Figma Mcp server + Cursor를 이용해서 Flutter 페이지 클론하기 (0) | 2025.03.10 |
---|---|
Flutter MVVM 아키텍쳐 추천(Riverpod과 Freezed) (0) | 2025.02.17 |
flutter 인앱 결제 구독 복원 Flow (0) | 2025.02.16 |
flutter에서 인앱 결제 구독 단계별 성명 (0) | 2025.02.16 |
Flutter + Riverpod 카운터앱 (0) | 2023.12.11 |