Expanded Widget to Create Flexible Layouts

Expanded Widget to Create Flexible Layouts

 

[Ko]

* Expanded : 크기가 정해지지 않은 위젯을 감싸면 그 부모가 정해주는 메인 엑시스 방향으로 최대의 크기를 가지게되며, 가장 바깥에서는 앱바, 탭바 등을 제외한 최대 사이즈를 가지게 됨. 형제 레벨에 Expanded 위젯을 여러개 사용하면 flex의 기본값을 1이며, 특정 정수값을 주어 화면에서의 비율을 정할 수 있음. Expanded 위젯으로 감싸지면 그 자식은 사이즈가 정해진 위젯이 됨. 따라서 SingleChildScrollView 등으로 스크롤 기능을 주고 싶은데, 대상 위젯이 사이즈가 미정인 경우, 컨테이너로 감싸서 특정 사이즈를 주거나, Expanded 위젯으로 최대 사이즈를 가지면서 스크롤되도록 할 수 있음. 이때 컨테이너나 익스펜디드 위젯을 싱글차일드스크롤뷰로 감싸면 안되고, 대상 위젯을 직접 감싸야 함.

Expanded(

  child: SingleChildScrollView(

    child: Wrap(

 

 - 이미지가 기기 화면보다 크기 때문에 노란색 경고 표시가 나타남. 이를 해결하기 위해서는 이미지의 사이즈를 지정해주거나 Expanded widget을 이용해서 Row를 감싸주면 됨.

 - Expanded widget은 Row, Column, Flex의 child widget을 child로 받아서 mainAxis 방향으로 화면에 꽉 차도록 확장 또는 축소시켜줌. 기기 사이즈에 따라 위젯의 크기를 고정하지 않으면서 유동적으로 조절해주므로 adaptable 디자인에 유용한 위젯임.

 - Expanded widget에 flex를 지정해주면 각 child의 크기를 비율로 조정할 수 있음.

 - Image widget과 AssetImage widget을 사용한 코드

Expanded(

          flex: 1,

          child: Image(

            image: AssetImage('images/aaa.png'),

          ),

        ),

 

 - Image.asset widget을 사용한 코드 (위의 코드보다 단순화 됨.), AssetImage는 widget이 아니고ImageProvider이므로 Expanded의 child widget으로 바로 올 수 없고 Image widget의 image property에 들어가야 함. 두 가지 기능을 합친 것이 Image.asset widget 임. (Image.network도 있음.)

 - final code

Expanded(

//          flex: 1,

          child: Image.asset('images/aaa.png'),

          ),

 

=============================================================================

 

[En]

* Expanded: When a widget that has not been sized is wrapped, it has the maximum size in the direction of the main axis determined by its parent, and at the outermost, it has the maximum size excluding the app bar and tab bar. If multiple Expanded widgets are used for sibling level, the default value of flex is 1, and a certain integer value can be given to set the ratio on the screen. When wrapped with an Expanded widget, its child becomes a sized widget. Therefore, I want to give a scrolling function with SingleChildScrollView, etc. If the target widget is unsettled, it can be wrapped with a container to give a specific size, or it can be scrolled while having the maximum size with the Expanded widget. At this time, do not wrap the container or the expanded widget in a single child scroll view, and wrap the target widget directly.

Expanded(

  child: SingleChildScrollView(

    child: Wrap(

 

- A yellow warning sign appears because the image is larger than the device screen. To solve this, you can specify the image size or wrap the row using the Expanded widget.
 - Expanded widget receives child widgets of Row, Column, and Flex as children and expands or contracts to fill the screen in the direction of mainAxis. It is a useful widget for adaptable design because it can be adjusted flexibly without fixing the size of the widget according to the device size.
 - If you specify flex in the Expanded widget, you can adjust the size of each child as a percentage.
 - Code using Image widget and AssetImage widget

Expanded(

          flex: 1,

          child: Image(

            image: AssetImage('images/aaa.png'),

          ),

        ),

 

- Code using the Image.asset widget (simplified than the code above). Because AssetImage is not a widget, but an ImageProvider, it cannot come directly as a child widget of Expanded and must enter the image property of the Image widget. Combining the two functions is the Image.asset widget. (Image.network also available.)

 - final code

Expanded(

//          flex: 1,

          child: Image.asset('images/aaa.png'),

          ),