[Flutter] 쉽게 배우는 플러터 앱 개발 실무 01강

정보

업무명 : [Flutter] 쉽게 배우는 플러터 앱 개발 실무 01강
작성자 : 이상호
작성일 : 2024.12.14
설 명 :
수정이력 :

Flutter란?

[앱 개발 방식]

일반적으로 사용되는 앱개발 도구는 아래와 같이 분류됩니다.

구분	언어 레벨	iOS 앱	Android 앱
네이티브(Native) 앱	Low-Level	Objective-C
	Mid-Level		Java
	High-Level	Swift	Kotlin
하이브리드(Hybrid) 앱	High-Level	Dart/Flutter	Dart/Flutter
하이브리드(Hybrid) 앱	High-Level	ReactNative	ReactNative

네이티브 개발 방식과 하이브리드 개발 방식은 아래의 표와 같은 특징을 가집니다.

구분	장점	단점
네이티브(Native)	모바일 기기에 최적화돼있기 때문에 앱의 구동 속도가 빠르고 사용자들이 사용하기 편리하다	안드로이드 앱과 iOS앱을 개발할 때 각 언어가 다름으로 시간과 비용이 이중으로 발생한다.
네이티브(Native)	하이브리드 앱에 비해 구현할 수 있는 기능이 많고 보다 고급적인 기술들을 사용한다.
하이브리드(Hybrid)	안드로이드 앱과 iOS앱을 같은 언어로 개발할 수 있기 때문에 빠르게 앱 개발이 가능하고 유지보수 또한 용이하다.	네이티브 앱에 비해 성능이 떨어진다.

위와 같은 사유에 의하여 하이브리드 방식의 개발이 증가하고 있으며 주로 하이브리드 방식으로 개발하고 꼭 필요한 경우 네이티브 방식으로 튜닝하는 방법으로 앱 개발이 이루어지고 있습니다.
Flutter와 ReactNative는 크로스 플랫폼(Cross Platform) 혹은 멀티 플랫폼(Multi Platform) 개발 도구라고 불리기도 하며 iOS와 Android 앱의 한계를 넘어 Windows, Linux, MacOS 및 Web 앱으로 개발 영역을 확장하고 있습니다.

[Flutter의 구조]

Flutter 프레임워크(Framework)는 아래와 같은 구조로 되어 있습니다.
그러나 프로그래머의 관점에서는 프레임워크 구조의 최상단에 위치한 Dart라는 프로그래밍 언어와 Dart로 미리 만들어져서 제공되는 구조가 미리 정해진 코드들의 집합으로 이해할 수 있습니다.

[Dart와 Flutter]

Dart와 Flutter의 관계는 Java와 Spring의 관계와 같이 Dart와 Java는 프로그래밍 언어이고 Flutter와 Spring은 프레임워크로 Spring은 웹 프레임워크인데 Flutter는 앱 프레임워크라는 것에 차이가 있습니다.

프로그래밍 언어	프레임워크	용도
Java	Spring	웹 개발
Dart	Flutter	앱 개발

Flutter 개발 도구

Flutter 개발 도구에는 안드로이드 스튜디오와 Visual Studio Code와 IDX(Intel’s Developer Cloud)가 있습니다.

Project IDX

Project IDX is an entirely web-based workspace for full-stack application development, complete with the latest generative AI from Gemini, and full-fidelity app previews, powered by cloud emulators.

idx.dev

안드로이드 스튜디오, Visual Studio Code 및 IDX 중에서 어떤 개발 도구를 사용하여야 할까요?

구분	이뮬레이터	실제 기기 연결	안정성	설치 여부	기타
안드로이드 스튜디오	상	상	중	설치	프로젝트 생성시 Hang되는 현상 → Visual Studio Code로 열림 / 생성된 폴더를 지우고 다시 시도 / flutter create 명령으로 프로젝트 생성
Visual Studio Code	중	상	상	설치	다양한 이뮬레이터 사용 불가 → 안드로이드 스튜디오 연계 사용, flutter create 명령을 사용한 프로젝트의 생성만 가능함, 경고와 오류 메세지의 밑줄이 코딩을 방해할 수준으로 나타나기 때문에 analysis_options.yaml 파일에 예외처리를 일일이 해 주어야 함
IDX	하	하	중	설치 않음	iOS 앱 테스트 불가 → 폰에 설치 후 테스트 해야 함

