Dart/Flutter
Flutter 기초 - Widget 비율 (14)
아랑팡팡
2024. 5. 19. 12:34
728x90
Flutter 기초 - Widget 비율 (14)
Flexible, Expanded
- Flutter에서 Container공간 내의 공간비율을 조정할 때 사용되며 두 위젯은 비슷한 기능을 수행하지만 공간 할당 방식에서 약간의 차이가 존재한다.
1. Flexible
- 자식 위젯에게 남은 공간을 어떻게 분배할지 결정한다.
- Flexible의 속성을 통해서 제어가 가능하다.
- 여러 자식간의 크기 비율을 조금더 세밀하게 조정하고 싶을 경우 사용
Flex | flex값이 다른 위젯 들과 비교해 공간의 분배 비율을 결정한다. |
Fit | 기본값은 FlexFit.loose로 자식 위젯이 필요한 만큼의 공간만 차지하게 되어 할당된 공간을 최대한 채우도록 강제한다. |
2. Expanded
- fit속성을 FlexFit.tight로 설정해 할당된 공간을 강제로 채운다.
- 자삭이 가능한 많은 공간을 차지하도록 하고 싶을 때 사용
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flexible and Expanded'),
),
body: Body(),
),
));
}
class Body extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
Flexible(
flex: 1,
child: Container(
height: 100,
color: Colors.red,
child: Center(child: Text('Flexible 1')),
),
),
Flexible(
flex: 2,
child: Container(
height: 100,
color: Colors.blue,
child: Center(child: Text('Flexible 2')),
),
),
Expanded(
child: Container(
color: Colors.blue,
child: Center(child: Text('Expanded')),
),
)
],
);
}
}
-
728x90
반응형
LIST