플러터 입문하기 -위젯편-

위젯

플러터에서 화면에 보여지는 UI와 관련된 모든 요소는 위젯으로 구성되어 있습니다.
위젯은 현재 주어진 상태state(데이터)를 기반으로 어떤 UI를 구현할지를 정의합니다.
위젯의 상태가 변경되면 변경 사항에 알맞게 변경된 UI를 화면에 다시 그려줍니다.

위젯 종류

위젯은 자식을 하나만 갖는 위젯과 자식을 여럿 갖는 위젯으로 나뉩니다. 자식을 하나만 갖는 대표적인 위젯들은 다음과 같으며 대체로 child 매개변수를 입력받습니다.

Container 위젯 : 자식을 담는 컨테이너 역할을 합니다. 다만 단순하게 자식을 담는 역할을 하는 게 아니라 배경색, 너비와 높이, 테두리 등의 디자인을 지정할 수 있습니다.

GestureDetector 위젯 : 플러터에서 제공하는 제스처 기능을 자식 위젯에서 인식하는 위젯입니다. 탭이나 드래그 그리고 더블 클릭 같은 제스처 기능이 자식 위젯에 인식됐을 때 함수를 실행할 수 있습니다.

SizedBox 위젯 : 높이와 너비를 지정하는 위젯입니다. Container 위젯과 다르게 디자인적 요소는 적용할 수 없고 const 생성자로 선언할 수 있어서 퍼포먼스 측면에서 더 효율적입니다.

---

다수의 자식을 입력할 수 있는 위젯은 children 매개변수를 입력받으며 리스트로 여러 위젯을 입력할 수 있습니다. 대표적인 다수의 자식을 입력할 수 있는 위젯은 아래와 같습니다.

Column 위젯 : children 매개변수에 입력된 모든 위젯들을 세로로 배치합니다.

Row 위젯 : children 매개변수에 입력된 모든 위젯들을 가로로 배치합니다.

ListView 위젯 : 리스트를 구현할 때 사용합니다. 마찬가지로 children 매개변수에 다수의 위젯을 입력할 수 있으며 입력된 위젯이 화면을 벗어나게 되면 스크롤이 가능해집니다.

---

child와 children 매개변수에 지속적으로 하위 위젯을 입력하면 크리스마스 트리처럼 위젯 계층이 정리됩니다. 예를 들어 다음과 같은 UI를 구현한다고 가정하겠습니다.

---

UI의 위젯 트리

Children과 Child의 차이점

명칭에서도알 수 있듯이 child는 위젯을 하나만 추가할 수 있고 children은 여럿을 추가할 수 있습니다. 대부분 위젯은 child 또는 children 매개변수를 하나만 제공합니다. child와 children 매개변수를 동시에 입력받는 위젯은 존재하지 않습니다.


Child 예시

lib/main.dart

import 'package:flutter/material.dart';

void main() {
 runApp(
   MaterialApp(
     home: Scaffold(
       body: Center(

         // 1 하나의 위젯만 가운데 정렬 가능
         child: Text('Code Factory'),
       ),
     ),
   ),
 );
}

Children 예시

lib/main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SizedBox(
          width: double.infinity,
          child: Column(
          mainAxisAlignment: MainAxisAlignment.center,

          // ① 여러 위젯을 Column 위젯에 입력 가능
          children: [
            Text('Code'),
            Text('Factory'),
           ],
         ),
       ),
     ),
   ),
 );
}