제한된 교육용 : IDX + 이뮬레이터
- 안드로이드 이뮬레이터로 카메라 및 ios 등의 테스트 제약
교육용 : 안드로이드 스튜디오/Visual Studio Code + 이뮬레이터 + 실제 기기
개발용 : 안드로이드 스튜디오/Visual Studio Code + 실제 기기 + 이뮬레이터
- 이뮬레이터의 속도가 느리고 잦은 오류 / 특히 카메라 사용시
- 맥북 사용시 iOS 이뮬레이터로 증상이 완화되나 카메라 사용불가

Flutter App 만들기 기초

[학습목표]

Intel’s Developer Cloud (IDX)에서 Flutter 프로젝트/워크스페이스를 만들어 실행시켜 봅니다.
Flutter 프로젝트/워크스페이스를 구성하는 요소들을 이해합니다.
Dart 언어를 사용하여 기초적인 Flutter App을 만들어 봅니다.

[IDX에서 Flutter 프로젝트/워크스페이스 만들기]

Project IDX 사이트로 이동한 후 Google 계정으로 로그인한 후 화면 우측 상단의 New workspace에서 Flutter를 선택합니다.

Name your workspace 필드에 hello_flutter를 입력하고 Create 버튼을 누릅니다.

IDX Flutter 프로젝트/워크스페이스가 생성되면 왼쪽에 프로젝트 탐색기가, 중앙에 소스 코드 편집기가, 오른쪽에 안드로이드 이뮬레이터와 웹 이뮬레이터가, 그리고 하단에 콘솔과 터미널 등의 도구들이 나타납니다.

프로젝트 탐색기에 andriod 폴더가 추가되어 있으면 Android 앱코드를 만들 수 있고, ios 폴더가 추가되어 있으면 iOS 앱코드를 만들 수 있으며 web 폴더가 추가되어 있으면 웹을 만들 수 있습니다. 이때 프로그래머는 lib 폴더의 코드에만 모든 앱 혹은 웹에 공통적인 코딩을 하면 됩니다.

위에서 설명한 원리를 이해하기 위하여 안드로이드 이뮬레이터와 웹 이뮬레이터에서 화면 우측 하단의 플러스(+) 버튼을 눌러 봅시다.

[Flutter App 프로그래밍/코딩이란?]

프로그램을 개발 즉 프로그래밍 혹은 코딩하는 것은 코드조각과 화면조각들을 개발하고자 하는 목적에 맞게 조립해 가는 과정입니다.
이는 마치 레고 조각을 조립하여 어떤 형상을 만들어 가는 과정과 유사합니다. Flutter App을 개발하거나 코딩하는 것도 이와 같습니다.

Flutter App은 기본적으로 레고 블록에 해당하는 위젯(Widget)이라는 객체로 구성됩니다.
위젯은 화면에 표시되는 모든 요소를 포함하여 작은 버튼부터 전체 레이아웃까지 모든 것이 위젯입니다.
위젯(Widget)은 마치 레고 블록과 같습니다.

마치 다양한 레고 조각을 조립하여 어떤 형상을 만들어 가는 과정과 같이 기본적으로 제공되는 다양한 위젯들을 조합해서 앱의 화면을 만듭니다. 때로는 원하는 위젯을 직접 만들어 사용하기도 합니다.

가장 간단한 Flutter App 코드하기

Flutter가 기본적으로 제공하는 복잡한 코드들을 모두 지웁시다.
Flutter App을 만들기 위해서는 Android 앱 디자인을 지원하는 package:flutter/material.dart 패키지나, iOS 앱 디자인을 지원하는 package:flutter/cupertino.dart 패키지를 프로그램 내부로 import하여야 합니다. 일반적으로 Android 앱 디자인을 지원하는 package:flutter/material.dart 패키지를 import하여 사용합니다.

import 'package:flutter/material.dart';

Flutter App의 모든 것은 main() 함수로 부터 시작됩니다.

import 'package:flutter/material.dart';

void main() {

}

runApp() 함수는 Flutter App을 실제로 실행시켜주는 코드입니다.

import 'package:flutter/material.dart';

void main() {
  runApp();
}

MaterialApp() Widget은 앱의 제목(title), 테마 색상(theme), 첫 홈 페이지(home) 등 앱의 전반적인 설정을 담당하는 Widget입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(
	  MaterialApp(
	    home: Placeholder(),
	  )
  );
}

위와 같은 간단한 코딩만으로 아래와 같은 Flutter App이 실행되는 것을 확인할 수 있습니다. Flutter의 Placeholder() 위젯은 앱 개발 중 UI 설계의 미완성 부분을 나타내기 위해 사용됩니다.

