Expanded

박동규·2023년 11월 22일
0

Widgets

목록 보기
5/18

Row나 Column 내에서 사용할 수 있는 만큼 공간을 전부 차지하는 위젯

Expanded 위젯은 Flutter에서 사용되는 레이아웃 위젯 중 하나로, 부모 위젯 내에서 공간을 확장하고 나머지 위젯에 대한 크기 및 위치를 조정하는 데 사용됩니다. Expanded 위젯은 일반적으로 Row, Column, 또는 Flex와 함께 사용되어 자식 위젯을 확장하고 사용 가능한 공간을 채우는 데 도움을 줍니다.

Expanded 위젯은 다음 속성을 사용합니다:

flex: flex 속성은 자식 위젯이 얼마나 많은 공간을 확장할지를 결정합니다. 부모 위젯 내의 모든 Expanded 위젯에 대해 flex 값을 설정하면 해당 비율에 따라 공간이 분배됩니다. 예를 들어, flex 값을 2로 설정한 Expanded 위젯은 flex 값을 1로 설정한 Expanded 위젯보다 두 배의 공간을 확장합니다.
Expanded 위젯은 주로 Row 또는 Column 내에서 사용되며, 다음은 Row 내에서 Expanded를 사용하는 예제입니다:

Row(
  children: [
    Expanded(
      flex: 2,
      child: Container(
        color: Colors.red,
        height: 50,
      ),
    ),
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.blue,
        height: 50,
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.green,
        height: 50,
      ),
    ),
  ],
)

하지만 Expanded 위젯을 사용하면 텍스트 위젯이 가운데에 정확히 오지 않는 문제가 있다. 그렇기 때문에 [[Stack]] 위젯을 사용할 것이다.

profile
내가 원하는 것을 만들자

0개의 댓글