5강: Flutter 위젯 기본 – 앱을 구성하는 블록 이해하기

5강: Flutter 위젯 기본 – 앱을 구성하는 블록 이해하기


Flutter를 처음 배우는 사람들에게 가장 중요한 개념 중 하나는 바로 위젯(widget)이야. Flutter에서는 모든 것이 위젯으로 구성돼 있어. 버튼, 텍스트, 이미지뿐만 아니라 레이아웃도 위젯으로 다루지. 이번 강의에서는 위젯의 기본 개념과 자주 사용되는 기본 위젯들을 다뤄볼 거야. 위젯을 이해하는 것은 Flutter 개발의 핵심이니, 천천히 알아가보자.


위젯이란 무엇인가?

Flutter에서 위젯은 애플리케이션의 UI를 구성하는 기본 단위야. Flutter 앱에서 화면에 보이는 모든 요소는 위젯으로 이루어져 있어. 텍스트, 버튼, 이미지뿐 아니라 레이아웃을 잡는 컨테이너까지 전부 위젯으로 생각하면 돼. Flutter의 가장 큰 장점은 이러한 위젯들을 조합해서 다양한 디자인과 기능을 손쉽게 만들 수 있다는 점이야.

위젯은 크게 두 가지로 나눌 수 있어:

  • Stateless 위젯: 상태가 변하지 않는 고정된 UI 요소를 만들 때 사용해. 한 번 생성된 후, 변경되지 않는 UI를 나타낼 때 주로 사용하지.
  • Stateful 위젯: 사용자의 인터랙션에 따라 상태가 변하는 위젯을 만들 때 사용해. 예를 들어, 버튼을 클릭했을 때 변화가 발생하는 UI는 Stateful 위젯을 사용해서 만들어.

Flutter의 기본 위젯들

이제 Flutter에서 자주 사용되는 몇 가지 기본 위젯들을 살펴보자. 이 위젯들은 거의 모든 앱에서 사용되기 때문에 익숙해지는 것이 중요해.

1) Text 위젯

  • Text 위젯은 화면에 문자열을 표시하는 데 사용돼. 매우 간단하지만, 다양한 스타일을 적용할 수 있어.
  Text(
    'Hello, Flutter!',
    style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
  )

여기서 TextStyle을 이용해 글자의 크기나 굵기를 설정할 수 있어.

2) Container 위젯

  • Container는 Flutter에서 매우 많이 사용하는 위젯으로, 레이아웃을 조정하거나 스타일을 추가할 때 유용해. 패딩, 마진, 배경색 등을 쉽게 설정할 수 있어.
  Container(
    padding: EdgeInsets.all(16),
    margin: EdgeInsets.symmetric(horizontal: 10),
    color: Colors.blue,
    child: Text('This is a container!'),
  )

Container는 자식 위젯을 포함하고, 그 자식 위젯에 대해 다양한 레이아웃 설정을 할 수 있도록 도와줘.

3) Row와 Column 위젯

  • RowColumn은 여러 위젯들을 수평이나 수직으로 나열할 때 사용해.
  • Row: 자식 위젯들을 가로로 배치해.
  • Column: 자식 위젯들을 세로로 배치해.
  Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('First line'),
      Text('Second line'),
    ],
  )

여기서 mainAxisAlignment를 사용해 자식 위젯들이 어떻게 정렬될지를 설정할 수 있어.

4) Button 위젯

  • Flutter에는 다양한 버튼 위젯이 있어. 그중 가장 기본적인 것은 ElevatedButton이야.
  ElevatedButton(
    onPressed: () {
      print('Button pressed!');
    },
    child: Text('Press me'),
  )

onPressed는 버튼이 눌렸을 때 실행할 함수를 정의하는 부분이야. 버튼을 누르면 콘솔에 ‘Button pressed!’가 출력되지.


위젯 트리 이해하기

Flutter에서 UI는 위젯 트리(widget tree) 라는 형태로 구성돼. 위젯들은 부모와 자식 관계를 가지며, 이런 구조 덕분에 복잡한 UI도 체계적으로 만들 수 있어. 예를 들어, Scaffold라는 기본 레이아웃 위젯 안에 AppBar, Body, FloatingActionButton 등의 자식 위젯들을 넣어서 앱의 기본 구조를 잡는 방식이야.

Scaffold(
  appBar: AppBar(
    title: Text('My Flutter App'),
  ),
  body: Center(
    child: Text('Hello, Flutter!'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

위 예제에서 Scaffold는 앱의 기본 구조를 제공하고, AppBar, body, floatingActionButton이 각각 그 내부에서 역할을 담당하는 자식 위젯들이야.


마무리

이번 강의에서는 Flutter의 기본 위젯들과 위젯 트리에 대해 알아봤어. 다양한 위젯들을 조합하고 레이아웃을 구성하는 것이 Flutter 개발의 핵심이야. 다음 강의에서는 이런 기본 위젯들을 활용하여 실제로 간단한 앱을 만들어 볼 거야. 계속해서 실습하며 익혀보자!