플러터(Flutter) 입문 정리: Dart 문법부터 StatefulWidget과 앱 라이프사이클까지 쉽게 이해하기

Flutter는 왜 처음 보면 어려워 보일까?

플러터(Flutter)를 처음 시작하면 많은 사람들이 비슷한 지점에서 막히게 됩니다. 안드로이드 스튜디오 설치까지는 어떻게든 따라가는데, 막상 코드를 열어보면 StatefulWidget, setState, build, Widget, Row, Column 같은 개념이 한 번에 등장하기 때문입니다. 특히 웹이나 백엔드 위주로 개발을 해왔던 사람들은 “왜 클래스가 두 개씩 나오지?”, “왜 변수 하나 바뀌는데 화면을 다시 그린다고 하지?” 같은 부분에서 처음 진입장벽을 느끼게 됩니다.

반응형

그런데 Flutter는 구조만 이해하면 생각보다 단순합니다. 실제로는 “Widget을 조립해서 화면을 만들고, 상태(State)가 바뀌면 화면을 다시 그린다”라는 개념 하나로 대부분 설명이 가능합니다. 처음에는 괄호도 많고 클래스도 많아 보이지만, 어느 순간부터는 “아 그냥 컴포넌트 조립 구조네?”라는 느낌이 오기 시작합니다.

특히 최근에는 Flutter를 공부하는 방식도 많이 달라졌습니다. 예전처럼 책이나 긴 강의를 처음부터 끝까지 보는 방식보다, AI와 대화하면서 현재 막히는 부분을 바로 질문하고 해결하는 방식으로 공부하는 사람들이 굉장히 많아졌습니다. Flutter는 특히 구조 이해가 중요한 분야라서, “왜 이렇게 동작하는지”를 반복 질문하면서 배우는 방식이 생각보다 잘 맞는 편입니다.

---

Flutter와 Dart는 무엇이 다른가?

Flutter를 처음 접하는 사람들은 Flutter와 Dart를 같은 개념처럼 생각하는 경우가 많습니다. 하지만 둘은 역할이 다릅니다. Dart는 프로그래밍 언어입니다. 쉽게 말하면 Java, PHP, Python 같은 언어 중 하나라고 생각하면 됩니다. 반면 Flutter는 UI 프레임워크입니다. 즉 Dart 언어를 사용해서 화면을 만드는 구조입니다. 예를 들어 Dart에서는 이런 식으로 변수를 만듭니다.

String name = "태희";

int age = 20;

 

반면 Flutter에서는 이런 식으로 화면을 구성합니다.

Text("안녕 Flutter")

 

즉 Dart는 문법이고, Flutter는 화면 조립 도구라고 이해하면 훨씬 쉽습니다.

플러터(Flutter) 입문 완전정리: 안드로이드 스튜디오 설치부터 앱 구조와 상태관리까지

▲ 플러터 기초 핵심 입문 정리 ▲

---

Flutter 설치와 Emulator 실행하기

Flutter를 시작할 때 가장 많이 사용하는 환경은 안드로이드 스튜디오(Android Studio)입니다. VSCode도 많이 사용하지만, 처음에는 Emulator와 SDK까지 같이 설정 가능한 안드로이드 스튜디오가 가장 편합니다.

설치 순서는 다음과 같습니다.

1. 안드로이드 스튜디오 설치
2. Flutter SDK 다운로드
3. Flutter Plugin 설치
4. Android Emulator 생성
5. flutter doctor 실행

Flutter SDK 설치 후 CMD나 PowerShell에서 다음 명령어를 입력합니다.

flutter doctor

 

이 명령어는 현재 Flutter 개발 환경 상태를 확인해주는 명령어입니다. Android toolchain이나 SDK 설정 상태를 확인할 수 있으며, 부족한 부분이 있으면 자동으로 안내 메시지가 표시됩니다.

Android Emulator는 안드로이드 스튜디오 상단 메뉴의 Device Manager에서 생성할 수 있습니다. 보통 Pixel 시리즈를 가장 많이 사용하며, Android 버전 다운로드 후 바로 실행 가능합니다.

