Flutter 설치, 서버 연결, 배포

Flutter

• 개념: 구글이 개발한 오픈소스 UI 프레임워크
• 사용 : 모바일 앱 개발
• 하나의 코드베이스로 두 플랫폼(iOS, Android) 동시 개발 가능

Flutter 특징

• Dart 언어 사용: JavaScript와 유사하지만, Flutter의 성능 최적화에 유리
• 핫 리로드(Hot Reload): 코드 변경 시 앱을 즉시 다시 실행하지 않고, 변경된 부분만 바로 반영 가능 » 빠른 개발 속도
• 위젯 기반 UI: UI를 위젯 단위로 구성 » 세밀한 UI 디자인 가능
• 네이티브 성능: 네이티브 앱과 유사한 성능, 복잡한 UI와 애니메이션에도 유리

Flutter 설치(Windows)

1) Flutter 다운로드

(1) Flutter 공식 웹사이트에서 zip 파일 다운로드
-Windows install 의 Get the Flutter SDK 에서 flutter_windows_3.10.5-stable.zip (버전에 따라 파일명 변경)
-*위 버전이 아닌 이전 빌드를 원하는 경우 SDK 자료실
(2) 다운로드한 파일을 원하는 디렉토리에서 압축 풀기

2) 환경 변수

(1) 제어판 > 시스템 및 보안 > 시스템 > 고급 시스템 설정
(2) ‘환경 변수’ 버튼 클릭
(3) ‘시스템 변수’ 섹션에서 ‘Path’ 변수 클릭 ->‘편집’ 버튼을 클릭
(4) ‘새로 만들기’ 버튼 클릭 ->압축 해제한 Flutter SDK의 ‘bin’ 디렉토리 경로 입력

3) Flutter 설치 확인

(1) cmd 열기
(2) flutter –version 입력 후, 버전 정보 나오면 설치 완료

Flutter 프로젝트 생성

flutter create --org com.엔드포인트 --platforms android,ios 프로젝트명

Flutter 서버와 연결

(1) 서버 API 설계

• 보통 RESTFul API 형태

• 서버와의 통신을 위해 http 패키지 사용

• pubspec.yaml 파일에 http 패키지를 추가

  dependencies:
  flutter:
    sdk: flutter
  http: ^0.14.0
  

(2) HTTP 요청 보내기(Flutter 앱에서 서버로 요청 전송)

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Server Connection',
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Server Connection')),
        body: Center(child: ServerData()),
      ),
    );
  }
}

class ServerData extends StatefulWidget {
  @override
  _ServerDataState createState() => _ServerDataState();
}

class _ServerDataState extends State<ServerData> {
  String data = '';

  // 서버로부터 데이터 가져오기
  Future<void> fetchData() async {
    final response = await http.get(Uri.parse('https://yourapi.com/data'));
    
    if (response.statusCode == 200) {
      setState(() {
        data = json.decode(response.body)['message'];
      });
    } else {
      throw Exception('Failed to load data');
    }
  }

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  @override
  Widget build(BuildContext context) {
    return Text(data.isEmpty ? 'Loading...' : data);
  }
}

(3) 서버와의 통신 처리

• 위 코드에서 fetchData함수는 http.get을 사용하여 데이터를 가져옴.
• 서버가 정상적으로 데이터를 반환하면, data 변수에 해당 값을 할당하고 화면에 표시함.

Flutter 서버 배포

• 클라우드 서비스(Firebase 또는 Heroku 등) 사용

  Firebase Hosting 설정

  (1) Firebase 프로젝트 생성
  (2) Firebase CLI 설치 -> Firebase 프로젝트를 Flutter 프로젝트에 연결
  (3) firebase init 명령어로 Firebase Hosting을 설정
  (4) firebase deploy 명령어로 앱을 Firebase에 배포

  firebase init
  firebase deploy