14. [Flutter] Expanded, Flexible 위젯 올바르게 사용하는 방법

Expanded 위젯

부모 위젯에서 남은 공간을 채우기 위해 사용되는 위젯

 

1. 부모 위젯이 반드시 제한된 영역을 가져야합니다.

Expanded 위젯은 부모 위젯에서 남은 공간을 채우기 위해 사용되므로, 만약 부모 위젯이 무제한 공간을 가진다면, Expanded 위젯을 사용될 수 없습니다.

 

2. Expanded 위젯은 컨테이너 안에 있어야합니다.

Expanded 위젯은 컨테이너 안에서 사용되어야합니다. 그렇지 않으면 오류가 발생할 수 있습니다.

 

3. Expanded 위젯은 주 축(main axis)을 기준으로 동작합니다.

Expanded 위젯은 부모 위젯의 주 축(main axis)을 기준으로 동작합니다.

이는 Row 또는 Column과 같은 부모 위젯에서 자주 사용되는 경우가 많습니다.

만약 주 축이 제대로 설정되지 않았다면, Expanded 위젯이 예상대로 동작하지 않을 수 있습니다.

 

4.flex: 속성은 필수로 설정되어야합니다.

Expanded 위젯을 사용할 때는 flex 속성을 반드시 설정해야합니다.

flex는 부모 위젯에서 남은 공간을 자식 위젯이 차지하는 비율을 결정합니다.

 

5. Expanded 위젯을 중첩해서 사용하지 않아야합니다.

Expanded 위젯을 중첩해서 사용하는 것은 좋은 방법이 아닙니다.

이는 레이아웃 계산에 복잡성을 추가하고, 성능 저하를 야기할 수 있습니다.

대신, 가능한 경우 Flexible 위젯과 같은 다른 위젯을 사용하는 것이 좋습니다.

---

Flexible 위젯

부모 위젯의 공간을 비율로 지정해주는 위젯

 

1. Flexible 위젯은 컨테이너 안에 있어야합니다.

Flexible 위젯은 컨테이너 안에서 사용되어야합니다. 그렇지 않으면 오류가 발생할 수 있습니다.

 

2. Flexible 위젯은 주 축(main axis)을 기준으로 동작합니다.

Flexible 위젯은 부모 위젯의 주 축(main axis)을 기준으로 동작합니다.

이는 Row 또는 Column과 같은 부모 위젯에서 자주 사용되는 경우가 많습니다.

만약 주 축이 제대로 설정되지 않았다면, Flexible 위젯이 예상대로 동작하지 않을 수 있습니다.

 

3. flex 속성은 필수로 설정되어야합니다.

Flexible 위젯을 사용할 때는 flex 속성을 반드시 설정해야합니다.

flex는 부모 위젯에서 남은 공간을 자식 위젯이 차지하는 비율을 결정합니다.

 

4. Flexible 위젯을 중첩해서 사용하지 않아야합니다.

Flexible 위젯을 중첩해서 사용하는 것은 좋은 방법이 아닙니다.

이는 레이아웃 계산에 복잡성을 추가하고, 성능 저하를 야기할 수 있습니다.

대신, 가능한 경우 Expanded 위젯과 같은 다른 위젯을 사용하는 것이 좋습니다.

 

5. Flexible 위젯의 fit 속성을 사용할 수 있습니다.

Flexible 위젯은 fit 속성을 사용하여, 자식 위젯이 자신의 크기보다 크거나 작은 경우 어떻게 동작해야하는지 결정할 수 있습니다. FlexFit.loose는 자식 위젯이 자신의 최소 크기로 축소되어도 괜찮다는 것을 의미하고, FlexFit.tight는 자식 위젯이 자신의 최대 크기까지 확장되어야한다는 것을 의미합니다.

 

 

---

Expanded 와 Flexible 차이점.

Flexible 위젯과 Expanded 위젯은 모두 부모 위젯에서 사용 가능한 위젯으로, 자식 위젯이 사용 가능한 최대 공간을 차지하도록 해줍니다. 그러나 두 위젯 사이에는 몇 가지 차이점이 있습니다.

 

1. 동작 방식:

Flexible 위젯은 부모 위젯에서 남은 공간을 자식 위젯이 차지하는 비율을 지정합니다. Expanded 위젯은 Flexible 위젯과 마찬가지로 자식 위젯이 사용 가능한 최대 공간을 차지하지만, 자식 위젯이 원하는 크기가 최소 크기보다 큰 경우, 부모 위젯에서 자식 위젯의 최대 크기까지 확장됩니다.

 

2. 필수 속성:

Flexible 위젯을 사용할 때는 flex 속성을 반드시 설정해야합니다. Expanded 위젯에서는 이러한 속성이 필요하지 않습니다. 대신 Expanded 위젯은 부모 위젯의 남은 공간을 모두 차지하도록 보장합니다.

 

3. 중첩 사용 가능 여부:

Flexible 위젯은 중첩해서 사용할 수 있습니다. Expanded 위젯은 이러한 사용 방식을 지원하지 않으며, 중첩 사용 시 예기치 않은 동작이 발생할 수 있습니다.

 

4. fit 속성:

Flexible 위젯은 fit 속성을 사용하여 자식 위젯이 자신의 크기보다 크거나 작은 경우 어떻게 동작해야하는지 결정할 수 있습니다. Expanded 위젯은 이러한 속성을 지원하지 않습니다.

 

따라서,

Flexible 위젯은 자식 위젯이 자신의 최소 크기로 축소될 수 있고, 부모 위젯에서 남은 공간을 자식 위젯이 차지하는 비율을 지정할 수 있습니다.

Expanded 위젯은 자식 위젯이 부모 위젯의 모든 공간을 차지하도록 보장하며, 자식 위젯이 최대 크기까지 확장될 수 있습니다.