Flutter

Google에서 개발한 오픈 소스 UI 소프트웨어 개발 도구 WEB Android App iOS App 응용 프로그램

Flutter 핵 기초

https://www.youtube.com/playlist?list=PL4C2AmBC9jOat0l3iwh1mTYbN7iiVY4Ha

개발 환경 - Andriod

안드로이드 스튜디오 설치

Android Studio 란? : 안드로이드 애플리케이션을 개발하기 위한 공식 통합 개발 환경(IDE)입니다.

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

Android 스튜디오는 Android 앱에 최적화된 통합 개발 환경(IDE)을 앱 빌더에게 제공합니다. 지금 Android 스튜디오를 다운로드하세요.

https://developer.android.com/studio?hl=ko

특징

•

Google에서 제공하며, 안드로이드 앱 및 게임을 디자인, 빌드, 테스트, 배포하기 위한 다양한 기능과 도구를 제공합니다.

•

IntelliJ IDEA 기반으로 만들어져 있어, 인텔리제이와 UI 가 거의 동일합니다

JDK 사전 설치

•

안드로이드 스튜디오는 JDK를 필요로 합니다.

안드로이드 스튜디오 설치

Flutter SDK

Google에서 개발한 오픈 소스 프레임워크로, 모바일 앱뿐만 아니라 웹 및 데스크톱 앱까지 다양한 플랫폼에서 동작하는 크로스 플랫폼 앱을 개발하는 도구입니다.

Choose your development platform to get started

Install Flutter and get started. Downloads available for Windows, macOS, Linux, and ChromeOS operating systems.

https://docs.flutter.dev/get-started/install

SDK (Software Development Kit) : 소프트웨어 개발 키트. 특정한 소프트웨어를 개발하기 위해 필요한 도구, 라이브러리, 문서, 샘플 코드 등이 포함된 패키지입니다.

Flutter SDK 특징

1.

Dart 언어:

2.

위젯:

Flutter SDK 설치

SDK Manager

Android 개발에 필요한 소프트웨어 개발 키트(Software Development Kit) 및 관련 도구, 플랫폼 및 시스템 이미지를 설치하고 관리하는 도구

주요 기능

SDK 및 도구 설치
: Android SDK Manager를 통해 Android 버전에 맞는 SDK 플랫폼, 빌드 도구, 플랫폼 도구, 시스템 이미지 등을 다운로드하고 설치할 수 있습니다.

라이브러리 및 추가 컴포넌트 관리
: 필요한 라이브러리, 추가 도구, 시스템 이미지 등을 SDK Manager를 통해 쉽게 관리할 수 있습니다.

SDK 버전 및 플랫폼 업데이트
: 새로운 Android 버전이나 플랫폼 도구가 출시되면 SDK Manager를 통해 업데이트를 받고 새로운 기능 및 개선 사항을 활용할 수 있습니다.

가상 디바이스 생성 및 관리
: SDK Manager를 사용하여 가상 디바이스에 사용할 수 있는 다양한 시스템 이미지를 설치하고 관리할 수 있습니다.

라이선스 관리
: Android SDK Manager를 통해 필요한 라이선스를 수락하고 관리할 수 있습니다. 명령행 도구로도 사용 가능하며, 명령행에서는 sdkmanager를 사용합니다.

안드로이드 스튜디오와의 통합
: Android SDK Manager는 주로 안드로이드 스튜디오(Android Studio)와 함께 사용되며, 스튜디오에서도 SDK 관리 기능이 일부 내장되어 있습니다.

Android Flutter 플러그인 설치

Flutter 프로젝트 생성

Andriod Virtual Device

안드로이드 앱 개발 및 테스트를 위해 사용되는 도구

AVD를 설치하는 방법은 다음과 같습니다

우측 상단의 스마트폰 아이콘을 클릭합니다.

"Select Hardware"를 선택합니다.

"Install"을 클릭하여 원하는 가상 스마트폰을 설치합니다.

설치가 완료되면, AVD 아이콘을 클릭하여 AVD를 실행합니다.

실행된 가상 스마트폰에서 원하는 앱을 실행하면 됩니다.

AVD를 사용하여 앱을 개발하고 테스트할 수 있습니다. 이를 통해 안드로이드 앱의 동작을 확인하고 문제를 해결할 수 있습니다.

