플러터(Flutter) 기본 구성 및 예제

안녕하세요! 이번 포스팅에서는 플러터(Flutter)의 기본 구성과 함께 간단한 예제를 소개해드리도록 하겠습니다. 플러터는 구글이 만든 UI 툴킷으로, 안드로이드와 iOS 뿐만 아니라 웹 및 데스크탑 애플리케이션을 하나의 코드베이스로 작성할 수 있게 도와줍니다. 이 글을 통해 플러터의 구조와 작동 원리를 이해하고, 첫 번째 애플리케이션을 만들어보는 시간을 가져보겠습니다.

Flutter 로고

1. 플러터란?

플러터는 다양한 플랫폼을 위한 아름답고 네이티브의 성능을 제공하는 애플리케이션을 개발할 수 있는 오픈 소스 UI 프레임워크입니다. 플러터는 크게 다음과 같은 특징을 가지고 있습니다:

• 핫 리로드(Hot Reload): 코드 수정 후 즉각적인 결과를 확인할 수 있어 개발 속도가 빠릅니다.
• 다양한 플랫폼 지원: 안드로이드, iOS, 웹, 데스크탑 등 다양한 환경에서 동작합니다.
• 풍부한 UI 컴포넌트: 다양한 위젯으로 복잡한 UI를 쉽게 구성할 수 있습니다.

2. 플러터 설치 및 환경 설정

플러터 개발을 시작하기 위해 필요한 설치 단계는 다음과 같습니다.

2.1. Flutter SDK 다운로드

플러터 공식 웹사이트( flutter.dev )에서 SDK를 다운로드 후 압축을 풀어 적절한 경로에 저장합니다.

2.2. 환경 변수 설정

플러터의 경로를 시스템 환경 변수에 추가해주어야 합니다. 예를 들면, Windows의 경우:

System Properties → Environment Variables → User variables에서 Path에 Flutter SDK의 경로를 추가

2.3. Flutter Doctor 실행

설치가 완료되면 커맨드 라인에서 아래 명령어로 패키지 의존성을 확인할 수 있습니다.

flutter doctor

3. 기본 애플리케이션 예제

이제, 첫 번째 플러터 애플리케이션을 작성해보겠습니다.

3.1. 새 플러터 프로젝트 생성

아래 명령어를 통해 새로운 플러터 프로젝트를 생성합니다:

flutter create my_first_app

3.2. 프로젝트 구조 설명

프로젝트를 생성하면 다음과 같은 기본 구조가 생성됩니다:

• lib/main.dart : 애플리케이션의 진입점입니다.
• pubspec.yaml : 프로젝트의 메타데이터와 의존성을 관리하는 파일입니다.

3.3. main.dart 코드 작성

이제 lib/main.dart 파일을 열어 아래의 코드를 작성해봅시다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '나의 첫 플러터 앱',
      home: Scaffold(
        appBar: AppBar(
          title: Text('안녕하세요, 플러터!'),
        ),
        body: Center(
          child: Text('Hello, Flutter!', style: TextStyle(fontSize: 24)),
        ),
      ),
    );
  }
}

3.4. 애플리케이션 실행하기

이제 아래 명령어로 애플리케이션을 실행할 수 있습니다:

flutter run

4. 마무리

플러터로 첫 애플리케이션을 만들어보았습니다. 앞으로 더 복잡한 위젯들과 네비게이션, 상태 관리 등을 통해 기능을 확장해볼 수 있습니다. 플러터의 다양한 가능성을 탐험해보시길 바랍니다!