Material이란?

구글에서 만든 디자인 시스템 (Material Design)

디자인 시스템이란?

통일감 있는 디자인을 제공하기 위해, 자주 쓰이는 UI들을 표준화 해놓은 것 (ex. 버튼, 카드, 메뉴, 앱 바, 텍스트 입력창, 달력 등)
원래는 구글이나 안드로이드 앱에 적용됐으나, Flutter 덕분에 안드로이드 밖에서도 많이 사용하게 됨.

애플에는 휴먼 인터페이스 가이드 라인이 있음 UI에 관심 있는 분들은 꼭 읽어보기! 애플이 얼마나 디자인에 진심인지 알 수 있는 자료.

Foundations | Apple Developer Documentation

Understand how fundamental design elements help you create rich experiences.

developer.apple.com

Scaffold로 페이지의 뼈대 만들기

하나의 페이지를 만들기 위한 기초 뼈대

앱에서 페이지이란?

웹 사이트에서 페이지를 이동하는 것처럼, 앱도 각각의 화면들을 페이지라고 함.
유튜브 앱에서 각각의 탭을 눌렀을 때 이동하는 화면들이 페이지
빈화면을 나타내는 Placeholder() 위젯을 페이지를 나타내는 Scaffold() 위젯으로 교체하겠습니다. 배경색을 하얀색으로 바꾸기 위하여 Scaffold() 위젯 객체의 backgroundColor 속성을 회색(Colors.grey)으로 변경하였습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      //home: Placeholder(),
      home: Scaffold(
        backgroundColor: Colors.grey,
      ),
    ),
  );
}

그후 앱을 실행해 보면 회색 바탕의 빈화면이 나타나는 것을 확인할 수 있습니다.

페이지에는 상단바(appBar)-몸통(body)-하단바(bottomNavigationBar)가 있다

유튜브 앱에 들어가서 여러 페이지들을 들어가보세요. 페이지들마다 어떤 공통점이 있나요?

디자인마다 다를 수 있지만, 앱의 화면은 기본적으로 상단바-몸통-하단바가 있습니다.
Scaffold 위젯은 이러한 앱의 뼈대를 잡아주는 역할을 하며, 페이지는 통상적으로 Scaffold 위젯으로 구성합니다.

AppBar로 페이지의 헤더 만들기

AppBar 위젯은 앱의 상단에 위치하여 머리 역할을 하는 헤더 바입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
				appBar: AppBar(
			    title: Text('App Bar의 타이틀'),
					backgroundColor: Colors.blueGrey,
			  ),
        backgroundColor: Colors.grey,
      ),
    ),
  );
}

Text로 페이지의 몸통 만들기

Scaffold의 몸통(body)으로 Text 위젯을 출력해 보겠습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
        title: Text('App Bar의 타이틀'),
            backgroundColor: Colors.blueGrey,
      ),
backgroundColor: Colors.grey,
body: Text(
            'Scaffold의 몸통(body)',
            style: TextStyle(
                color: Colors.white,
                fontSize: 26,
            ),
          ),
      ),
    ),
  );
}

Scaffold의 몸통(body)이 화면의 상단에 배치된 것이 마음에 들지 않아 Text 위젯을 Center 위젯으로 감싸 보겠습니다. Center()로 Text 위젯을 둘러싼 후 child 속성으로 지정되도록 child: 을 Text 위젯 앞에 붙여 주면 됩니다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
        title: Text('App Bar의 타이틀'),
            backgroundColor: Colors.blueGrey,
        ),
        backgroundColor: Colors.grey,
        body: Center(
          child: Text(
            'Scaffold의 몸통(body)',
            style: TextStyle(
              color: Colors.white,
              fontSize: 26,
            ),
          ),
        ),
      ),
    ),
  );
}

[실습] IDX 개발 도구를 사용하여 자신의 첫번째 플러터 앱을 만들어 봅시다.

아래와 같은 화면을 만들어봅시다.
hello_flutter 프로젝트를 사용하지 말고 my_first_app 프로젝트를 별도로 만들어 사용하기 바랍니다.
그리고 hello_flutter 프로젝트의 코드를 복사하여 사용하지 말고 처음부터 다시 코드의 의미를 생각하며 코딩하기 바랍니다.

Dart 언어 I

[학습 목표]

Python, Java, Javascript로 배운 프로그래밍의 기본 원리와 개념과 의미를 기억해 봅니다.
이미 알고 있는 프로그래밍 지식을 확장하여 Dart 언어를 이해합니다.

