[Flutter] 위젯(widget) 종류, child children 매개변수

플러터 위젯 (Flutter Widget)

• 플러터는 화면에 그려지는 모든 요소가 위젯으로 구성되어 있다. 
• 플러터 프레임워크는 많은 기본 위젯을 제공하며, 앱 개발자가 직접 위젯을 만들 수도 있다.
• 위젯은 현재 주어진 상태(State)를 기반으로 어떤 UI를 구현할 지를 정의한다.
• 위젯의 상태(State)가 변경되면 기존 상태의 위젯과 비교해 최소한의 변경사항을 산출해 UI를 화면에 다시 그려준다.
• 위와 같이 최소한의 리소스를 이용해 UI 변경을 함으로 최대 120FPS까지 높은 퍼포먼스를 산출할 수 있다.

 

대표적인 플러터 위젯(Widget)

자식을 하나만 받는 child 매개변수를 사용하는 위젯

Container 위젯

자식을 담는 컨테이너 역할을 하며 배경색, 너비, 높이, 테두리 등의 디자인을 설정할 수 있다.

 

GestureDetector 위젯 

자식 위젯을 통해 제스처 기능을 인식하는 위젯으로, 탭이나 드래그, 더블클릭과 같은 제스처 기능을 자식 위젯에서 인식되었을 때 함수를 실행할 수 있다.

 

SizeBox 위젯

높이와 너비를 지정하는 위젯으로 디자인적 요소를 적용할 수는 없다. const 생성자로 선언할 수 있어 퍼포먼스 측면에서 효율적이다.

 

 

다수의 자식을 입력받는 children 매개변수를 사용하는 위젯

Column 위젯

children 매개변수로 입력받은 모든 위젯들을 세로로 배치한다.

 

Row 위젯

children 매개변수로 입력받은 모든 위젯들을 가로로 배치한다

 

ListView 위젯

children 매개변수로 입력받은 다수의 위젯이 화면을 벗어나게 되면 스크롤을 가능하게 한다. 리스트를 구현할 때 사용

출처 : https://jaceshim.github.io/

 

---

 

Children 매개변수와 Child 매개변수 차이

플러터는 위젯을 트리의 형태로 하위에 계속 추가하며 UI를 구성한다.

 

children 매개변수와 child 매개변수는 위젯에 하위 위젯을 추가할 때 사용하며, 이름에서 단수형과 복수형을 알 수 있듯이, children은 위젯을 여러 개를 추가할 수 있고, child는 위젯을 한 개 추가할 수 있다. 

 

대부분 위젯에서 매개변수로 children 또는 child 중 하나를 선택해서 사용한다.

 

 

children 매개변수는 위젯들을 리스트로 입력할 수 있다. 리스트에 입력된 순서로 화면에 생성되며 리스트 안에는 원하는 만큼 위젯을 추가할 수 있다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('나는'),
              Text('children이야')
            ],
          ),
        ),
      ),
    ),
  );
}