출처: https://flutter.dev/docs/development/ui/layout/constraints
Constraints go down. Sizes go up. Parent sets position.
Row(
children: [
Container(
color: red,
child: const Text(
'This is a very long text that '
'won\'t fit the line.',
style: big,
),
),
Container(color: green, child: const Text('Goodbye!', style: big)),
],
)
Row
는 children에게 constraints를 제공하지 않기 때문에 children들의 width 합이 스크린 크기를 넘을 경우 overflow warning을 발생시킬 수 있다.
Row(
children: [
Expanded(
child: Center(
child: Container(
color: red,
child: const Text(
'This is a very long text that won\'t fit the line.',
style: big,
),
),
),
),
Container(color: green, child: const Text('Goodbye!', style: big)),
],
)
Expanded
는 자식이 자신의 크기를 마음대로 가지는 것을 허락하지 않고, 자식이 자신과 같은 크기를 가지도록 강제한다.
Row(
children: [
Flexible(
child: Container(
color: red,
child: const Text(
'This is a very long text that won\'t fit the line.',
style: big,
),
),
),
Flexible(
child: Container(
color: green,
child: const Text(
'Goodbye!',
style: big,
),
),
),
],
)
Flexible
은 Expanded
와 유사하지만 자식의 크기를 자신과 같거나 작은 크기로 제한한다. Expanded
는 동일한 크기를 가지도록 제한.