Flutter

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

MSA9_Flutter

ALOHA-CLASS

Flutter_TJE

ALOHA-CLASS

Flutter 소개

Flutter 소개 @2025-01-21 #flutter #dart #android #ios 🐮 woopy https://wwwaloha.oopy.io/79f675df-bdf6-4fd4-b7a3-2338ade00133 🎞 PlayList 코딩, 프로그래밍, 웹디자인, 웹개발, IT 자격증 강의 🌴ALOHA CLASS👩‍🏫 🎞 TIMELINE 00:00 Flutter 00:20 🚀Start 20:00 🚩End~! 🚀═════2️⃣0️⃣2️⃣4️⃣ LIST═════💻 https://youtube.com/playlist?list=PL4C2AmBC9jOaQx101tfsOzzxFX6uyYmpF&si=GTEc5dkZY7ymu69N https://youtube.com/playlist?list=PL4C2AmBC9jOZVROMCbWCnWQUzSToFz5k7&si=yW8sTU9grN3GQR8k https://youtube.com/playlist?list=PL4C2AmBC9jOa1EzYrjwdcfsRkiC9_PrTg&si=j93pzzOfe0xvMIPH https://youtube.com/playlist?list=PL4C2AmBC9jOZQeI95ugXg-jvMshkFREkm&si=7moJ_3StWnDocUvz https://youtube.com/playlist?list=PL4C2AmBC9jObM7xy-ET5O1NO_3DpWeO2F&si=3ymToRsbkPlI28F8 https://youtube.com/playlist?list=PL4C2AmBC9jOZSDU5D2kNWNaMv6IW3U4ll&si=gET1bGbANPta6siE 🌴════🌴 ║ 알클💚║ 👩‍💻════🌍

https://www.youtube.com/watch?v=moz5RU7ZXOY&list=PL4C2AmBC9jOY74XiuJzxe-XkvWDb91QZv

Flutter

Flutter 핵 기초

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

Flutter 소개

•

플러터란?

•

주요 특징

•

특장점

•

플러터 공식 사이트

플러터란?

Flutter 소개

youtu.be

플러터 프로젝트 구성 파일

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

android

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

•

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

프로젝트 구성 파일

Flutter 프로젝트 생성

•

VS Code

•

Android Studio

VS Code

명령 팔레트 : ctrl + shift + P

Flutter: New Project

Flutter 프로젝트 생성

youtu.be

Dart

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

Dart 온라인 에디터

DartPad

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

Dart

youtu.be

pub

Dart 언어의 패키지 매니저

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

pub.dev

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

pub

youtu.be

기초 문법

•

변수

•

타입

•

Null Safety

•

상수

•

연산자

•

제어문

변수

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

기초 문법

youtu.be

함수

특징

•

코드의 재사용성 향상

•

프로그램의 구조화 및 모듈화

•

유지보수의 용이성

•

코드의 가독성 향상

함수

•

함수 정의

•

익명 함수

•

람다 함수

함수

youtu.be

객체지향

클래스

객체

생성자

상속

추상 클래스

믹스인

enum

static

객체지향

youtu.be

컬렉션

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

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

List

Set

Map

컬렉션

youtu.be

비동기 프로그래밍

•

Future

•

async, await

•

Stream

Future

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

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

비동기 프로그래밍

youtu.be

Widget

Widget & State

•

Widget

•

State

•

Widget Type

•

Widget LifeCycle

Widget(위젯)

Widget & State

youtu.be

기본 위젯

•

Text

•

Image

•

Icon

•

SafeArea

기본 위젯

youtu.be

레이아웃 위젯

•

Container

•

Row

•

Column

•

Expanded

•

Stack

•

Center

•

Align

레이아웃 위젯

youtu.be

입력 위젯

•

TextField

•

Checbox

•

Radio

•

Switch

•

Button

입력 위젯

youtu.be

네비게이션 위젯

•

Navigator

•

Routes

•

BottomNavigationBar

•

파라미터 전달과 화면 이동

네비게이션 위젯

youtu.be

Button

•

 Flutter 버튼 위젯 종류

•

 각 버튼별 코드 예제 

•

 커스텀 버튼 정의하기

Flutter 버튼 위젯 종류

각 버튼별 코드 예제

1. ElevatedButton (입체 버튼)

2. TextButton (텍스트 버튼)

Button

BottomNavigationBar

•

BottomNavigationBar 예시 코드

•

 공통 위젯으로 정의하기

BottomNavigationBar 예시 코드

•

main.dart

•

screens

BottomNavigationBar

라이브러리

SharedPreferences

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

•

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

•

iOS : plist 파일로 저장

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

SharedPreferences

path provider

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

Dart packagespath_provider | Flutter package

path_provider | Flutter package

Flutter plugin for getting commonly used locations on host platform file systems, such as the temp and app data directories.

https://pub.dev/packages/path_provider

주요 저장 위치

path provider

SQLite

서버가 필요하지 않고, 단일 파일(.db)로 모든 데이터를 관리할 수 있어 모바일, 데스크톱, 임베디드 시스템 등에서 널리 사용됩니다.

•

SQLite 특징

•

SQLite가 사용되는 곳

•

SQLite 기본 명령어

•

SQLite와 다른 데이터베이스 비교

•

SQLite의 장단점

•

SQLite를 사용해야 하는 경우

•

SQLite 데이터 타입

•

예시 코드

SQLite

convert

