반응형

플러터 29

[Flutter] 디자인패턴 MVVM과 riverpod (1부 MVVM)

이번에 디자인패턴 MVVM과 riverpod에 대해서 알아보도록 하자. 우선 MVVM이 무엇인지에 대해서 알아보자. MVVM이란? MVVM은 Model, ViewModel, View를 줄임말이다. 각각에 대해서 보자면 Model : 애플리케이션에서 사용되는 데이터와 데이터를 처리하는 부분 View : 유저에게 보여지는 UI 부분 Controller : 유저의 입력(Action)을 받고 처리하는 부분 이렇게 나누어진다. Model의 예시는 아래의 코드와 같다. 이렇게 코드를 작성하는게 일반적으로 Model이고 이 부분에서 jsonSerialize를 적용하게 된다. 다음은 View에 대한 예시코드를 살펴보자. 선언형 UI를 사용하는 플러터에서 화면을 선언하는 부분을 View로 보는 것이 일반적이다. 안드로이..

Study/Dart,Flutter 2023.03.18

17. [Flutter] 플러터의 성능향상을 위한 꿀팁 (3부 const)

오늘은 플러터 성능을 올리는 방법 중 const에 관한 내용을 포스팅해보겠다. 플러터 linter 우리는 플러터로 코딩을 하다보면 다음과 같은 줄들을 발견할때가 있다. 이렇게 파란색줄로 등장하는것은 lint라고 하는데, 일반적으로 코드가 최적화가 되어있지 않거나, '이렇게 사용하는 것은 피해라' 라는 뜻으로 알려준다. 물론 이걸 삭제하는 방법도 있는데, 이 lint를 삭제하면 더이상 파란색 줄은 뜨지않는다. 근데 이게 근본적인 해결책은 아니니 다시 살펴보자. 이렇게 사용하지 말아라. 라는 뜻은 개선을 하고 개선한다면 더 좋은 퍼포먼스가 발생한다는 뜻이다. 그래서 이게 왜 문제가 되느냐. 플러터도 화면을 랜더링을 하는 과정을 거친다. statelessWidget에서는 랜더링이 진행되지않지만, 상위 부모위젯..

Study/Dart,Flutter 2023.03.10

[Flutter, 플러터] path_provider_ios 및 FirebaseCoreDiagnostics 오류 해결

간단한 버그해결포스팅이다. 회사에서 Flutter 개발하다가 드디어 3.7버전이 나와서 업데이트를 할까말까 고민하다가 결국 업데이트를 하며 pub major update를 했다. 이런저런 오류가뜨다가 iOS에서 정말 답답한 버그가 두가지 나왔다. Famework not found FirebaseCoreDiagnostics 이 오류가 xcode에서 뜨며 iOS 빌드가 되지않았다. 그래서 한참을 고민하다가 해결책을 찾았다! Flutter프로젝트 -> ios -> Runner.xcodeproj -> project.pbxproj 에서 "FirebaseCoreDiagnostics", "-framework", 이걸 모두 찾아서 삭제하면된다. Framework not found path_provider_ios 이 문..

Study/Dart,Flutter 2023.01.31

3. [Flutter, Firebase]플러터 파이어베이스와 카카오 로그인연동하기(2부 ios설정)

이전 안드로이드 설정에 ios에도 설정하여 카카오로 로그인하고 파이어베이스 oauth 연동하는 것을 해보도록 하겠다. 참고 및 버전 https://youtu.be/Ar6RdDf77xQ 오준석 님의 카카오 로그인과 연동하는 걸 참고하여 만들었다. 영상과는 설명이 다른 부분이 많을 수 있으나, 큰 골자는 비슷하니 영상을 보는 것도 좋다. 또한 https://developers.kakao.com/docs/latest/ko/kakaologin/common Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 이걸 보아도 좋다! 카카오 개발자설정이 다 되지 않..

2. [Flutter, Firebase]플러터 파이어베이스와 카카오 로그인연동하기(1부 안드로이드 설정)

오늘은 플러터에서 카카오로 로그인을 하고 파이어베이스 oauth에 연동하는 것을 해보도록 하겠다. 나도 적잖게 오래걸렸던 내용이라 여러 부를 걸쳐 작성해보도록 하겠다. 참고 및 버전 https://youtu.be/Ar6RdDf77xQ 오준석 님의 카카오 로그인과 연동하는 걸 참고하여 만들었다. 영상과는 설명이 다른 부분이 많을 수 있으나, 큰 골자는 비슷하니 영상을 보는 것도 좋다. 또한 https://developers.kakao.com/docs/latest/ko/kakaologin/common Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com ..