[Hello Dart]

Dart 언어를 안드로이드 스튜디오, Visual Studio Code 및 IDX 등의 Flutter 개발도구에서 실행하면 Flutter 프레임워크로 개발된 프로젝트가 실행이 되어 결과가 이뮬레이터나 스마트폰에 나타나게 됩니다. 그래서 Dart 언어를 코딩하여 실행해 보려면 다른 방법을 생각해야 하는데 https://dartpad.dev 사이트로 이동한 후 쉽게 Dart 프로그램을 실행해 볼 수 있습니다.
아래 화면을 보면 왼쪽 창에 1부터 10까지 hello 숫자의 형태로 출력하는 Dart 코드가 만들어져 있어서 Run 버튼을 누르면 오른쪽 창에 결과가 나타나는 것을 확인할 수 있습니다

DartPad

dartpad.dev

동일한 코드를 IDX 개발도구의 main.dart 파일에 복사해 넣은 후 실행시켜보았더니, 아래화면과 같이 이뮬레이터에는 빈화면이 나타나고 하단의 DEBUG CONSOLE에 원하는 출력이 나타나는데 출력되는 문자열의 앞에 I/flutter ( 7893): 이 추가되는 것을 확인할 수 있습니다. 플러터 앱을 개발하다가 오류 수정 등의 목적을 위하여 print 문장을 자주 사용하게 되니 이런 차이를 기억해 둡시다.

개요 및 특징

구글이 개발하여 2011년 10월 GOTO 컨퍼런스에서 공개됨
UI(User Interface)를 개발하는데 최적화됨 - 완전한 비동기 언어이며 이벤트 기반
멀티 플랫폼에서 로깅 및 디버깅 가능

메인 함수

Dart는 프로그램 시작점인 엔트리 함수로 main() 함수를 사용합니다. void는 함수가 아무 값도 반환하지 않는다는 뜻입니다. Dart 언어의 문장은 세미콜론(;)으로 종료됩니다. 중괄호({})는 코드 블록의 시작과 끝을 나타내는데 여기서는 main() 함수의 시작과 끝을 나타냅니다.

void main() {  
		print("Hello Dart");
}

주석

주석은 코드로 실행되지 않으며 코드를 설명하기 위한 목적으로 사용됩니다. //는 한줄 주석, /* ~ */는 여러줄 주석으로 사용됩니다.

void main() {
// 한줄 주석

/* 여러줄
여러줄
여러줄
주석*/
}

변수와 상수의 구분

변경되는 변수의 현재값들은 print() 함수의 도움을 받아 출력해 볼 수 있습니다.

Dart는 const와 final 키워드를 사용하여 상수를 명시적으로 지정합니다. final은 상수의 변경 가능성을 제거하여 코드의 안정성을 높여 주며, const는 메모리 최적화까지 지원하여 성능 상의 이점까지 가지게 됩니다.

void main() {
    // 변수
    String nameVar = "변경 가능한 이름 변수";
    nameVar = "변경된 이름 변수";
    print(nameVar);

    // 상수
    const String nameConst = "변경 불가능한 상수-주로 불변 객체를 만들 때 사용";
    final String nameFinal = "변경 불가능한 상수-주로 인자를 받을 때 사용";
}

Instructor Note : Flutter 앱 프로젝트로 이동하여 const와 final이 있거나 없을 경우 경고나 오류가 나는 것을 보여 주고 해결하는 것을 보여 줄 것.

자료형(데이터 타입,Data Type)

Dart의 자료형은 Java처럼 기본형과 객체형으로 나뉘지 않고, 모든 자료형이 객체로 처리되어 일관성을 유지합니다.

Dart 언어에서 문자 타입의 자료형에 단일인용부호(’)와 이중인용부호(”)가 모두 사용될 수 있습니다.

void main() {
  String singleQuote = '단일 인용부호로 만든 문자열';
  String doubleQuote = "이중 인용부호로 만든 문자열";

  print(singleQuote);
  print(doubleQuote);
}

Dart 언어에서는 Python의 f 문자열과 유사하게 $ 부호를 사용한 포맷팅이 가능합니다. 최근에 개발되는 언어들, 예를 들어 Dart, Python, JavaScript(ES6 이후), Swift 등에서는 C 언어 스타일의 %d, %f, %s와 같은 포맷팅 기법 대신 $ 와 {}를 사용하는 문자열 보간 방식으로 전환하는 경향이 뚜렷해지고 있습니다. {}를 사용하면 변수만이 아니라 수식의 결과값도 문자열에 포함시킬 수 있습니다. 그러나 일부 언어에서는 여전히 C 스타일의 포맷팅 기법이 사용되기도 합니다.

