[Flutter] 위젯에 대해서(Widget)

플러터에서 위젯(Widget)이란?

플러터 어플리케이션의 사용자 인터페이스를 구성하는 기본 요소이다.
각 위젯은 텍스트나 버튼 같은 물리적 요소부터 레이아웃 효과까지 인터페이스의 모든 측면을 구현하는 곳에 사용된다.

위젯 계층 구조

위젯은 구성(Composition)을 기반으로 한 계층 구조를 형성한다.
각 위젯은 부모 위젯 내부에 중첩되며, 부모로부터 Context를 전달 받는다.
이 구조는 루트 위젯까지 연결된다.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp( // 루트 위젯
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My Home Page'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text('Hello, World!'),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  print('Click!');
                },
                child: const Text('A button'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

위젯 구성(Widget Composition)

플러터는 모든 것이 위젯으로 구성되어 있다고 할 수 있다.
작은 단위의 위젯을 여러 개 조합해서 UI를 구현한다.

레이아웃 위젯(Padding, Alignment, Row, Column, Grid 등)

이런 위젯은 디자인 요소가 없이 레이아웃을 담당한다. 형태라기 보다 공간이라고 보면 좀더 쉽게 이해할 수 있다.

유틸리티 위젯(Container 등)

이 위젯은 디자인 지정이 가능하다. 
레이아웃, 페인팅, 위치 지정, 크기 조정 등 다양한 기능을 결합한 다목적 위젯이다.

디자인 적용 가능 위젯(ElevateButton, Text, Icon, Image 등)

이 위젯들은 위젯 내의 속성으로 css처럼 세세한 디자인 적용을 할 수 있다.

-

아래 이미지를 설명하여 이해를 돕자면
Center 위젯 아래에 Column 위젯이 들어가고
Column 위젯은 리스트 형식으로 위젯을 다수 넣을 수 있다.
그래서 Column 위젯 안에 Text, SizedBox, Button 위젯을 세로로 배치했다.

Center 위젯 아래에 있어서 가운데 정렬이 된다.

위젯 생성(Building Widgets)

플러터에서 UI를 구현하려면 위젯 객체의 build 메서드를 재정의해야 한다.
모든 위젯은 build 메세드를 가져야 하고, 이 메서드는 다른 위젯을 반환해야 한다.

build 메서드 특징

• 위젯이 생성되거나 의존성이 변경될 때 호출된다.
• 이 메서드는 위젯을 생성할 때만 사용해야 한다.

예시 코드

class PaddedText extends StatelessWidget {
  const PaddedText({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: const Text('Hello, World!'),
    );
  }
}

 

위젯 상태(Widget State)

플러터에서 위젯 상태는 주요 두가지 클래스가 있다.

• StatelessWidget: 변경되지 않는 상태를 가진 위젯
• StatefulWidget: 사용자 상호작용이나 다른 요인에 따라 상태가 변경되는 위젯

StatefulWidget은 상태를 저장하고, 상태가 변경될 때마다 setState를 호출하여 UI를 업데이트 한다.

아래는 간단한 StatefulWidget 카운터 예시이다.
상태는 State에 저장되고
setState()를 호출하면, 플러터는 해당 위젯의  build 메서드를 다시 호출해 UI를 업데이트 한다.

class CounterWidget extends StatefulWidget {
  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text('$_counter');
  }
}