Frontend/flutter_basic

플러터 앱 oAuth 간편 로그인을 직접 구현해보기

이 글에서는 플러터 앱과 백엔드 서버가 oAuth 로그인을 통하여 회원가입을 하는 과정에 대해서 알아봅니다. 예시로 애플 로그인을 언급하고 있지만, 내용 자체는 카카오, 페이스북, 구글과 일치합니다. 배경 회사에서 개발중인 플러터 앱에 간편 로그인 기능을 사용하기로 결정하였습니다. 기존 개발할 때 파이어베이스 서비스를 이용하여 간편 로그인을 구현하였는데, 이번에는 자체 서버가 있기 때문에 oAuth 로그인 규약에 맞춰 개발을 진행해야 했습니다. 개발을 진행하면서 알게된 점, 특징들을 공유하고자 이런 글을 남깁니다. 이 글에서는 애플 로그인을 통하여 서버에 계정을 생성하기까지의 과정을 알아보도록 하겠습니다. oAuth 로그인이란 oAuth 로그인이란 쉽게 생각해서 새로운 서비스를 이용하기 위해 기존에 이용..

플러터 SVG 파일 캐싱하는 방법 | how to cache svg file in flutter

이 문서에서는 플러터 프로젝트에서 svg 파일을 캐싱하는 방법을 알아보도록 하겠습니다. 서론 플러터에서는 svg파일을 사용하기 위해 flutter_svg 패키지를 사용합니다. 만약 svg 파일의 크기가 크다면 불러오는데 시간이 소모되기 때문에 해당 svg파일을 화면에 그릴 때에는 잠깐동안 빈화면이 출력됩니다. 이러한 문제를 해결하기 위해 미리 svg 파일을 메모리로 올려놓는 svg 파일 캐싱 작업이 필요합니다. 캐싱 작업을 위해 필요한 함수들도 모두 flutter_svg 패키지에서 제공됩니다. SVG 파일 캐싱 svg파일 캐싱이 수행되는 순간은 앱 시작 전이나 스플래쉬 화면이 가장 적당할 것 같습니다. 저는 main함수 내부에서 svg파일 캐싱을 수행하였으며 코드는 다음과 같습니다. final List ..

[플러터] 키보드가 나타나도 ViewInset이 변하지 않을 때| Flutter view inset not working

상황에 대한 이해 앱 화면에 키보드가 나타나면 보통 ViewInset의 값이 늘어나서 앱이 차지하고 있는 화면의 크기가 줄어들게 되고, 그에 반응하여 위젯들이 움직인다. 그런데 간혹 시뮬레이터에서는 잘 되다가, 앱을 출시했을 때, 키보드가 나타나도 ViewInset의 값이 변하지 않아서 문제가 생길 수 있는데, 이건 앱이 FullScreen 모드로 설정되서 그렇다. 보통 앱은 Debug 모드와 Release 모드의 설정이 다르게 되어있는데, Debug 모드에서는 풀스크린 모드가 아니였다가 Release 모드에서 풀스크린 모드로 빌드가 된 상황이다. 이 문제를 해결하기 위해선 안드로이드의 경우 styles.xml 파일을 수정해주면 된다. android/app/src/main/res/values/styles..

flutter :: main함수에서 비동기 함수 사용하기 | using async await in main function

이 글에서는 플러터 프로젝트 main 함수 내부에서 비동기 함수를 호출하는 방법에 대해 알아본다. main함수에 비동기 함수 호출 일반적인 비동기 함수라면 main 함수 내부에서 호출하여도 큰 문제가 발생하지 않는다. 그러나 플러터에서 사용하는 플러그인을 초기화하는 경우에 초기화 함수가 비동기 함수라면 문제가 발생한다. 예를 들어 파이어베이스 초기화를 위해 main 함수에서 Firebase.initializeApp()을 호출하면 다음과 같은 에러가 발생한다. void main() async { await Firebase.initializeApp(); // 비동기 함수 사용 시 에러 발생 runApp(MyApp()); } [VERBOSE-2:ui_dart_state.cc(148)] Unhandled Exc..