AVD 가상 스마트폰 설치

안드로이드 스튜디오 삭제

C:\Users\사용자\.andriod 삭제

C:\Users\사용자\AppData\Local\Android 삭제

C:\Users\사용자\StudioProjects 삭제

프로그램 추가/제거 > andriod studio 삭제

C:\Users\사용자\.andriod 삭제

안드로이드 스튜디오 삭제

AVD 갤럭시 폰 추가하기

Using a Galaxy Emulator Skin | Samsung Developer

The world runs on you.

https://developer.samsung.com/galaxy-emulator-skin/guide.html

AVD 갤럭시 폰 추가하기

개발 환경 - VS CODE

VS CODE 설치

code.visualstudio.com

https://code.visualstudio.com/download

VS CODE 실행 화면

VS CODE 설치

Flutter on VS CODE

VS CODE

Extension (확장)

Flutter 검색

Inatall [설치]

marketplace.visualstudio.com

https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

주요 명령어

Flutter on VS CODE

Flutter 프로젝트 생성 on VS CODE

명령 팔레트 (ctrl + shift + P)

New Flutter Project

Flutter 프로젝트 생성 on VS CODE

Dart 자동 정렬 해제하기 - Enable Sdk Formatter

설정

Enable Sdk Formatter

 체크 해제

Dart(Flutter) 자동 정렬 해제하기 - Enable Sdk Formatter

프로젝트 구조

플러터 프로젝트 구성 파일

flutter_app ├── android ├── ios ├── build ├── lib │ └── main.dart ├── test ├── pub.yaml ├── pubspec.lock └── README.md

android

플러터를 컴파일한 안드로이드 네이티브 코드가 들어 있는 디렉터리

Android 애플리케이션을 빌드하는 데 필요한 Android 프로젝트 파일이 들어 있는 디렉터리입니다.

프로젝트 구성 파일

pub

Dart 언어의 패키지 매니저

Dart 프로젝트에서 종속성을 관리하고 패키지를 가져오는 데 사용됩니다. Flutter 프로젝트에서도 pub을 사용하여 패키지를 관리합니다.

목차

pub.dev

pub 명령어

pub.dev

Dart 프로그래밍 언어와 Flutter를 위한 패키지 및 플러그인의 저장소

Dart packagesThe official repository for Dart and Flutter packages.

Dart

프론트엔드(UI) 개발에 중점을 둔 객체지향 프로그램이 언어

Dart 온라인 에디터

An online Dart editor with support for console, web, and Flutter apps.

https://dartpad.dev/

Dart SDK 다운로드

Dart SDK 는 Flutter SDK에 포함되어 있습니다.

Get the Dart SDK

Get the libraries and command-line tools that you need to develop Dart web, command-line, and server apps.

https://dart.dev/get-dart#install

Flutter SDK 설치

Dart

기초 문법

변수

타입

Null Safety

상수

연산자

제어문

변수

데이터(값)를 저장하는 메모리 공간

Dart에서는 변수명을 카멜 케이스(CamelCase)로 작성하는 것이 관례입니다.

함수

함수 정의

예시 코드

익명 함수

익명 함수

객체지향

클래스

객체

생성자

상속

추상 클래스

믹스인

enum

static

컬렉션

컬렉션은 여러 요소를 담을 수 있는 자료 구조

Dart에서는 주로 세 가지 컬렉션을 사용합니다: List, Set, 그리고 Map.

List

Set

Map

List (리스트)

비동기 프로그래밍

Future

async, await

Stream

Future

종료되지 않은 비동기 요청의 결과를 가리키는 클래스

요청 후, 결과를 나중에 받기 위해 사용

비동기 프로그래밍

Widget(위젯)

화면에 표시되는 모든 UI 요소

플러터는 위젯을 사용하여 모바일 앱, 웹 앱, 데스크톱 앱 등을 개발할 수 있는 다목적 UI 프레임워크입니다. 위젯은 UI를 빌드하고 레이아웃을 정의하며, 사용자 인터페이스의 각 부분을 표현합니다.

기본 위젯

Text

Image

Icon

SafeArea

레이아웃 위젯

Container

Row

Column

