Flutter 개발-2: 프로젝트 생성 및 구조 파악

이전 포스팅에서 Flutter 개발 환경을 설정했다면, 이제 실제 프로젝트를 생성하고 Flutter 앱의 기본 구조를 살펴볼 차례입니다. 만약 Dart 언어에 대해 기본적인 숙지가 안 되어 있다면 우선 다트 기초(Dart 언어 입문 – 기본 문법과 데이터 타입 – CSAI)부터 보고 오세요~

1. Flutter 프로젝트 생성

Flutter 프로젝트를 생성하는 방법은 두 가지가 있습니다:

명령줄 사용

1. 터미널 또는 명령 프롬프트를 엽니다.
2. 프로젝트를 생성할 디렉토리로 이동합니다.
3. 다음 명령어를 실행합니다:

flutter create my_first_app

Android Studio 사용

1. Android Studio를 실행합니다.
2. ‘File’ > ‘New’ > ‘New Flutter Project’를 선택합니다.
3. ‘Flutter Application’을 선택하고 ‘Next’를 클릭합니다.
4. 프로젝트 이름과 저장 위치를 지정합니다.
5. Flutter SDK 경로가 올바른지 확인합니다.
6. ‘Finish’를 클릭하여 프로젝트를 생성합니다.

2. 프로젝트 구조 살펴보기

Flutter 프로젝트를 생성하면 다음과 같은 기본 구조가 만들어집니다:

my_first_app/
├── android/
├── ios/
├── lib/
│   └── main.dart
├── test/
├── pubspec.yaml
└── README.md

• android/: Android 앱 관련 파일
• ios/: iOS 앱 관련 파일
• lib/: Dart 코드가 위치하는 곳. main.dart가 앱의 시작점
• test/: 테스트 파일
• pubspec.yaml: 프로젝트 설정 및 종속성 정의 파일

3. main.dart 파일 살펴보기

lib/main.dart 파일은 Flutter 앱의 진입점입니다. 기본 생성된 코드를 살펴보겠습니다:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

이 코드는 간단한 카운터 앱을 구현합니다. 버튼을 누를 때마다 숫자가 증가하는 기능을 보여줍니다.

4. 앱 실행하기

프로젝트를 생성하고 기본 구조를 살펴봤으니, 이제 앱을 실행해 봅시다:

1. Android Studio에서 에뮬레이터를 실행하거나 실제 디바이스를 연결합니다.
2. main.dart 파일을 열고 ‘Run’ 버튼을 클릭하거나 Shift + F10을 누릅니다.
3. 앱이 빌드되고 실행되는 것을 확인합니다.

마무리

이번 포스팅에서는 Flutter 프로젝트를 생성하고 기본 구조를 살펴보았습니다. 다음 포스팅에서는 이 기본 구조를 바탕으로 간단한 To-Do 리스트 앱의 UI를 구현해 보겠습니다.

Flutter 개발에 대해 더 궁금한 점이 있다면 댓글로 남겨주세요!

관련 사이트

다트 공식 홈페이지: Dart programming language | Dart

플러터 공식 홈페이지: Flutter – Build apps for any screen