예제로 배우는 Dart & Flutter 시작하기 ⑧ - Flutter 첫 앱 만들기 (Counter App 실습)

예제로 배우는 Dart & Flutter 시작하기 ⑧ - Flutter 첫 앱 만들기 (Counter App 실습)

이제까지 Dart의 문법을 충실히 익혔다면, 본격적으로 Flutter 앱 개발에 도전할 시간입니다!
이번 글에서는 Flutter의 대표 입문 예제인 카운터 앱(Counter App) 을 직접 구현해보며, Flutter의 기본 구조와 위젯 시스템에 익숙해지는 것을 목표로 합니다.

---

📌 1. Flutter란?

Flutter는 Google이 만든 크로스 플랫폼 UI 프레임워크로, 하나의 코드베이스로 Android, iOS, 웹, 데스크탑 앱을 동시에 개발할 수 있습니다.
모든 것이 위젯(widget) 으로 구성되어 있어 선언형 UI 방식에 익숙해져야 합니다.

---

📌 2. Flutter 프로젝트 생성하기

터미널에서 다음 명령어로 새 Flutter 프로젝트를 생성합니다:

flutter create counter_app
cd counter_app
code .   # VS Code에서 열기

---

📌 3. Flutter 앱 구조 이해하기

생성된 Flutter 프로젝트의 핵심 구조:

lib/
 └── main.dart        // 앱의 진입점
android/, ios/, web/  // 플랫폼 별 빌드 설정

main.dart 파일은 Dart에서 배운 main() 함수가 포함된 Flutter 앱의 진입점입니다.

---

📌 4. main.dart 기본 코드 구조

반응형

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

// 루트 위젯
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Counter',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: CounterPage(),
    );
  }
}

---

📌 5. StatefulWidget을 이용한 카운터 구현

Flutter에서 변경 가능한 UI(상태 변화) 를 구현하려면 StatefulWidget을 사용해야 합니다.

class CounterPage extends StatefulWidget {
  @override
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++; // 상태 변경 → UI 갱신
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('카운터 앱')),
      body: Center(
        child: Text(
          '버튼을 누른 횟수: $_counter',
          style: TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '증가',
        child: Icon(Icons.add),
      ),
    );
  }
}

---

📌 6. 핵심 개념 정리

개념 설명

StatelessWidget	상태가 없는 정적인 UI 구성
StatefulWidget	상태가 바뀔 수 있는 UI (예: 버튼 클릭 시 숫자 증가 등)
setState()	상태를 갱신하고, UI를 다시 렌더링
Scaffold	기본 페이지 구조 제공 (앱바, 바디, 버튼 등)
FloatingActionButton	화면에 떠 있는 동그란 버튼

---

📌 7. 실습 결과

앱을 실행하면 다음과 같은 UI가 나타납니다:

• "버튼을 누른 횟수: 0" 표시
• 하단의 + 버튼 클릭 시 숫자가 1씩 증가
• 앱바와 Material 디자인이 적용된 기본 구성

---

📌 8. 실습 팁: 다크모드 지원하기

MaterialApp의 themeMode 속성을 통해 다크모드를 지원할 수 있습니다:

MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  themeMode: ThemeMode.system,
)

---

📌 9. 이번 글에서 배운 내용

• Flutter 프로젝트 생성 및 기본 구조 이해
• StatelessWidget vs StatefulWidget 차이
• 버튼 클릭 시 상태 변경 및 UI 갱신 방법
• setState() 사용법과 위젯 트리 이해
• 간단한 앱 구성 실습

---

📌 10. 다음 글 예고

다음 글에서는 Flutter 앱의 UI를 더욱 풍성하게 만드는 TextField(입력폼), 버튼, 이미지, 아이콘 위젯 들을 실습합니다.
UI 요소에 사용자 입력을 받아 처리하는 방법도 함께 다룹니다.

• 다음 글 제목:
  『예제로 배우는 Dart & Flutter 시작하기 ⑨ - 기본 위젯(Text, 버튼, 입력폼) 마스터하기』

---

 

Flutter Counter 예제,Dart Flutter 시작하기,Flutter 상태관리 기본,StatefulWidget 사용법,Flutter 앱 만들기,Flutter UI 구조 이해,Flutter setState 예제,Flutter 프로젝트 생성,Flutter 버튼 클릭 처리,Flutter Dart 입문