[Flutter_개발] 영화관 좌석 예매 앱 만들기

1. 학습 목표

• Flutter의 상태 관리 기초를 이해한다. (StatefulWidget, setState)
• 위젯을 파일 단위로 분리하여 UI 구조를 체계적으로 만든다.
• 사용자 입력에 따라 화면이 동적으로 변경되는 앱을 구현한다.

2. StatefulWidget과 StatelessWidget의 차이

• StatelessWidget은 상태가 없는 위젯으로, 데이터가 바뀌어도 화면이 다시 그려지지 않는다.
• StatefulWidget은 상태(State)를 가지고 있으며, 데이터가 변경되면 setState()를 통해 화면을 다시 그릴 수 있다.

setState()는 “상태가 바뀌었으니 다시 그려달라”는 신호를 Flutter 프레임워크에 보내는 함수이다.
이 함수를 호출하지 않으면 변수 값이 바뀌어도 UI에는 변화가 없다.

 

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

3. 앱 구조 설계 및 구현 단계

앱 이름: flutter_seat_app

1. 퍼블리싱(UI 그리기)와 데이터 바인딩(상태 관리)을 분리해서 개발했다.
   • 처음에는 모든 화면을 StatelessWidget으로 구현하고,
     이후 상태가 필요한 부분만 StatefulWidget으로 변경했다.
2. UI 구조는 세로 방향으로 Column을 사용하여 구성했다.
   주요 구성 요소는 다음과 같다.
   • seat_select_box.dart : 좌석 선택 구역
   • seat_bottom.dart : 하단 버튼 및 정보 영역

 

class SeatPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('영화관 좌석 예매')),
      backgroundColor: Colors.grey[200],
      body: Column(
        children: [
          SeatSelectBox(),
          SeatBottom(),
        ],
      ),
    );
  }
}

4. 학습 내용 요약

• StatefulWidget은 사용자 입력과 데이터 변경을 반영할 때 사용한다.
• setState()는 단순히 변수를 바꾸는 것이 아니라 UI를 다시 그리도록 요청하는 역할을 한다.
• 위젯을 파일로 나누면 유지보수와 협업이 쉬워진다.
• Flutter는 “UI는 상태(State)의 함수”라는 개념을 기반으로 작동한다.

 

이번 강의를 수행하면서 느낀것은 단순히 화면을 만드는 것보다 상태와 UI의 관계를 이해하는 것이 중요했다. 구조를 먼저 잡고 기능을 추가하는 방식이 훨씬 효율적이라는 것을 느꼈다. Flutter의 상태 관리 원리를 이해하는 좋은 연습이었다.