void main() {
    String lang = "Dart";
    String framework = "Flutter";
    String formatted = "$framework 프레임워크의 $lang 언어";
    print(formatted);

    int num1 = 10;
    int num2 = 20;
    formatted = "$num1 + $num2 = ${num1+num2}";
    print(formatted);
}

예제. 문자열안에 단일인용부호(’)와 이중인용부호(”)가 아래와 같은 형태로 출력되도록 코드해 보세요.

'singleQuote'
"doubleQuote"
single'Quote
double"Quote

null은 숫자의 0과 같이 없거나 존재하지 않는 것을 의미합니다. 0의 개념이 숫자 이외의 자료형으로 확장된 형태로 이해하면 됩니다. 0으로 다른 숫자를 나눌 수 없는 것과 같이 null을 사용할 때에는 값이 있는지 없는지 확인하는 습관을 가져야 합니다.

객체

앞에서 Dart의 자료형(Data Type)이 객체(Object)이고, Flutter의 레고블럭에 해당하는 위젯(Widget)도 객체(Object)라고 설명했습니다.
하나의 객체는 객체의 상태(State)나 속성(Property)을 나타내는 멤버 변수(Variable)와 객체의 행동(Behavior)을 나타내는 멤버 함수(Function) 혹은 메소드(Method)로 구성됩니다.
객체를 만드는 것은 어려우나 만들어진 객체를 사용하는 것은 쉬운데, 먼저 앞에서 설명한 코드들 중에서 객체를 만들어 사용하는 예를 들어 객체를 만들어 사용하는 법을 설명하겠습니다.
객체는 클래스(Class)를 사용하여 객체를 만들어 사용합니다. 클래스의 이름은 변수나 속성과 달리 대문자로 시작합니다.

객체의 생성 - 속성이 없는 경우

아래의 코드에서 Placeholder는 int나 String과 같은 클래스(Class)입니다. Placeholder()과 같이 클래스 이름에 괄호를 붙이면 객체가 생성됩니다.

Placeholder()

객체의 생성 - 속성을 특정 위치에 부여하는 경우

아래의 코드를 보면 'App Bar의 타이틀' 문자열을 Text 클래스의 첫번째 속성으로 넘겨주고 있습니다.

Text('App Bar의 타이틀')

객체의 생성 - 속성을 이름으로 부여하는 경우

아래의 코드를 보면 home:과 같이 속성의 이름을 소문자로 주고 그뒤에 Placeholder() 값을 주어 MaterialApp() 객체를 생성하고 있습니다. Placeholder()와 같은 객체도 정수나 문자열 등의 다른 자료형과 같이 값으로 사용될 수 있습니다.

MaterialApp(
	home: Placeholder(),
)

객체의 생성 - 속성을 여러개 지정하는 경우

위치로 지정하는 속성을 앞에 오게 하고, 이름으로 지정하는 속성을 뒤에 배치하는데 이름으로 지정하는 속성간의 순서는 상관없습니다. 속성들은 콤마(,)로 구분합니다.

Text(
  'Scaffold의 몸통(body)',
	style: TextStyle(
    color: Colors.white,
    fontSize: 26,
  ),
),

객체의 메소드

아래의 코드를 보면 정수형 객체인 ageInt에 toString() 메소드가 존재하여 정수형 자료형을 문자열 자료형으로 변환해 주고 있습니다.

int ageInt = 42;
String ageString = ageInt.toString();

환경설정(Flutter/안드로이드 스튜디오)

[학습목표]

Flutter 프로그램 개발 환경을 구축합니다.

[JDK 사용 환경 확인]

JDK가 설치되어 있어야 합니다. 현재 가장 안정된 버전은 17 버전인 것으로 확인되고 있습니다. 그리고 JAVA_HOME 환경변수가 C:\Program Files\Java\jdk-17와 같이 설정되고 Path 환경 변수에C:\Program Files\Java\jdk-17\bin와 같은 폴더가 추가되어 있어야 합니다. 명령어 프롬프트를 열어서 java —version 명령어를 수행하여 정상적으로 설치되었는지 확인합니다.

[설치 파일 다운로드]

Flutter 프로그램을 개발하기 위해서는 **Flutter SDK(Software Development Kit)**와 **안드로이드 스튜디오 통합개발환경(IDE,Integrated Development Environment)**를 설치해야 합니다.
Flutter SDK(Software Development Kit)의 설치 URL과 설치를 위하여 클릭해야 할 위치 화면은 아래와 같습니다.

