Flutter 앱 개발 기본 절차

1. 개발 환경 준비

Flutter 개발에는 보통 다음 도구가 필요합니다.

항목설명

Flutter SDK	Flutter 개발 핵심 도구
Dart SDK	Flutter에 포함됨
Android Studio	Android SDK, Emulator, 빌드 도구
VS Code 또는 Android Studio	코드 작성용 IDE
Git	Flutter 설치 및 패키지 관리에 필요
Java JDK	Android 빌드에 필요

Windows 기준으로는 보통 다음 조합이 좋습니다.

Windows 10/11
Flutter SDK
Android Studio
VS Code
Git
JDK

 

---

2. Flutter SDK 설치

Flutter 공식 사이트에서 Windows용 Flutter SDK를 다운로드합니다.

설치 후 예를 들어 다음 위치에 압축을 풉니다.

C:\src\flutter

 

그리고 환경 변수 Path에 아래 경로를 추가합니다.

C:\src\flutter\bin

 

명령 프롬프트에서 확인합니다.

 

flutter --version

 

---

3. Android Studio 설치

Android 앱을 만들려면 Android Studio가 필요합니다.

설치할 주요 항목은 다음과 같습니다.

Android SDK
Android SDK Platform
Android SDK Build-Tools
Android Emulator
Android SDK Command-line Tools

 

설치 후 Android Studio에서 SDK 경로를 확인합니다.

보통 경로는 다음과 같습니다.

C:\Users\사용자명\AppData\Local\Android\Sdk

 

---

4. 개발 환경 점검

Flutter는 flutter doctor 명령으로 개발 환경을 점검합니다.

 

flutter doctor

 

문제가 있으면 다음처럼 표시됩니다.

[✓] Flutter
[✓] Android toolchain
[✓] Chrome
[✓] Android Studio
[✓] VS Code
[✓] Connected device

 

Android 라이선스 오류가 나오면 아래 명령을 실행합니다.

 

flutter doctor --android-licenses

 

모두 y로 승인하면 됩니다.

---

Flutter 프로젝트 생성

1. 새 프로젝트 만들기

 

flutter create emes_lite_app

 

프로젝트 폴더로 이동합니다.

 

cd emes_lite_app

 

실행합니다.

 

flutter run

 

---

2. 기본 폴더 구조

emes_lite_app
 ├─ android
 ├─ ios
 ├─ lib
 │   └─ main.dart
 ├─ pubspec.yaml
 └─ test

 

가장 많이 수정하는 곳은 다음 두 곳입니다.

파일/폴더역할

lib/main.dart	앱 메인 소스
pubspec.yaml	패키지, 이미지, 폰트 설정

---

Flutter 기본 코드 구조

lib/main.dart의 기본 구조는 보통 다음과 같습니다.

 

import 'package:flutter/material.dart';

void main() {
  runApp(const EMesLiteApp());
}

class EMesLiteApp extends StatelessWidget {
  const EMesLiteApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'eMES Lite',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorSchemeSeed: Colors.blue,
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('eMES Lite'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            debugPrint('생산실적 등록');
          },
          child: const Text('생산실적 등록'),
        ),
      ),
    );
  }
}

 

---

Flutter 앱 개발 핵심 개념

1. Widget

Flutter는 모든 화면 요소가 Widget입니다.

화면
버튼
텍스트
입력창
이미지
목록
팝업
레이아웃

 

모두 Widget으로 구성합니다.

대표 Widget은 다음과 같습니다.

Widget용도

Scaffold	기본 화면 구조
AppBar	상단 타이틀
Column	세로 배치
Row	가로 배치
Text	글자 표시
TextField	입력창
ElevatedButton	버튼
ListView	목록
Card	카드형 UI
Container	영역/박스

---

2. 화면 이동

Flutter에서는 Navigator를 사용합니다.

 

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const ProductionPage(),
  ),
);

 

화면을 닫을 때는 다음처럼 사용합니다.

 

Navigator.pop(context);

 

---

3. API 통신

서버와 통신하려면 http 패키지를 많이 사용합니다.

pubspec.yaml에 추가합니다.

 

dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.2

 

설치합니다.

 

flutter pub get

 

API 호출 예시는 다음과 같습니다.

 

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<List<dynamic>> fetchItems() async {
  final url = Uri.parse('https://example.com/api/items');

  final response = await http.get(url);

  if (response.statusCode != 200) {
    throw Exception('API 조회 실패');
  }

  return jsonDecode(response.body) as List<dynamic>;
}

 

MES Lite라면 다음과 같은 API 구조가 좋습니다.

GET  /api/item/list
GET  /api/workorder/list
POST /api/production/result
GET  /api/lot/history
POST /api/defect/save

 

---

Flutter로 MES Lite 앱을 만든다면

