Flutter WEB APP DESKTOP

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

Youtube : 제임쓰 Dev :kr: 🔗

<img src="https://avatars.githubusercontent.com/u/56661529?s=400&u=7d9603c8e23e3f450f5dc30cf6776d0d00841b10&v=4" width="20%" />

Guide

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

Dart

<img src="https://avatars1.githubusercontent.com/u/1609975?s=200&v=4" width="10%" />

• :star: 문법 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

:point_up: Flutter

<img src="https://flutter-ko.dev/images/flutter-logo-sharing.png" width="30%" />

• :v: Flutter(WEB & APP & Desktop)

  • SETUP : Windows / Mac-1.22.5

  • Update Version Apply & Change : Prev / 1.22.5

  • :star2: Widget UI : Tutorial Video

    <details> <summary>Material & Common Design Widget</summary>
    • 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
    </details> <details> <summary>Cupertino Design</summary>
    • 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
    • ...
    </details>
    • Design Sample
      • Music App Video & Code

  • :star: State

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

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

  • :camera: Camera Mobile Video & Code

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

  • :camera: QR Scanner : Mobile Video & Code

  • :camera: Image Cropper : Mobile Video & Code

  • :camera: Image File(s) Upload : Mobile Code

  • :camera: View Capture Video & Code

  • :+1: Permission : Mobile Video & Code

  • :microphone: Mic Record : Mobile Video & Code

  • :speaker: Audio Play : Mobile Video & Code

  • :vibration_mode: Vibrator : Mobile Video & Code

  • :file_folder: PDF : Mobile Video & Code

  • :file_folder: File Folder : Mobile Video & Code

  • :link: Share : Mobile Video & Code

  • :link: URL Launcher : Mobile Video & Code

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

  • :calling: Call : Mobile Video & Code

  • :calling: Contact : Mobile Video & Code

  • :bell: 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

  • :link: Bluetooth : Mobile Video & Code

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

  • :pushpin: GeoLocation : Mobile Code

  • :fireworks: Google Admob Video & Code 1, Video & Code 2

  • :crystal_ball: AR Core : Mobile Preview 1, Preview 2

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

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

  • :link: 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

  • :link: Android ForegroundService Code

  • :link: Network

    • HTTP(s) Video & Code
    • Socket.io -