JSON 데이터 형식 등 다양한 데이터 형식을 사용할 수 있는 데이터로 변환하는 패키지

convert | Dart package

Utilities for converting between data representations. Provides a number of Sink, Codec, Decoder, and Encoder types.

https://pub.dev/packages/convert

install

import

convert

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  요청 처리

•

인터셉터

•

쿠키 관리

•

파일 업로드 및 다운로드

•

요청 취소 및 타임아웃 설정

dio

flutter_secure_storage

플러터 기능

게시판 앱

•

프로젝트 구조

•

코드

프로젝트 구조

•

클라이언트

•

서버

클라이언트

Flutter - board_app

게시판 앱

로그인 앱

프로젝트 개요

•

Frontend: Flutter를 사용하여 모바일 앱 UI를 개발합니다.

•

Backend: Spring Boot를 이용하여 회원가입, 로그인, JWT 인증 등 서버 기능을 구축합니다.

•

Database: MySQL 또는 PostgreSQL을 사용하여 사용자 정보를 안전하게 저장합니다.

주요 기능

회원가입 – 사용자 정보를 입력받아 계정을 생성

로그인 – ID/PW 인증 및 JWT(토큰) 방식 로그인

자동 로그인 – Secure Storage를 활용한 로그인 유지

로그아웃 – 토큰 삭제 및 인증 해제

로그인 앱

Flutter x SpringSecurity x JWT

Flutter

pubspec.yaml

models

•

user.dart

Flutter x SpringSecurity x JWT

iamport_flutter

iamport

결제위젯 Flutter SDK(Version 1) | 토스페이먼츠 개발자센터

tosspayments-sample-v1

tosspayments

결제 모듈 연동

알림

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

GetX

: Flutter 상태관리, 라우팅, 의존성 주입 라이브러리

GetX의 주요 특징

간단한 상태관리 → obs(Observable) 변수를 사용하여 상태 자동 업데이트

빠른 성능 → 최소한의 리소스를 사용하여 최적화됨

라우팅 관리 → Get.to(), Get.off()로 간편하게 화면 이동

의존성 주입(DI) → Get.put(), Get.find()로 객체를 쉽게 주입

별도의 context 불필요 → BuildContext 없이 UI 업데이트 가능

다양한 플랫폼 지원 → 모바일, 웹, 데스크톱까지 지원

GetX 설치

GetX

Bloc (Business Logic Component)

이벤트 기반 상태 관리 방식을 사용하며, 대규모 프로젝트에서 구조적이고 유지보수가 쉬운 코드를 작성하는 데 적합합니다.

Bloc의 핵심 개념

Cubit vs Bloc

•

Cubit: 간단한 상태 관리 (단일 상태 변경)

•

Bloc: 이벤트 기반 상태 관리 (여러 이벤트 처리 가능)

Bloc의 주요 기능과 특징

1. 이벤트 기반 상태 관리

•

Bloc을 사용하면 **사용자의 입력(이벤트)**을 받아 새로운 상태로 변경

•

이벤트와 상태가 분리되어 테스트가 용이

Bloc

Provider

•

ChangeNotifier를 활용한 상태 관리가 가능하며, 의존성 주입(DI) 기능도 지원

•

비교적 간단한 앱에서 사용하기 좋으며, Flutter 공식적으로 권장하는 방식

Provider의 핵심 개념

주요 개념

Provider의 주요 기능과 특징

1. 간단한 상태 관리

•

ChangeNotifier를 사용하여 상태를 변경하고 UI에 반영

•

notifyListeners()를 호출하면 자동으로 UI 업데이트

2. 의존성 주입(DI) 지원

Provider

Riverpod

: Flutter 상태관리 라이브러리

Riverpod의 주요 특징

전역 상태 관리 가능

안전한 상태 관리

의존성 주입(DI) 지원

ref.watch, ref.read, ref.listen 활용 가능

Riverpod 설치

카카오맵

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 이상의 버전으로 업그레이드 한다.

shared_data_app 버전 호환 관련

Flutter

Flutter 소개

플러터란?

플러터 프로젝트 구성 파일

android

Flutter 프로젝트 생성

VS Code

Dart

Dart SDK 다운로드

pub

목차

pub.dev

기초 문법

변수

함수

특징

함수

객체지향

컬렉션

비동기 프로그래밍

Future

Widget & State

Widget(위젯)

기본 위젯

레이아웃 위젯

입력 위젯

네비게이션 위젯

Button

Flutter 버튼 위젯 종류

각 버튼별 코드 예제

1. ElevatedButton (입체 버튼)

2. TextButton (텍스트 버튼)

BottomNavigationBar

BottomNavigationBar 예시 코드

SharedPreferences

path provider

주요 저장 위치

SQLite

convert

install

import

http

install

import

dio

주요기능

게시판 앱

프로젝트 구조

클라이언트

Flutter - board_app

로그인 앱

프로젝트 개요

Flutter x SpringSecurity x JWT

Flutter

pubspec.yaml

models

MaterialApp

기본 설정

Scalffold

Scalffold 구성요소

Bloc의 핵심 개념

Bloc의 주요 기능과 특징

1. 이벤트 기반 상태 관리

Provider의 핵심 개념

주요 개념

Provider의 주요 기능과 특징

1. 간단한 상태 관리

2. 의존성 주입(DI) 지원

Riverpod의 주요 특징

Riverpod 설치

카카오맵

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

원인

해결