Flutter의 장점 중 하나는 Hot Reload 기능입니다. 코드를 수정하면 거의 실시간으로 화면이 변경되기 때문에 개발 속도가 굉장히 빠른 편입니다.

---

Flutter의 핵심은 “모든 것이 Widget”이라는 점이다.

Flutter를 이해하는 가장 중요한 문장은 “모든 것은 Widget이다”입니다. 글자도 Widget이고 버튼도 Widget이며 이미지도 Widget입니다.

예를 들어 글자는 다음과 같습니다.

Text("안녕")

 

버튼은 다음과 같습니다.

ElevatedButton()

 

박스는 다음과 같습니다.

Container()

 

즉 Flutter는 결국 Widget을 계속 조립해서 화면을 만드는 구조입니다.

---

Row와 Column은 Flutter UI 구조의 핵심이다.

Flutter를 배우다 보면 가장 자주 보게 되는 것이 Row와 Column입니다. 사실 Flutter 화면 대부분은 Row와 Column 조합으로 만들어진다고 봐도 될 정도입니다.

Column은 세로 배치입니다.

Column(
  children: [

    Text("피티"),

    Text("태희"),

    Text("누렁이")
  ]
)

 

결과는 다음처럼 세로로 출력됩니다.

피티
태희
누렁이

 

반대로 Row는 가로 배치입니다.

Row(
  children: [

    Text("피티"),

    Text("태희"),

    Text("누렁이")
  ]
)

 

결과는 다음과 같습니다.

피티 태희 누렁이

 

웹 개발 경험이 있다면 flex 느낌으로 이해하면 적응 속도가 훨씬 빨라집니다.

---

Container는 웹의 div와 비슷하다.

Container는 Flutter에서 가장 많이 사용하는 Widget 중 하나입니다. 웹의 div와 굉장히 비슷한 역할을 합니다.

Container(

  width: 200,

  height: 100,

  color: Colors.blue,
)

 

이렇게 하면 파란색 박스가 생성됩니다.

안에 child를 넣어서 내부 UI를 구성할 수도 있습니다.

Container(

  padding: EdgeInsets.all(20),

  child: Text("TH-STUDY")
)

 

즉 Flutter는 Widget 안에 Widget을 계속 넣는 중첩 구조라고 보면 됩니다.

---

StatefulWidget과 StatelessWidget 차이 이해하기

Flutter 입문자가 가장 어려워하는 개념 중 하나가 StatefulWidget과 StatelessWidget입니다. 하지만 실제 개념은 생각보다 단순합니다.

StatelessWidget은 변하지 않는 화면입니다.

예시

• 회사소개 페이지
• 로고
• 고정 문구
• 정적인 화면

class TitleWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return Text("안변하는 제목");
  }
}

 

반면 StatefulWidget은 변하는 화면입니다.

예시

• 좋아요 숫자
• 채팅
• 로그인 상태
• 카운터 앱

class CounterPage extends StatefulWidget {

  @override
  State<CounterPage> createState() {

    return _CounterPageState();
  }
}

 

즉 핵심은 다음과 같습니다.

1. Stateless = 안 변함
2. Stateful = 변함

이렇게 이해하면 훨씬 쉬워집니다.

setState는 왜 중요한가?

Flutter에서 가장 중요한 개념 중 하나는 setState입니다.

setState(() {

  count++;
});

 

이 의미는 “상태가 바뀌었으니 화면 다시 그려!”입니다. Flutter는 상태(State)가 변경되면 build()를 다시 호출하면서 화면을 갱신합니다.

즉 흐름은 다음과 같습니다.

setState()
→ build() 재실행
→ 화면 변경

 

이 구조를 이해하면 Flutter가 갑자기 훨씬 쉽게 느껴집니다.

Flutter 앱 라이프사이클 이해하기

Flutter도 앱 라이프사이클(App Lifecycle)이 존재합니다. 즉 앱이 실행되고 종료될 때 특정 함수들이 호출됩니다.

먼저 main()은 앱 시작점입니다.

void main() {

  runApp(MyApp());
}

 

앱 실행 시 가장 먼저 호출됩니다.

initState()는 화면이 처음 열릴 때 딱 한 번 실행됩니다.

