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 개발 환경

빠른 설치

안드로이드 스튜디오 설치

cmdline tools 설치

가상 디바이스 생성

Flutter SDK 설치

Flutter 설치

Android Studio

VSCODE

플러터 삭제

Flutter 개발환경 설치 경로: C:\SETUP

삭제 대상 목록

항목	경로	설명
Flutter SDK	C:\SETUP\flutter\	Flutter 프레임워크 본체
Flutter 설치파일	C:\SETUP\flutter_windows_x.xx.x-stable.zip	Flutter 3.35.2 압축 파일
Android Studio 설치파일	C:\SETUP\android-studio-xxxx.x.x.xx-windows.exe	Android Studio 인스톨러

Flutter 삭제

Flutter 시작

Flutter 소개

플러터에 대하여 소개하고 플러터의 핵심적인 내용에 대하여 알아봅니다.

•

플러터란?

•

주요 특징

•

특장점

Flutter 소개

youtu.be

플러터 프로젝트 구성 파일

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

프로젝트 구성 파일

Flutter 프로젝트 생성

•

VS Code

•

Android Studio

Flutter 프로젝트 생성

youtu.be

Dart

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

Dart 온라인 에디터

Dart

youtu.be

pub

Dart 언어의 패키지 매니저

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

기초 문법

•

변수

•

타입

•

Null Safety

•

상수

기초 문법

youtu.be

함수

입력, 연산, 반환 구조로 특정 작업을 수행하는 코드의 모음

특징

•

코드의 재사용성 향상

•

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

함수

youtu.be

객체지향

클래스

객체

생성자

객체지향

youtu.be

컬렉션

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

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

List

컬렉션

youtu.be

비동기 프로그래밍

•

Future

•

async, await

•

Stream

비동기 프로그래밍

youtu.be

Widget

Widget & State

플러터의 가장 기본 요소인 Widget 과 State 를 알아봅니다. 플러터 앱을 개발하기 위해서는 이 두 가지 개념을 명확히 이해하는 것이 중요합니다.

•

Widget

•

State

•

Widget Type

◦

StatelessWidget

◦

StatefulWidget

Widget & State

youtu.be

기본 위젯

youtu.be

레이아웃 위젯

youtu.be

입력 위젯

•

TextField

•

Checbox

입력 위젯

youtu.be

네비게이션 위젯

youtu.be

MaterialApp

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

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

기본 설정

•

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

•

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

MaterialApp

Scalffold

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

Scalffold 구성요소

•

AppBar

•

Body

Scaffold

BottomNavigationBar

•

BottomNavigationBar 예시 코드

•

 공통 위젯으로 정의하기

BottomNavigationBar

Button

Flutter에서 사용 가능한 버튼 위젯을 정리해봤어요!

•

 Flutter 버튼 위젯 종류

•

 각 버튼별 코드 예제 

◦

 1. ElevatedButton (입체 버튼)

◦

 2. TextButton (텍스트 버튼)

◦

 3. OutlinedButton (외곽선 버튼)

◦

 4. IconButton (아이콘 버튼)

◦

 5. FloatingActionButton (FAB)

◦

 6. PopupMenuButton (팝업 메뉴 버튼)

◦

 7. DropdownButton (드롭다운 버튼)

◦

 8. InkWell (커스텀 터치 버튼)

◦

 9. GestureDetector (모든 터치 이벤트 감지)

•

 커스텀 버튼 정의하기

Button

Dismissible

라이브러리

SharedPreferences

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

•

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

•

iOS : plist 파일로 저장

SharedPreferences

path provider

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

Dart packagespath_provider | Flutter package

path provider

SQLite

파일 기반의 내장형(Embedded) 데이터베이스

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

•

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

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

http

dio

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

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

dio

flutter_secure_storage

Dart packagestable_calendar | Flutter package

table_calendar | Flutter package

Highly customizable, feature-packed calendar widget for Flutter.

https://pub.dev/packages/table_calendar

table_calendar

calendar_date_picker2 라이브러리

Dart packagescalendar_date_picker2 | Flutter package

calendar_date_picker2 | Flutter package

A lightweight and customizable calendar picker based on Flutter CalendarDatePicker, with support for single date picker, range picker and multi picker.

https://pub.dev/packages/calendar_date_picker2

calendar_date_picker2

flutter_multi_select_items

share_plus

Dart packagesshare_plus | Flutter package

share_plus | Flutter package

Flutter plugin for sharing content via the platform share UI, using the ACTION_SEND intent on Android and UIActivityViewController on iOS.

https://pub.dev/packages/share_plus

share_plus

플러터 기능

