[Flutter] 자주 사용하는 UI Widget을 알아보자!

이번 포스팅에서 알아볼 내용은 Flutter 프레임워크에서 자주 사용되는 UI Widget입니다.

 

Stack Widget

---

하나의 위젯 위에 다른 위젯을 쌓아올릴 때 사용하는 위젯입니다.

(겹쳐 사용할 수 있습니다.)

 

Stack API를 이용해 화면의 경계에서 정확히 원하는 위치에 위젯을 추가할 수 있습니다.

 

주로 Stack Widget을 이용해 Background, 배경화면, 현재 시간 등을 그릴 수 있습니다.

 

위치를 지정하지 않은 child Widget을 Column이나 Row가 자식을 취급하는 것 처럼 처리합니다.

(자식 위젯을 왼쪽 위 모서리로 정렬하여 나란히 놓습니다.)

 

alignment Property로 정렬 방향을 설정합니다.

( align-content : 방향 설정과 유사합니다. )

 

Positioned Widget으로 위젯을 감싸 위치를 지정할 수 있습니다.

 

위치를 지정하기 위해 top, left, right, bottom, widgth, height등의 Property를 갖습니다.

 

해당 Property로 위젯을 그릴 위치를 설정하면 RenderStack이 위젯을 그리게 됩니다.

 

위치를 지정하지 않은 자식 위젯을 Row 혹은 Column과 같이 처리하며 이 때 크기가 정해지게 됩니다.

 

위치를 지정한 자식이 없다면 Stack Widget은 가능한 큰 공간을 차지합니다.

 

Stack의 Render Box에 비례하여 위치를 지정한 모든 자식을 배치합니다.

 

위치를 지정한 위젯의 속성으로 스택의 자식들을 평행한 경계에서 어디에 위치 시킬지 설정합니다.

 

모든 위젯의 배치를 마쳤다면 Stack의 바닥에 위치한 위젯부터 차례로 그리게 됩니다.

 

Table Widget

---

Table은 위젯을 행과 열로 배치합니다.

 

표의 각 셀은 같인 행의 다른 셀과 같은 높이를 가지며 같은 열의 다른셀과 같은 너비를 갖습니다.

 

빈 Table 셀은 존재할 수 없으며 열의 너비를 명시적으로 설정해야 합니다.

body : Table(
        columnWidths: Map<int, TableColumnWidth>{}, 
        border: Border(), 
        defaultColumnWidth: TableColumnWidth(), 
        defaultVerticalAlignment:
            TableCellVerticalAlignment(), 
        children: List<TableRow>[]
);

Table Widget 사용시 주의사항

 

columnWidths는 전달할 필요가 없지만 defaultColumnWidth는 null 값으로 초기화 할 수 없습니다.

 

defaultColumnWidth는 프로퍼티 중 FlexColumnWidth(1.0)을 기본 값으로 가지고 있습니다.

 

columnWidths로 열의 너비를 설정합니다.

 

Map은 열의 인덱스와 열의 너비를 키로 갖습니다.

 

children 인수는 List<TableRow>를 기대하므로 아무 위젯이나 전달할 수 없습니다.

 

행의 자식 위젯이 TableCell이어야 TableCellVerticalAlignment가 동작하게 됩니다.

 

셀을 세로로 볼 때 TableCellVerticalAlignment.middle 속성으로 세로 중간에 위치 시킬 수 있습니다.

 

TableRow는 두 가지 특징이 있습니다.

 

Table의 모든 행은 같은 수의 자식을 가져야 하며 자식의 위젯 트리에 TableCell은 필수 요건이 아닙니다.

TableCell은 TableRow의 바로 아래 위젯일 필요는 없으며 위젯 트리의 어딘가에 TableRow를 구현하고 있다면 문제 없습니다.

 

ListView Widget과 Builder Pattern

---

ListView는 자주 사용하며 효과적인 flutter 앱을 구현하는데 필수적인 패턴과 개념을 가지고 있습니다.

 

ListView는 스크롤을 지원합니다.

 

자식의 수를 알 수 없는 경우 ListView를 사용합니다.

 

ListView는 스크롤 가능한 Column 혹은 Row Widget임을 알 수 있습니다.

 

Builder Pattern

---

flutter 전체에서 빌더 패턴은 자주 볼 수 있습니다.

 

ListView.builder 생성자는 itemBuilder 프로퍼티로 callBack 함수를 받으며 이 callBack 함수를 통해 위젯을 반환합니다.

 

실제로 ListView에서는 스크롤 액션을 하며 상태가 바뀔때마다 필요한 항목만 그립니다.

Expanded(
  child: ListView.builder(
    shrinkWrap: true,
    itemCount: allAddedCities.length,
    itemBuilder: (BuildContext context, int index) { 
      final city = allAddedCities[index];
      return Dismissible(
        onDismissed: (DismissDirection dir) => _handleDismiss(dir, city),
        confirmDismiss: (DismissDirection dir) async => 
																									dir == DismissDirection.endToStart,
        background: Container(
          child: Icon(Icons.delete_forever),
          decoration: BoxDecoration(color: Colors.red[700]),
        ),
        key: ValueKey(city),
        child: CheckboxListTile( 
          value: city.active,
          title: Text(city.name),
          onChanged: (bool b) => _handleCityActiveChange(b, city),
        ),
      );
    },
  ),
)

Builder Pattern에서 필수 프로퍼티는 

 

ListView의 길이를 통해 Builder가 그릴 위젯의 개수를 알아야 합니다.

 

그릴 개수만큼 itemBuilder 프로퍼티의 callBack 함수로 반환되는 위젯을 그리게 됩니다.

 

또한 ListView와 Builder Pattern은 빠른 속도의 렌더링을 지원합니다.

 

이번 포스팅으로 자주 사용되는 Widget과 속성에 대해 알 수 있었습니다.