@override
void initState() {

  super.initState();

  print("처음 실행");
}

 

보통 여기서 API 호출, 로그인 확인, 초기 데이터 조회 등을 처리합니다.

build()는 화면을 그리는 함수입니다.

@override
Widget build(BuildContext context)

 

Flutter는 상태가 변경되면 build를 다시 호출해서 화면을 갱신합니다.

dispose()는 화면 종료 시 호출됩니다.

@override
void dispose() {

  super.dispose();
}

 

실무에서는 메모리 정리, 타이머 종료, 소켓 종료 등에 사용됩니다.

즉 Flutter 앱 흐름은 다음과 같습니다.

main()
→ initState()
→ build()
→ setState()
→ build()
→ dispose()

 

이 흐름만 이해해도 Flutter 구조 이해도가 확 올라갑니다.

Flutter도 웹처럼 공통 컴포넌트를 만든다.

Flutter도 규모가 커지면 웹처럼 공통 컴포넌트를 분리합니다. 예를 들어 웹에서 include header.php 같은 구조를 사용하는 것처럼 Flutter에서도 공통 Widget을 따로 분리해서 재사용합니다.

예시

HeaderWidget()
FooterWidget()
CustomButton()
UserCardWidget()

 

실무에서는 거의 대부분 이런 구조를 사용합니다. 왜냐하면 한 파일에 모든 UI를 넣으면 유지보수가 굉장히 어려워지기 때문입니다.

즉 Flutter 역시 결국 컴포넌트 기반 개발이라고 보면 됩니다.

---

AI와 같이 Flutter를 공부하는 방식이 생각보다 잘 맞는 이유

최근에는 Flutter를 공부할 때 ChatGPT 같은 AI를 함께 사용하는 사람들이 굉장히 많아졌습니다. 특히 Flutter는 단순 문법 암기보다 구조 이해가 중요하기 때문에, 현재 막히는 부분을 바로 질문할 수 있다는 점이 생각보다 큰 장점입니다.

예를 들어 다음과 같은 질문들을 계속 물어볼 수 있습니다.

1. StatefulWidget은 왜 쓰는 거야?
2. setState 안 쓰면 왜 화면이 안 바뀌어?
3. build가 왜 계속 실행돼?
4. 웹의 div랑 Flutter Container는 뭐가 달라?
5. Row랑 Column은 어떻게 구분해?

특히 “초딩도 이해하게 설명해줘”, “웹 개발 기준으로 비교해줘”, “실무 느낌으로 알려줘” 같은 방식으로 질문할 수 있다는 점이 기존 책이나 영상과 가장 큰 차이였습니다.

물론 AI가 모든 걸 대신해주는 것은 아닙니다. 결국 직접 Emulator를 띄워보고, 버튼을 만들어보고, 에러를 해결해보는 과정은 꼭 필요합니다. 하지만 최소한 “왜 이 구조인지 모르겠다” 상태를 빠르게 넘기는 데는 굉장히 도움이 되는 방식이라고 느껴졌습니다.

---

마무리는 Flutter는 결국 “상태와 화면”을 이해하는 구조였다.

Flutter를 처음 시작하면 StatefulWidget, build(), setState 같은 개념 때문에 굉장히 어렵게 느껴질 수 있습니다. 하지만 실제로는 “상태(State)가 바뀌면 화면을 다시 그린다”라는 구조 하나로 대부분 설명이 가능합니다.

그리고 Flutter는 결국 Widget 조립 시스템입니다. Row, Column, Container, Text, Button 정도만 익숙해져도 기본 앱은 충분히 만들 수 있습니다.

처음에는 괄호도 많고 클래스도 많아서 복잡하게 느껴질 수 있지만, 실제로 간단한 앱을 몇 개 만들어보면 어느 순간 “아 그냥 컴포넌트 조립 구조네?”라는 감각이 오게 됩니다. Flutter는 결국 손으로 많이 만들어볼수록 감각이 붙는 분야이기 때문에, 너무 이론만 붙잡기보다 Emulator를 띄우고 버튼 하나 만들어보는 식으로 직접 부딪혀보는 것이 가장 빠른 학습 방법이라고 느껴졌습니다.