[Widget] 위젯

Widget?

 

플러터에서 화면에 보이는 UI와 관련된 모든 요소는 위젯으로 구성되어 있고 위젯은 State(데이터)를 기반으로 어떤 UI를 구현할지를 정의하고 위젯의 State가 변경되면 변경 사항에 알맞게 변경된 UI를 화면에 다시 그려준다. 이때 플러터 프레임워크는 기존 상태의 위젯과 새로운 상태의 위젯을 비교해서 UI 변화를 반영할 때 최소한의 변경 사항을 계산하여 화면에 그리게 된다. 그렇기 때문에 높은 퍼포먼스를 발휘할 수 있게 되는 것이다.

 

종류

 

자식 하나만 가지는 위젯과 여러개의 자식을 가지는 위젯으로 나누어 볼 수 있는데

자식 하나만 가지는 위젯은 child를 사용하고 여러개의 자식을 가지는 위젯은 children을 사용한다.

 

child를 사용하는 위젯

• Container - 자식을 담는 역할을 하는 위젯으로 배경색, 너비, 높이, 테두리 등의 디자인을 지정 할 수 있다.
• GestureDetector - 플러터에서 제공하는 제스처 기능을 자식 위젯에서 인식하는 위젯으로 제스처 기능이 자식 위젯에서 인식될 때 함수를 실행할 수 있다.
• SizeBox - 높이, 너비를 지정하는 위젯으로 디자인적 요소를 적용할 수 없다.

// child 사용하는 Widget
Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Text('child Widget'),
      ),
    );
  }

 

children를 사용하는 위젯

• Column - 모든 위젯을 세로로 배치
• Row - Column과 반대로 모든 위젯을 가로로 배치
• ListView - 리스트를 구현 할 때 사용하는 것으로 children에 다른 위젯을 입력할 수 있으며 입력된 위젯이 화면을 벗어나면 스크롤이 가능

// children
Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Text('children1 Widget'),
          SizedBox(height: 10),
          Text('children2 Widget'),
        ],
      ),
    );
  }

 

 

이미지 출처 : https://topeomot.medium.com/flutter-everything-is-a-widget-series-part-2-composition-is-key-f8c77ed0c153