🛠️ Flutter 기초 1강: Flutter 프로젝트 구조 이해하기 및 실행
“앱이 어떻게 생겼는지 속을 들여다보는 시간!”
🎯 오늘의 목표
-
Flutter 프로젝트 안에 있는 폴더와 파일들이 어떤 역할을 하는지 이해해요.
-
main.dart 파일이 무엇인지 배워요.
-
앱을 어떻게 실행하는지 배워요.
📁 Flutter 프로젝트를 만들면 이렇게 생겼어요!
my_flutter_app/
├── android/
├── ios/
├── lib/
│ └── main.dart
├── build/
├── pubspec.yaml
└── test/각 폴더는 앱의 몸통을 구성하는 부분이에요.
아래에서 하나씩 설명해볼게요!
🧩 1. lib/폴더
우리가 앱의 화면(UI)과 동작을 만드는 곳이에요!
💡 여기서 가장 중요한 파일:
-
main.dart → 앱의 시작점이에요.
void main() {
runApp(MyApp());
}📌 main() 함수는 항상 앱의 시작을 알려주는 Dart 코드예요.
runApp()은 화면을 띄우는 명령이에요.
🧠 2. main.dart 파일이란?
우리가 작성하는 모든 Flutter 앱은 main.dart 파일에서 시작해요.
예시:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Text('Hello Flutter!'),
),
),
);
}
}이렇게 작성하면 앱을 실행했을 때 “Hello Flutter!”라는 문장이 보이게 돼요.
🧰 3. build/폴더
앱을 만들고 실행할 때 Flutter가 자동으로 생성하는 폴더예요.
여러분이 직접 수정할 필요는 없어요.
-
앱을 다시 실행하면 새로 만들어져요.
🤖 4. android/, ios/ 폴더
우리가 만든 앱을 안드로이드(Android) 또는 **아이폰(iOS)**에 설치할 수 있도록 도와주는 폴더예요.
이 부분도 처음에는 건드릴 필요 없어요.
-
나중에 앱을 출시할 때 사용해요!
🧪 5. 앱 실행하는 방법
VSCode에서 Flutter 프로젝트를 만든 후 앱을 실행해볼까요?
✅ VSCode에 iOS / Android 앱 시뮬레이터 설정을 먼저 실시 합니다.
✅ Flutter 기본 앱 만들기
VSCode에서 Command + Ship + P 를 눌러서 서치 패널을 마우스로 클릭합니다.
마우스를 클릭하면 선택할수 있는 리스트 메뉴 화면이 나옵니다.
여기서 나온 메뉴중에 Flutter : New Project 를 선택합니다.
다음 선택 메뉴가 나옵니다. Application, Empty Application, Skeleton Applicaiton...
Application ( A Flutter application with descriptive comments and test ) 을 선택 합니다.
폴더 선택 화면이 나옵니다. 파란색 버튼 Select a folder to creat the project in 클릭
테스트로 만들 Flutter Application 명을 입력합니다. ( 폴더도 생성 되겠죠 )
첫번째 테스트로 만드는 Flutter app이라 " flutter_application_test1 " 이라고 입력 엔터
아래와 같이 첫번째 Flutter Application이 생성 되었습니다.
✅ 실습: Flutter 앱 실행하기
-
VSCode에서 main.dart 파일 열기
아이폰 시뮬레이터를 먼저 선택해서 설정을 해줍니다. ( 에러나면 맨위에 붉은색 버튼을 누르고 해당 페이지 참고해서 시뮬레이서 셋팅을 다시 잘 해주세요 )
-
우측 상단에 실행 버튼을 클릭합니다.
-
두개의 명령 메뉴가 나타납니다. Start Debugging, Run without Debugging
Run without Debugging 을 클릭 합니다. 실행이 되고 있습니다.
📘 오늘 배운 용어 요약
|
폴더/파일 |
역할 설명 |
|---|---|
|
lib/ |
우리가 코드를 작성하는 곳 |
|
main.dart |
앱의 시작점, 첫 번째 코드가 있는 파일 |
|
android/, ios/ |
앱을 핸드폰에서 실행할 수 있게 도와주는 폴더 |
|
build/ |
앱 실행 시 자동으로 만들어지는 폴더 |
|
flutter run |
앱을 실행하는 명령어 |
댓글 쓰기