Flutter 다이어리 앱 만들기

Flutter로 파일 기반 일기장 앱을 처음부터 만드는 과정을 단계별로 개발해보아요.

다이어리 앱

게시판 앱

•

프로젝트 구조

◦

클라이언트

◦

서버

•

코드

◦

board.dart

◦

main.dart

◦

main_screen.dart

◦

list_screen.dart

◦

read_screen.dart

◦

insert_screen.dart

◦

update_screen.dart

게시판 앱

시크릿 갤러리 앱

Flutter로 SQLite 기반 비밀 앨범 갤러리 앱을 만들어보아요.

로그인 앱

이번 프로젝트에서는 Flutter(플러터)와 Spring Boot(스프링 부트)를 활용하여 로그인 기능이 포함된 앱을 만들어볼 것입니다.

프로젝트 개요

•

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

•

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

로그인 앱

Flutter x SpringSecurity x JWT

Flutter

pubspec.yaml

Flutter x SpringSecurity x JWT

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

tosspayments-sample-v1

tosspayments

결제 모듈 연동

상태 관리

Provider

Provider는 Flutter에서 기본적으로 제공하는 상태 관리 라이브러리입니다.

•

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

•

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

Provider의 핵심 개념

주요 개념

개념	설명
ChangeNotifier	상태 변화를 알리는 클래스
ChangeNotifierProvider	ChangeNotifier를 UI에 연결
Consumer	상태 변경을 감지하여 UI 업데이트
Provider.of()	Provider에서 직접 상태 가져오기
context.watch()	상태 변화를 감지하여 빌드
context.read()	상태 변화를 감지하지 않고 읽기

Provider의 주요 기능과 특징

1. 간단한 상태 관리

•

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

•

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

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

Provider

Riverpod

: Flutter 상태관리 라이브러리

Riverpod은 Flutter 공식 상태관리 라이브러리인 Provider의 개선된 버전으로, 더 안전하고 강력한 상태 관리를 제공합니다.

Riverpod의 주요 특징

전역 상태 관리 가능

•

Provider처럼 BuildContext가 필요하지 않음 → 전역에서 상태 관리 가능

안전한 상태 관리

•

StateNotifier를 사용해 불변 상태 관리 지원

•

FutureProvider, StreamProvider로 비동기 데이터 처리 가능

의존성 주입(DI) 지원

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

Riverpod 설치

또는

Riverpod

GetX

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

GetX는 Flutter에서 상태관리, 라우팅, 의존성 주입(DI) 을 한 번에 해결할 수 있는 강력하고 가벼운 라이브러리입니다.

GetX의 주요 특징

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

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

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

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

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

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

GetX 설치

GetX

Bloc (Business Logic Component)

Bloc(Business Logic Component)은 Flutter 공식 팀에서 지원하는 강력한 상태관리 라이브러리입니다.

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

Bloc의 핵심 개념

Cubit vs Bloc

•

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

•

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

Bloc의 주요 기능과 특징

1. 이벤트 기반 상태 관리

•

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

•

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

Bloc

배포

Dun & Bradstreet Support Page - Submit Case

For support in other countries and languages, please visit: dnb.com/choose-your-country.html

https://support.dnb.com/?CUST=APPLEDEV

참조

DUNS 번호 발행 방법 | 스윙투앱 도움말

D-U-N-S 넘버 발행

https://documentation.swing2app.co.kr/developer/duns

D-U-N-S 번호 발급

에러노트

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.

Because shared_data_app requires SDK version >=3.2.3 <4.0.0, version solving failed.

원인

shared_data_app 버전 호환 관련

Flutter

빠른 설치

플러터 삭제

삭제 대상 목록

Flutter 소개

플러터 프로젝트 구성 파일

Flutter 프로젝트 생성

Dart

pub

목차

기초 문법

함수

특징

객체지향

컬렉션

비동기 프로그래밍

Widget & State

레이아웃 위젯

입력 위젯

네비게이션 위젯

MaterialApp

기본 설정

Scalffold

Scalffold 구성요소

BottomNavigationBar

Button

SharedPreferences

path provider

SQLite

convert

http

dio

calendar_date_picker2 라이브러리

share_plus

게시판 앱

목차

로그인 앱

프로젝트 개요

Flutter x SpringSecurity x JWT

Flutter

pubspec.yaml

Provider의 핵심 개념

Provider의 주요 기능과 특징

1. 간단한 상태 관리

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

GetX

GetX의 주요 특징

GetX 설치

Bloc의 핵심 개념

Cubit vs Bloc

Bloc의 주요 기능과 특징

1. 이벤트 기반 상태 관리

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

원인