Flutter WEB APP DESKTOP

(해당 레포의 업데이트를 계획하고 있습니다, 22년 상반기 중 새로운 레포의 주소를 공유하겠습니다. 감사합니다 🧑‍💻)

Youtube : 제임쓰 Dev 🇰🇷 🔗

Guide

• 👋 Flutter를 처음 보신다면!
  • Dart 기초 문법 먼저 암기가 중요합니다 : 하단 내용 참고 및 Dart Doc.
  • Widget(Material & Common, Cupertino) 학습 : Tutorial Video 중 Widget
  • Flutter 기능들과 생활코딩 WEB(HTML, CSS, JS) / Node.js 병행 학습 : 생활코딩
  • WEB 이후 서버를 활용한 예제 진행 : 하단 내용 중 네이버, 카카오 등 api 활용 등 참고
• ❓ Dart / Flutter 가 어렵다면?
  • 처음 개발을 공부하실 때에는 생활코딩 WEB(HTML, CSS, JS) / Node.js 부터 학습하고 오시는 게 좋습니다, APP 개발에도 WEB 관련 내용은 중요하며 네이티브 및 리액트네이티브, 다른 프레임워크를 학습하시는 것이 오히려 처음 개발하실 때에는 혼란스러울 수 있습니다
  • Flutter가 어렵다면 우선 Dart 문법은 암기 및 이해가 충분한지 점검하고 이후 Widget 에 대한 이해를 늘려야합니다
  • 생활코딩 WEB 학습 이후에도 어렵다면 React 리액트를 먼저 보시는 것도 도움이 됩니다.
• 👍 중고급 개발을 위해
  • Native(Android / IOS) 네이티브 / Architecture 아키텍처 / Design Pattern 디자인 패턴 학습 : 될 때까지 안드로이드 - 생존코딩, Apple Doc 공식 홈페이지 / MVVM 1, MVVM 2
  • 깊은 언어의 이해를 위해 유튜브 코드스피츠 채널을 추천드립니다(개인적으로 너무 좋아서 두번 추천드립니다) : 코드스피츠

Dart

• ⭐ 문법 Grammar : Code, Video & Code 1, Video & Code 2, Video & Code 3, Video & Code 4
• Future async & await : Video & Code
• Modeling - OpenAPI 활용
  • 서울 열린 데이터 광장(서울시 구별 주민등록 인구) : Video & Code
  • openWeather 날씨 : Video & Code
• etc
  • Flutter & Dart : CallBack & Generic with Provider - HTTP Example
  • ServerSide : Angel Video & Code
  • Static : Video & Code
  • Dart2Native - EXE : Video 1 & Video 2

☝️ Flutter