16. [Flutter]플러터 Futurebuilder에 대하여 (1부 기초편)

오늘은 Flutter에서 Futurebuilder에 대해서 알아보자. Futurebuilder는 비동기 처리하는 데이터를 처리한 후 위젯을 반환할 때 사용하는 위젯이다. 예를 들어 서버에서 사진을 가져와서(비동기) 핸드폰에 띄워준다고 할 때 사용할 수 있다. 아마 플러터를 시작하는 초보자분들에게 꼭 필요해서 사용하게 되는 위젯 중 하나일 것이다. 시작해보자 참조 및 버전 https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html#widgets.FutureBuilder.1 FutureBuilder class - widgets library - Dart API Widget that builds itself based on the latest snaps..

Study/Dart,Flutter 2022.10.01

1. [Flutter 기초] Container에 대해 알아보자. (1부 Decoration; 테두리 그림자 그라데이션)

이번 포스팅은 Flutter 플러터에서 이런 거 없나? 할 때 웬만한 건 다 있는 Container를 알아보도록 하자. 내가 코딩하면서 Container에 가장 많이 사용한 순서대로 적어보도록 하겠다. 물론 기능은 있지만 내가 사용했을 때 많이 사용하지 않는 것은 적지 않았다. 버전 정보 및 참고자료 Flutter 3.3.1 • channel stable • https://github.com/flutter/flutter.git Framework • revision 4f9d92fbbd (6 days ago) • 2022-09-06 17:54:53 -0700 Engine • revision 3efdf03e73 Tools • Dart 2.18.0 • DevTools 2.15.0 https://api.f lut..

15. [Flutter] 플러터 성능향상을 위한 꿀팁(2부GestureDetect와 BuildContext sync)

오늘은 Flutter에서 버튼 혹은 사용자의 이벤트 발생에 의해 실행되는 비동기 호출에 대해서 알아보자. 우리는 GestureDetector 혹은 ElevatedButton을 이용해서 사용자의 클릭이벤트를 받곤 한다. 예를 들어 버튼을 클릭하면 서버와 통신을 해서 특정 데이터를 가져와서 화면을 새로 고치거나 새로운 화면을 보여준다. 만약 여기서 onTap에다가 async를 달아서 비동기로 만들어서 실행을 하는데, BuildContext가 변경된다면 어떤일이 생길까? 그리고 Context의 종속성에 자유로운(?) GetX를 이용했을 때에도 어떻게 되는지 알아보자. 참조 및 버전 https://www.youtube.com/watch?v=bzWaMpD1LHY Flutter 3.0.5 • channel stab..

Study/Dart,Flutter 2022.09.12

14. [Flutter] 플러터 성능향상을 위한 꿀팁(1부 widget tree)

플러터를 시작한 지 얼마 되지 않았지만, 그래도 플러터 하시는 분들을 위해서 도움이 많이 되었던 팁들을 적어보자 한다. 그리고 꿀팁과 그 후속작으로는 자주 쓰는 패키지들을 적어보고자 한다. 버전 정보 Flutter 3.0.5 • channel stable • https://github.com/flutter/flutter.git Framework • revision f1875 d570 e (5 weeks ago) • 2022-07-13 11:24:16 -0700 Engine • revision e85ea0e79c Tools • Dart 2.17.6 • DevTools 2.12.2 들어가기 전 이 글은 Flutter의 생명주기와 statelessWidget, statefulWidget을 기본적으로 안다면 좀..

Study/Dart,Flutter 2022.08.20

13. Flutter[플러터] 안드로이드 화면 띄우기 methodchannel invokeMethod(2)

이전에 포스팅한 것에 이어서 이번에는 플러터에서 안드로이드 화면을 띄워보도록 하겠다. 이전 포스팅에서도 마찬가지로 플러터화면 위에 안드로이드 화면을 띄우는게 필요한 경우가 있다. 나 역시 회사 프로젝트 진행 중 안드로이드의 aar파일을 띄워야 하는 경우가 있어서 사용했었다. 이전 포스팅 요약 이전 포스팅을 요약해서 설명하자면, 메소드체널을 이용하여 화면을 띄울 것이다. 간단하다. 플러터에서 invokemethod를 호출하면 startActivity를 실행시킬것이다. 파일 구성 및 버전정보 안드로이드는 Java로 진행하겠다. android app.src.main.java.com.example.flutter_android MainActivity.java MainActivity2.java ... lib ma..

Study/Dart,Flutter 2022.06.25
반응형