Start building Flutter Android apps on Windows

Configure your system to develop Flutter mobile apps on Windows.

docs.flutter.dev

위의 링크를 클릭한 후 아래로 스크롤해서 내려가서 Download and Install 링크를 클릭하면 아래 화면과 같이 flutter_windows_3.24.3-stable.zip과 같은 형태의 다운로드 버튼이 보입니다.

안드로이드 스튜디오 통합 개발 환경의 설치 URL과 설치를 위하여 클릭해야 할 위치 화면은 아래와 같습니다.

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자 | Android Studio | Android Developers

Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.

developer.android.com

아래와 같은 화면 중의 한가지 방법으로 확장자가 .exe인 Windows 64 비트용 설치 실행 파일을 다운로드합니다.

[Flutter SDK 설치]

flutter_windows_3.22.2-stable.zip 파일의 압축을 풀어 c:\ 폴더에 위치시킵시다. 이 위치가 아니면 안드로이드 스튜디오로 프로젝트를 만들 때 Hang되는 등 이해할 수 없는 오류가 발생하는 경우가 발생합니다.

그리고 아래 화면과 같은 방식으로 시스템 환경 변수 편집 화면으로 이동한 후

화면 하단의 환경변수 버튼을 클릭하여

path 환경 변수에 c:\flutter\bin을 추가합니다.

명령 프롬프트에서 where flutter 명령어를 수행하여 아래 화면과 같이 Flutter 명령어가 찾아져야 Flutter SDK가 정상적으로 설치된 것입니다.

[안드로이드 스튜디오 통합개발환경 설치]

android-studio-2024.1.1.11-windows.exe 파일을 실행하여 안드로이드 스튜디오 통합개발환경(IDE,Integrated Development Environment)를 설치합니다. 아래와 같은 화면이 나타나면 라이센스 동의 화면이 나올 때까지 Next 버튼, Install 버튼, Finish 버튼 및 OK 버튼만 클릭하여 기본(디폴트,Default) 설정값대로 설치하도록 합시다.

라이센스 동의 화면에서 android-sdk-license와 intel-android-extra-license 두가지 모두에 대하여 Accept 라디오 버튼을 눌러야 Finish 버튼이 나타납니다.

Finish 버튼을 누른 후 설치에 매우 긴 시간이 소요되니 인내심을 가지고 기다립니다.

아래와 같은 화면이 나타나면 드디어 설치가 완료된 것입니다.

Finish 버튼을 누른 후 아래와 같은 화면이 나타나면 화면의 좌측에서 Plugins 메뉴를 누른 후 Marketplace에서 flutter 플러그인을 찾아 설치(install)합니다.

Flutter 플러그인을 설치한 후 Restart IDE 버튼을 클릭해 안드로이드 스튜디오를 재실행해야 설치한 플러그인이 반영됩니다.

안드로이드 스튜디오가 다시 실행되어 아래와 같은 화면이 나타나면 드디어 Flutter App의 개발 환경이 구축된 것입니다.

[안드로이드 스튜디오로 첫 Flutter App 만들기]

안드로이드 스튜디오의 초기화면에서 Projects 메뉴를 선택한 후 New Flutter Project 버튼을 클릭합니다. New Project 버튼을 클릭하면 Flutter 앱이 아니라 Java나 Kotlin으로 Android 앱을 만들게 되니 꼭 New Flutter Project 버튼을 클릭하여야 합니다.

화면 좌측의 Generator 하단에서 Flutter를 선택한 후 화면 우측 상단의 Flutter SDK path 란에 설치한 Flutter SDK의 경로인 c:\flutter를 선택하여 입력합니다. 그리고 Next 버튼을 누릅니다.

Project 이름을 first_flutter로 입력하고, 나머지는 기본값으로 유지한 후에 Platforms는 Android와 iOS만 남기고 나머지는 선택을 해제하였습니다. 입력된 값들을 확인한 후 Create 버튼을 누릅니다.
프로젝트를 만드는 화면에 나오는 입력항목들은 기존에 배운 통합개발도구들과 유사하여 설명을 생략합니다만 실제 업무 환경에서는 개발할 응용프로그램의 목적에 맞는 값들로 채워 넣어야 할 것입니다.

생성된 first_flutter 프로젝트의 화면을 보니 Spring Boot 프로젝트를 gradle/groovy 빌드 환경으로 생성했을 때의 화면과 유사합니다. 좌측에 폴더 구조의 형태로 코드들이 프레임워크(Framework)로 제공되고 있고 화면의 중간에 main.dart 코드가 보입니다.