• ✌️ Flutter(WEB & APP & Desktop)

  • SETUP : Windows / Mac-1.22.5

  • Update Version Apply & Change : Prev / 1.22.5

  • 🌟 Widget UI : Tutorial Video

    Material & Common Design Widget

    • Scaffold : Tutorial 1
    • Container : Tutorial 2
    • Text : Tutorial 3
    • SingleChildScrollView : Tutorial 4
    • Column, Row : Tutorial 5
    • ListView : Tutorial 6
    • GridView : Tutorial 7
    • SafeArea : Tutorial 9
    • Button's : Tutorial 10 / Tutorial 1.22 업데이트
    • AppBar & SliverAppBar : Tutorial 13
    • Material_Navigator : Tutorial 11, 12, 59
    • Image : Tutorial 97
    • Screen OrientationBuilder & Fixed : Tutorial 18
    • DateTime Calculation : Tutorial 21
    • PageView : Tutorial 22
    • BottomSheet : Tutorial 23
    • Custom Route Animation : Tutorial 23*
    • Custom PopUp : Tutorial 59*
    • ListWheelScrollVie : Tutorial 31
    • MediaQuery & Expanded : Tutorial 32
    • GestureDetector & onTap / TapPosition : Tutorial 47
    • Progress Indicators : Tutorial 51
    • WillPopScope : Tutorial 57
    • Scroll Refresh (pull_to_refresh - SmartRefresher) : Tutorial 61
    • IgnorePointer : Tutorial 62
    • Dialog(Alert) : Tutorial 99
    • ClipPath : Tutorial 49
    • ShaderMask : Tutorial 33 / 34
    • NotificationListner & BuildContext - Builder : Tutorial 40
    • Animation - CustomDrawer : Tutorial 42 / 43
    • PIP : Tutorial 44
    • Scrollbar, Animations, PhysicalModel, RotateBox, InteractiveViewer : Tutorial 122
    • Transform & Matrix 4 : Tutorial 123
    Cupertino Design

    • CupertinoApp : Tutorial 1-1
    • CupertinoPageScaffold : Tutorial 1-1
    • CupertinoTabScaffold : Tutorial 1-1
    • CupertinoNavigationBar : 1-1
    • showCupertinoDialog & CupertinoAlertDialog: 2-1
    • showCupertinoModalPopup & CupertinoActionSheet : 2-1
    • showCupertinoModalPopup & CupertinoDatePicker : 3-1
    • showCupertinoModalPopup & CupertinoTimePicker : 3-1
    • showCupertinoModalPopup & CupertinoPicker : 3-1
    • CupertinoPageRoute & Navigator : 4-1
    • CupertinoField & TextEditingController : 5-1
    • CupertinoSliver NavagationBar & Grid(List)View : 6-1
    • ...
    • Design Sample
      • Music App Video & Code

  • ⭐ State

    • Stateful & Stateless Video & Code 1, Video Code 2
    • 👍 Provider Video & Code 1, Video & Code 2, Video & Code 3
    • GetX Video & Code 1 Statement, Video & Code 2 HTTP, Video & Code 3 Navigator
    • ...

  • 👍 UI LifeCycle & System LifeCycle UI Video & Code 1, UI Video & Code 2, System Video & Code 3, After Build(pub) - Video & Code 3

  • 📷 Camera Mobile Video & Code

  • 📷 Gallery ImagePicker : Mobile Video & Code 1, Video & Code 2

  • 📷 QR Scanner : Mobile Video & Code

  • 📷 Image Cropper : Mobile Video & Code

  • 📷 Image File(s) Upload : Mobile Code

  • 📷 View Capture Video & Code

  • 👍 Permission : Mobile Video & Code

  • 🎤 Mic Record : Mobile Video & Code

  • 🔈 Audio Play : Mobile Video & Code

  • 📳 Vibrator : Mobile Video & Code

  • 📁 PDF : Mobile Video & Code

  • 📁 File Folder : Mobile Video & Code

  • 🔗 Share : Mobile Video & Code

  • 🔗 URL Launcher : Mobile Video & Code

  • 🎇 VideoPlayer(exmaple: Youtube) : Mobile Video & Code

  • 📲 Call : Mobile Video & Code

  • 📲 Contact : Mobile Video & Code

  • 🔔 Notification - Local / FCM / Media : Mobile Local Video & Code, FCM Video & Code 1, FCM Code 2,Media Video & Code , OneSignal Push Notification 1, OneSignal Push Notification 2

  • 🔗 Bluetooth : Mobile Video & Code

  • 👆 (Bio)Fingerprint Recognition : Mobile Video & Code

  • 📌 GeoLocation : Mobile Code

  • 🎆 Google Admob Video & Code 1, Video & Code 2

  • 🔮 AR Core : Mobile Preview 1, Preview 2

  • 💻 ML Kit - Google Firebase : Mobile Video & Code

  • 🔗 Mobile Native Channel : Mobile Android Video & Code, IOS Video & Code

  • 🔗 WebView - JS Channel : Mobile Video & Code, Vue.js & Flutter Webview Code / Vue.js Code CDN 1 / Vue.js Code CDN 2 / Vue.js Code CDN 3

  • 🔗 Android ForegroundService Code

  • 🔗 Network

    • HTTP(s) Video & Code
    • Socket.io - Client & Node.js - Server Preview, Code, Video & Code

  • 📂 Database Cliten

    • Hive - Client Video & Code
    • SharedPreference - Client Code, Video & Code
    • Sqflite - Server Video & Code. Code

  • 🔗 H/W

    • ARDUINO, PHILIPS Hue 4.0, MIDI Video & Code

  • 🔗 URL Scheme with 카카오 맵 Video

✌️ Flutter 2 : Videos

• Null-Safety : Video
• Flutter WEB ver.Stable
• New Widgets
  • Cupertino : CupertinoSearchTextField, CupertinoFormSection, CupertinoFormSection.insetGrouped, CupertinoFormRow, CupertinoTextFormFieldRow
  • Material : AutocompleteCore, ScaffoldMessenger
• Flutter google admob SDK Open : Video
• FlutterFire & Flutter Community Plus Plugins
• deprecated
  • dart fix --dry-run
  • dart fix --apply
• Flutter & Sentry : Video
• Community Plus Plugins
  • (1) Connectivity ➕ : Video
  • (2) Device Info ➕Check : Video
  • (3) Network WiFi Info ➕ : Video
  • (4) Package Info ➕ : Video
  • (5) Share plus & ImagePicker & New Button ➕ : Video
  • (6-TEST) android_alarm_manager_plus ➕ : Video