현장 태블릿용 Flutter 앱은 다음 기능부터 시작하는 것이 좋습니다.

1차 기능

로그인
작업지시 조회
생산실적 등록
불량 등록
LOT 조회
품목 조회
바코드 스캔
사진 업로드

 

추천 메뉴 구조

eMES Lite
 ├─ 로그인
 ├─ 메인
 │   ├─ 작업지시
 │   ├─ 생산실적
 │   ├─ 불량등록
 │   ├─ LOT 조회
 │   ├─ 재고조회
 │   └─ 환경설정

 

---

Flutter 개발에 자주 쓰는 패키지

패키지용도

http	REST API 통신
dio	고급 API 통신
provider	상태관리
riverpod	상태관리
sqflite	로컬 SQLite
shared_preferences	간단 설정 저장
image_picker	사진 촬영/선택
mobile_scanner	바코드/QR 스캔
permission_handler	권한 처리
path_provider	파일 경로
intl	날짜/숫자 포맷

MES 앱 기준으로는 아래 패키지부터 검토하면 됩니다.

 

dependencies:
  flutter:
    sdk: flutter
  dio: ^5.7.0
  provider: ^6.1.2
  shared_preferences: ^2.3.2
  mobile_scanner: ^5.2.3
  image_picker: ^1.1.2
  permission_handler: ^11.3.1
  intl: ^0.19.0

 

---

Android APK 빌드

테스트용 APK는 다음 명령으로 만듭니다.

 

flutter build apk

 

결과 파일 위치는 다음과 같습니다.

build\app\outputs\flutter-apk\app-release.apk

 

Google Play 업로드용은 AAB로 만드는 것이 일반적입니다.

 

flutter build appbundle

 

결과 위치는 다음과 같습니다.

build\app\outputs\bundle\release\app-release.aab

 

---

Flutter 개발 시 주의할 점

1. 화면 크기 대응

태블릿, 스마트폰, 접이식 기기 등 화면 크기가 다릅니다.
처음부터 반응형 구조를 고려해야 합니다.

 

final width = MediaQuery.of(context).size.width;

 

화면 폭에 따라 레이아웃을 다르게 구성하는 것이 좋습니다.

---

2. 네트워크 오류 처리

현장 앱은 Wi-Fi가 불안정할 수 있습니다.

API 오류가 나도 앱이 종료되면 안 됩니다.

 

try {
  final data = await fetchItems();
} catch (e) {
  debugPrint('오류: $e');
}

 

실무에서는 사용자에게 다음처럼 표시하는 것이 좋습니다.

서버 연결이 원활하지 않습니다.
잠시 후 다시 시도해 주세요.

 

---

3. 오프라인 처리

제조 현장에서는 네트워크가 끊길 수 있습니다.

중요 입력 데이터는 임시 저장 후 네트워크가 복구되면 서버로 전송하는 구조가 좋습니다.

입력
↓
로컬 SQLite 저장
↓
서버 연결 확인
↓
미전송 데이터 업로드
↓
전송 완료 처리

 

---

4. 권한 처리

카메라, 위치, 파일 접근을 사용하려면 Android 권한 처리가 필요합니다.

예를 들어 바코드 스캔은 카메라 권한이 필요합니다.

CAMERA
INTERNET
ACCESS_NETWORK_STATE
READ_MEDIA_IMAGES

 

---

C# 개발자 관점에서 준비할 것

C# 개발자가 Flutter를 시작한다면 다음 순서가 좋습니다.

1. Dart 기본 문법
2. Flutter Widget 구조
3. 화면 이동
4. API 통신
5. 상태관리
6. 로컬 저장
7. 카메라/바코드
8. APK/AAB 빌드

 

C#과 Dart는 문법 느낌이 어느 정도 비슷합니다.
다만 Flutter는 UI를 코드로 구성하는 방식이므로 Widget 구조에 익숙해지는 것이 중요합니다.

---

결론

Flutter로 앱을 개발하려면 다음 5가지를 준비하면 됩니다.

1. Flutter SDK 설치
2. Android Studio 설치
3. VS Code 또는 Android Studio 설정
4. Dart/Widget 구조 학습
5. API 기반 앱 구조 설계

 

MES Lite나 제조업 현장 앱을 Flutter로 만든다면 핵심은 이것입니다.

Flutter 앱은 화면과 현장 입력을 담당하고,
업무 로직과 데이터는 API 서버와 DB에서 처리한다.

 

즉, Flutter 앱이 DB에 직접 접속하는 방식보다는 다음 구조가 좋습니다.

Flutter App
    ↓
REST API Server
    ↓
MariaDB / MS SQL Server

 

이 구조로 개발하면 Android, iOS, Web, Windows 확장까지 고려할 수 있습니다.