앞에서 설명한 Flutter의 개념적 구조와 비교해 봅시다. 그렇습니다. 시스템 프로그래머가 아닌 우리들 응용프로그래머가 우선적으로 알아야 하는 것은 아래의 그림에 나오는 Flutter 구조 전체가 아니라 위의 안드로이드 스튜디오에 나타나는 것들 입니다.
그럼 자동으로 만들어진 앱을 실행해 보겠습니다.
Flutter 앱은 기본적으로 스마트폰에서 실행되기 위해 만들어지기 때문에 Flutter 앱을 실행하기 위해서는 별도의 장치(Device)가 필요합니다. 다행히 실물 장치를 대신하도록 소프트웨어적으로 만들어 놓은 가상의 장치(Virtual Device)만들어져 있어서 실제 장비를 안드로이드 스튜디오와 연결하지 않고도 앱을 실행해 볼 수 있습니다. 이와 같은 가상의 장치를 이뮬레이터(Emulator)라고 부릅니다.
안드로이드 스튜디오 화면의 우측에서 장치관리자(Device Manager) 아이콘을 클릭한 후

기본적으로 사용할 환경이 구성되어 있는 이뮬레이터의 우측에 있는 시작(Start) 버튼을 클릭합니다.

그러면 폰이 부팀되는 시간만큼을 기다리면 아래와 같이 우측 하단에 가상의 폰이 하나 실행되는 화면이 나타납니다. 안드로이드 스튜디오에서 기본적으로 제공되는 이뮬레이터가 버전마다 조금씩 다르니 아래와 다른 화면이 나타나도 상관없습니다.

Pixel Fold 가상 장치가 실행되어 안드로이드 스튜디오의 우측 화면에 나타나고, 화면의 상단에 시작한 가상 장치의 이름이 나타나면

화면의 상단에서 실행(Run) 버튼을 누릅니다.

그러면 앱이 실행되어 가상 장치에 나타나는 것을 확인할 수 있습니다. 실행되는 앱 화면에서 우측 하단에 있는 플러스(+) 버튼을 눌러 화면의 중앙에 있는 숫자가 증가하는 것도 확인해 봅시다.
그리고 앱이 실행될 때 화면의 하단에 나타나는 메세지에도 관심을 가집시다. 프로그램이 실행되는 상태를 파악하는데 크게 도움이 되며 혹시 오류가 발생할 때에도 로그에 관심을 기울이면 오류의 원인을 파악하는데에도 크게 도움이 됩니다.

생성된 프로젝트는 c:\Users\user\StudioProjects 폴더 안에 프로젝트의 이름과 동일한 폴더에 위치합니다.

[가상장치(이뮬레이터) 관리]

안드로이드 스튜디오에서는 개발한 실제 기기와 유사한 가상 장치를 여러개 만들어 테스트할 수 있습니다.
안드로이드 스튜디오의 우측에서 Device Manager 화면으로 이동한 후 플러스(+, Add a new device)아이콘을 클릭한 후 Create Virtual Device 메뉴를 선택합니다.

아래 화면에서 Pixel 8 Pro 장치를 선택한 후 Next 버튼을 눌러 기본(Default,디폴트) 설정값을 유지하면서 설치를 완료합니다.

그러면 선택된 가상 장치가 Device Manager 화면에 추가되는 것을 확인할 수 있습니다.

Medium Phone API 35가 일부 PC에서 이뮬레이터가 실행되지 않고 Hang되는 현상이 발생합니다. 본인의 PC에서도 이런 현상이 발생한다면 Medium Phone API 35 이뮬레이터를 지웁시다. 생성된 이뮬레이터를 삭제하려면 … 버튼을 누른 후 Delete 메뉴를 선택합니다.

예제. Pixel 7 Pro 가상 장치를 추가한 후 First_flutter 앱을 2개 이상의 가상 장치를 바꾸어 가며 실행해 보세요. 동시에 2개의 이뮬레이터를 동시에 기동하는 것이 어려우니 다른 이뮬레이터를 기동할 때에는 기존에 실행 중이던 이뮬레이터는 중단(ㅁ) 버튼을 눌러 중단시키기 바랍니다.

[Flutter 개발 환경 설치 마무리]

명령 프롬프트에서 flutter doctor 명령어를 실행합니다. 3군데에 X 표시가 나오며 오류가 발생하고 있습니다.