Expanded

Stack

Center

Align

SizedBox

Padding

ListView

GridView

레이아웃 위젯

입력 위젯

TextField

Checbox

Radio

Switch

Button

TextField

사용자로부터 텍스트를 입력받을 수 있는 위젯

네비게이션 위젯

Navigator

Routes

BottomNavigationBar

네비게이션 위젯

플러터 기능

게시판 앱

프로젝트 구조

코드

프로젝트 구조

클라이언트

서버

클라이언트

Flutter - board_app

Flutter x SpringSecurity x JWT

Flutter

pubspec.yaml

models

user.dart

Flutter x SpringSecurity x JWT

iamport_flutter

결제 모듈 연동

MaterialApp

Material Design을 기반으로 설계된, 플러터에서 제공하는 최상위 위젯

앱의 기본 설정과 기능을 제공하며, 앱의 전체적인 디자인을 관리합니다.

기본 설정

제목: 앱의 제목을 설정합니다.

테마: 앱의 전체적인 디자인을 관리합니다.

페이지 이동 경로: 앱의 페이지 이동 경로를 설정합니다.

디버그 모드: 디버그 모드를 활성화합니다.

Material Design : 구글에서 제공하는 디자인 가이드라인으로, 앱의 사용자 경험을 향상시키기 위한 일련의 지침을 제공합니다.

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

https://m3.material.io/

MaterialApp

Scalffold

기본적인 앱의 화면 구성 요소 담는 컨테이너 위젯

Scalffold 구성요소

AppBar

Body

FloatingActionsButton

Drawer

BottomNavitaionBar

BottomSheet

라이브러리

SharedPreferences

SharedPreferences는 Flutter에서 사용되는 로컬 데이터 저장 클래스로, 앱의 영구적인 상태를 저장하고 검색하는 데 사용됩니다. 주로 앱 설정, 사용자 프로필 정보, 토큰 등을 저장하는 데 사용됩니다.

Android  : XML 파일 형식으로 데이터를 저장

iOS : plist 파일로 저장

범위(Scope): 앱 내에서 공유되는 키-값 쌍 형태의 데이터를 저장합니다.

SharedPreferences

path provider

플러터 앱에서 파일 저장 위치를 처리할 수 있게 지원해주는 라이브러리

주요 저장 위치

주요 메소드

http

플러터에서 http 요청 (GET, POST, PUT, DELETE) 등의 요청을 해주는 패키지

http | Dart package

A composable, multi-platform, Future-based API for HTTP requests.

https://pub.dev/packages/http

install

import

http

dio

HTTP 요청 처리 및 인터셉터를 지원하는 Dart 언어 기반 라이브러리

Flutter에서 Dio는 강력하고 유연한 HTTP 네트워킹 라이브러리입니다. Dio를 사용하면 HTTP 요청을 쉽게 만들고 수정할 수 있습니다. 이 라이브러리는 GET, POST, PUT, DELETE 등의 모든 HTTP 메소드를 지원하며, 쿠키 관리, 파일 업로드 및 다운로드, 요청 취소, 요청 타임아웃 등의 고급 기능도 제공합니다.

주요기능

HTTP  요청 처리

인터셉터

쿠키 관리

파일 업로드 및 다운로드

요청 취소 및 타임아웃 설정

flutter_secure_storage

카카오맵

Kakao 지도 API

Kakao 지도 API를 이용해보세요. 다양한 샘플과 상세한 매뉴얼로 개발자분들의 시간을 아껴드리겠습니다!

https://apis.map.kakao.com/android/guide/

카카오맵

pub get failed (1; Because shared_data_app requires SDK version >=3.2.3 <4.0.0, version solving failed.)

The current Dart SDK version is 2.18.2.

원인

shared_data_app 라이브러리 버전이, SDK version >=3.2.3 <4.0.0 버전을 요구하고 있는데, 현재 Dart 버전은 2.18.2. 이라서 요구사항의 버전을 충족하지 못한다.

해결

Dart SDK 3.2.3 이상의 버전으로 업그레이드 한다.

pub get failed (1; Because shared_data_app requires SDK version >=3.2.3 <4.0.0, version solving failed.)

로그인 화면

회원가입 화면

프로필 화면

리스트 화면