앱개발(98)
-
[043] 플러터 (Flutter) 배우기 - MVVM 아키텍처 패턴 적용
안녕하세요~ totally 개발자입니다. MVVM (Model View ViewModel) 이 포스팅에서는 MVVM에 대해 알아보도록 하겠습니다. 이에 앞서 아키텍처를 적용하는 이유와 목적에 대해 알아볼 필요가 있습니다. 이 아키텍처 패턴은 공통적인 문제 발생에 대해 일반적인 그리고 재사용 가능한 해결책을 의미하며 디자인 패턴과 다른 점은 디자인 패턴은 특정 유형의 문제에 초점을 두는 반면 이 아키텍처 패턴은 전반적인 문제 해결 방법이라고 봐야 합니다. MVVM은 기존의 MVC, MVP 패턴을 보완하기 위한 패턴으로, 기존의 MVC는 Model View Controller, MVP는 Model View Presenter로 구성되어 있는 반면, MVVM은 Model, View, ViewModel로 구성되어..
2023.03.21 -
[039] 플러터 (Flutter) 배우기 - Form, validator, TextFormField, Navigator 매개변수 전달하기
안녕하세요~ totally 개발자입니다. Form, validator, TextFormField, Navigator.pushNamed의 매개변수 전달해서 다른 클래스에서 받기 Form, validator, TextFormField를 사용해서 잘 제출되었을 때 다른 페이지로 넘어갈 수 있는 예제를 살펴 보도록 하겠습니다. 플러터에서는 Form 위젯을 제공하여 양식을 만들 수 있습니다. 그리고 TextFormField를 사용하여 autoFocus, validator, onSaved 등 여러가지 속성을 같이 활용할 수 있습니다. Step 1: MaterialApp 부분에 home 부분을 주석 처리해주시고 initialRoute와 routes를 다음처럼 정의해주도록 합니다. 이 routes 정의를 통해 push..
2023.03.11 -
[038] 플러터 (Flutter) 배우기 - WebView (웹뷰) 구현하기
안녕하세요~ totally 개발자입니다. flutter_webview 오늘 구현해볼 부분은 플러터 웹뷰(flutter webview)입니다. 이 웹뷰를 사용하여 웹사이트를 그대로 모바일 어플에서 보여질 수 있도록 구현할 수 있습니다. Step 1: pubspec.yaml 파일에 이 3줄을 추가해줍니다. webview_flutter, webview_flutter_android, webview_flutter_wkwebview Step 2: 다음처럼 import 해줍니다. Step 3: Android는 sdk 버전 최소 19이상 ios는 11이상이라고 가이드 문서에 나와 있습니다. android/app/build.gradle android { defaultConfig { minSdkVersion 19 } } ..
2023.03.04 -
[037] 플러터 (Flutter) 배우기 - 푸시 알림 보내기(local notification)
안녕하세요~ totally 개발자입니다. flutter_local_notifications 오늘은 앱에서 푸시 알림을 보내는 방법에 대해 살펴보겠습니다. 플러터 패키지인 flutter_local_notifications를 명시해서 설치한 후 사용하면 됩니다. Step 1: pubspec.yaml에 다음처럼 등록해줍니다. Step 2: 프로젝트경로/android/app/src/main/AndroidManifest.xml에 다음을 추가해줍니다. android:showWhenLocked="true" android:turnScreenOn="true" Step 3: 프로젝트경로/ios/Runner/AppDelegate.swift에 다음을 Bool { } 내에 추가해줍니다. if #available(iOS 10.0..
2023.02.21 -
[036] 플러터 (Flutter) 배우기 - 상태 관리6 (GetX 사용 - Reactive State Manager & RxList 사용)
안녕하세요~ totally 개발자입니다. GetX - Reactive State Manager 저번 시간에는 Simple State Manager에 대해 살펴보았고, 이번 시간에는 Reactive State Manager에 대해 살펴보도록 하겠습니다. Simple State Manager에서는 GetBuilder와 update 메소드를 통해 UI를 업데이트해주었던 반면, Reactive State Manager에서는 Data Stream처럼 데이터를 주기적으로 관찰(Observe)하여 데이터가 변경된 경우에 UI를 실시간으로 업데이트해줍니다. 여기서 알아야 할 몇 가지 키워드가 있는데 Rx는 ReactiveX이고, Obs는 Observable입니다. 이 GetX Reactive State Manager의..
2023.02.20 -
[035] 플러터 (Flutter) 배우기 - 상태 관리5 (GetX 사용 - Simple State Manager, GetBuilder 사용)
안녕하세요~ totally 개발자입니다. GetX - Simple State Manager, GetBuilder 사용 GetX는 상태관리 이외에 코드 간결화 등의 목적으로도 많이 사용되며 오늘은 상태관리, 먼저 GetBuilder를 활용한 Simple State Manager에 대해 살펴보겠습니다. Step 1: pubspec.yaml에 get을 등록합니다. Step 2: countController.dart 파일을 생성해주고 코드를 다음처럼 작성해줍니다. 10번째 줄에 보시면 update()라는 함수가 사용되는데 이것을 호출해야 상태가 업데이트됩니다. increase, decrease 함수를 각각 적어주었습니다. Step 3: main.dart 파일을 열어서 다음처럼 import해줍니다. Step 4:..
2023.02.19