안드로이드 스튜디오에서 File > Tools > SDK Manager 메뉴를 클릭합니다.

SDK Tools 탭을 선택한 후 Android SDK Command-line Tools (latest)를 선택하여 설치합니다.

flutter doctor --android-licenses 명령어를 실행한 후 y를 반복하여 입력하여 라이센스 조건을 수용합시다.

다시 flutter doctor 명령어를 실행해 보면 Visual Studio를 제외한 모든 문제들이 사라진 것을 확인할 수 있습니다. Visual Studio를 활용한 개발은 하지 않을 것이니 하나의 오류가 남아 있는 것은 무시하여도 됩니다.

Instructor Note : 이뮬레이터 실행시 CPU가 폭주하며 Hang되는 현상이 자주 발생함. 이런 현상을 예방하기 위하여 Path에서 Github를 제거할 것과 팀즈와 안드로이드 스튜디오 외에 카카오톡 등 수업에 필요하지 않은 프로그램들을 종료하라고 안내할 것. 특히 팀즈로 화면 공유하면서 이뮬레이터를 동시에 기동할 때 Hang이 심하게 발생함.
Instructor Note : 아래 상황을 모든 수강생에 대하여 일일히 점검할 것
- Flutter가 c:\flutter에 설치되었는지 where flutter로 확인
- path 환경변수에서 Github가 제거되었는지 확인
- Flutter Doctor에서 X 표시가 Visual Studio를 제외하고 모두 해결되었는지 확인
- Github의 사용이 불가피하고 폰을 연결하여 테스트할 수 있는 환경이라면 Visual Studio Code에 폰을 연결하여 테스트하는 것도 괜찮은 선택임. 대신 프로젝트를 만들 때 flutter create project_name 명령어를 사용하여야 함.
- 맥북을 사용하여 iOS 이뮬레이터를 사용하는 것도 괜찮은 선택임

[실습을 위한 준비물]

가족을 대표하고 상징할만한 이미지 파일들
가족 구성원들의 사진들
안드로이드폰과 PC를 연결하기 위한 데이터 케이블 (충전 기능만 있는 케이블이 있으니 주의)

참고 문헌

[논문]

없음

[보고서]

없음

[URL]

없음

문의사항

[기상학/프로그래밍 언어]

sangho.lee.1990@gmail.com

[해양학/천문학/빅데이터]

saimang0804@gmail.com

저작자표시 비영리 변경금지

'프로그래밍 언어 > Flutter' 카테고리의 다른 글

[Flutter] 쉽게 배우는 플러터 앱 개발 실무 02강 (0)	2024.12.21

정보

Flutter란?

[앱 개발 방식]

[Flutter의 구조]

[Dart와 Flutter]

Flutter 개발 도구

Flutter App 만들기 기초

[학습목표]

[IDX에서 Flutter 프로젝트/워크스페이스 만들기]

[Flutter App 프로그래밍/코딩이란?]

가장 간단한 Flutter App 코드하기

Material이란?

Scaffold로 페이지의 뼈대 만들기

앱에서 페이지이란?

페이지에는 상단바(appBar)-몸통(body)-하단바(bottomNavigationBar)가 있다

AppBar로 페이지의 헤더 만들기

Text로 페이지의 몸통 만들기

[실습] IDX 개발 도구를 사용하여 자신의 첫번째 플러터 앱을 만들어 봅시다.

Dart 언어 I

[학습 목표]

[Hello Dart]

개요 및 특징

메인 함수

주석

변수와 상수의 구분

자료형(데이터 타입,Data Type)

객체

객체의 생성 - 속성이 없는 경우

객체의 생성 - 속성을 특정 위치에 부여하는 경우

객체의 생성 - 속성을 이름으로 부여하는 경우

객체의 생성 - 속성을 여러개 지정하는 경우

객체의 메소드

환경설정(Flutter/안드로이드 스튜디오)

[학습목표]

[JDK 사용 환경 확인]

[설치 파일 다운로드]

[Flutter SDK 설치]

[안드로이드 스튜디오 통합개발환경 설치]

[안드로이드 스튜디오로 첫 Flutter App 만들기]

[가상장치(이뮬레이터) 관리]

[Flutter 개발 환경 설치 마무리]

[실습을 위한 준비물]

참고 문헌

[논문]

[보고서]

[URL]

문의사항

'프로그래밍 언어 > Flutter' 카테고리의 다른 글

전체 카테고리

블로그 인기글

최근 글

최근댓글

전체 방문자

티스토리툴바