• WEB & APP Frame : Code
• etc ...

One Source Multi Platform

• 🔗 WEB(2021 production version ?! 🙏 )
  • Setup & Version UPdate(1.26.0-1.0.pre) Video & Code
  • Router - Navigator 2.0 Video & Code
    • (1) StaticPath
    • (2-1) DynamicPath
    • (2-2) QueryString
    • (3) 404Page
    • (4) Page Move(push, pop)
  • Func
    • PlatformCheck : isWeb Video & Code
    • IFrame : Video, Code
    • Channel : Dart & JS Code
  • Deploy & Node.js(Express) - HTML
    • Localhost
      • Node.js Server Code
      • HTML Client Code
      • Flutter Code
    • AWS
    • GitHub Pages : Full Video & GitHub
    • GitHub Pages 2 : React WEB - APP Full Course : Code / URL
    • GitHub Pages 3 : Dart Code - Repositories
    • Firebase
    • Cafe24
• 🔗 WEB Stable(Flutter 2) 👍
  • Clone : Code
• 📱 APP
  • Setup
  • Router - Navigator 1.0 Video & Code 1, Video & Code 2, Video & Code 3
  • Func
    • PlatformCheck
  • Deploy
    • Android APK : GooglePlay Video
    • IOS : AppStore
• 💻 Desktop
  • MacOS Test Video
  • Router
  • Func
    • MacOS & Windos : File_Picker_Cross Video & Code
  • Deploy

🔗 with Server Node.js(Express.js)

• Node.js(Express) Code
• KAKAO 카카오
  • Login Preview, Video & Code
  • Pay Video & Code 1, Video & Code 2
  • Map Video & Code 1, Video & Code 2
  • Address 주소 찾기 Video & Code
• Naver 네이버
  • Login 네아로 Preview, Video & Code
  • API : Movie 영화 정보 Video & Code
  • API : News 뉴스 정보 Preview, Video & Code
• IamPort : PG사 결제 연동 서비스 Video & Code
• DeepLink(Scheme) : IOS & Android & NodeJS
• Database
  • MySQL - Server Video & Code with 생활코딩
  • Redis - Server Video & Code 1, Video & Code 2
  • Sqlite - Server (Video & Code)
• GraphQL Server Code, Flutter Code
• Mailer Video & Code
• Nice 휴대폰 인증 (Video & Code)
• HTTPS 인증서
  • Dev Test Code Line 13~22
  • Domain(Cafe24) + SSH(Cafe24) + OpenSSL (Video & Code)
• 기존 WEB 프로젝트에 Flutter WEB 경로(Path) 추가하기
• Node.JS & HTML / React & Flutter Code
• Node.js & HTML / Svelte & Flutter (Code...)

🔗 with Server FastAPI(Python)

• Full Video & Code

🔥 with Firebase (Video & Code)

• Firebase Cloud Messaging : (ver9.0.1)Code & Video
• RealTime Database
• Cloud Database
• ML kit

👍 with 생활코딩

• Node.js Video & Code
• Airtable Video & Code
• Airtable & Image Video & Code

👍 with 생존코딩

• Native Channel Methods Video & Code Tutorial 50, 63~65
• MVVM 응용 네이버 뉴스 API Video & Code 응용+, 응용++

Make My Package

• How to Make MyPackage ? Video & Code
• Example : airtableJ Code, Pub

⭐ How to

• 전자 공시 시스템 : 최근 3개월 공시 기업 내용 조회 어플( 입문 Code / Video-Test / Video-Des )
• 쇼핑몰 : shop( 입문-초급 Flutter APP & WEB / Server Node.js _ 1 완료 / 중-고급 Video & Code 113-1~4
• My Project & Design Widgetsssss : repo
• HowTo(W3 비슷한) : repo
• 디자인 클론 01 (PageView & BottomNavigation): example
• 디자인 클론 02 (Stack & PageView) : example
• 디자인 클론 : 더불어민주당 Preview / Code
• 디자인 클론 : 국민의힘 Preview / Code
• with 도커 Docker 🐳(NodeJs & Mongo) : TODO-preview / Flutter Repo & Node Repo / Docker Image:Hub

👍 Native & Flutter

• Android : Video & Code
• IOS : ... await
• WEB : ... await

👍 WebRTC & Flutter

• (Easy) Flutter & NodeJS(ExpressJS) & PeerJS Example : Video