Flutter UI - Constraints

다용도리모콘·2021년 8월 19일
0

Wiki - Flutter

목록 보기
1/7

출처: https://flutter.dev/docs/development/ui/layout/constraints

Constraints

Constraints go down. Sizes go up. Parent sets position.

  • widget은 자신의 constraints를 부모로부터 얻는다. constraints란 minimum width, maximum width, minimum height, maximum height를 말한다.
  • 그리고 widget은 자신의 자식 widget들에게 constraints를 전달한다. 각각의 자식에게 차례로 constraints를 전달하고 자식이 희망하는 크기를 묻는다.
  • 그리고 자식들을 하나씩 배치 한다. (정렬 기준에 따라 x축 혹은 y축으로)
  • 마지막으로 자신의 크기를 부모에게 전달한다. (부모가 전달해 준 constraints 한도 내에서).

한계

  • widget은 부모가 전달해 준 constraints 한도 안에서만 자신의 크기 결정할 수 있다. 그러므로 자신이 원하는 사이즈를 가질 수 없을 수도 있다.
  • widget의 위치를 정하는 것은 widget의 부모이기 때문에 widget은 스크린 안에서 자신의 위치를 정할 수도 알 수도 없다.
  • 또한 그 부모의 크기와 위치는 부모의 부모에 따라 달라지므로 전체 트리를 고려하지 않고 위젯의 크기와 위치를 정의하는 것은 불가능 하다.
  • 부모가 자식을 정렬한 충분한 정보가 없는 상태에서 자식이 부모와 다른 크기를 원할 경우 자식의 크기는 무시될 수 있다. 배치를 정의할 때 구체적이어야 한다.

예시

Overflow

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을 발생시킬 수 있다.

Expanded

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는 자식이 자신의 크기를 마음대로 가지는 것을 허락하지 않고, 자식이 자신과 같은 크기를 가지도록 강제한다.

Flexible

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,
        ),
      ),
    ),
  ],
)

FlexibleExpanded와 유사하지만 자식의 크기를 자신과 같거나 작은 크기로 제한한다. Expanded는 동일한 크기를 가지도록 제한.

0개의 댓글