Flutter

Flutter BLOC 기반의 Widget Test

BLOC 패턴을 적용하면 가독성있는 테스트 코드를 작성할 수 있다. 특히 각각의 BLOC 단위 테스트 말고도 BLOC과 상호작용하는 위젯을 테스트하는 코드도 깔끔하게 작성할 수 있다. 이 문서에서는 BLOC 패턴이 적용된 페이지 위젯을 테스트하는 위젯 테스트에 대하여 알아본다. 편의상 Bloc 대신 Cubit을 활용하였다. 위젯 테스트란? 화면에 그려진 위젯에 대하여 클릭이나 스크롤과 같은 이벤트가 발생했을 때 원하는 결과가 발생하는 지 확인하는 테스트. 예를 들어 로그인 버튼을 눌렀을 때 로그인 요청이 발생하는지 테스트하려면 앱을 켜서 직접 눌러보아야 하는데, 매번 사람이 테스트 할 수 없으니 코드 레벨에서 테스트 하여 결과값을 보장받는 것이다. 위젯 테스트는 단위 테스트보다 포괄적인 테스트를 수행한다..

플러터 싱글턴 구현하기

이 문서에서는 플러터에서 싱글턴을 구현하는 방법에 대해 알아봅니다. Class 이름 활용하기 싱글톤으로 만들고 싶은 클래스에 다음과 같이 코드를 작성합니다. class Database { static final Database _instance = Database._internal(); factory Database() => _instance; Database._internal(); } 위와 같이 작성하면 코드 어디에서든 ClassName()로 싱글톤 객체에 접근할 수 있게 됩니다. Database().getSomthing(); 공유 객체 생성하기 공유 객체를 정적으로 하나 선언하고 다른 객체를 만들지 못하도록 생성자를 private 선언합니다. class Database { static final sh..

플러터 원격 저장소 패키지 의존성 추가하기

Flutter 공식 패키지 저장소 pub.dev에 있는 패키지가 아닌 원격 저장소 (Git, Bitbucket ...)에 있는 패키지의 특정 버전을 사용하는 방법 Github 프로젝트 타겟팅 dependencies: package_you_want: git: url: ref: 9f90296751984b359937c38563da5b19db5550f5 Bitbucket 프로젝트 타겟팅 앱 프로젝트에 빗버킷에 올린 ollacare_app_theme 패키지 의존성을 추가하려면 다음과 같이 작성합니다. dependencies: ollacare_app_theme: git: url: git@bitbucket.org:blueant_git/ollacare_app_theme.git ref: master 원격 저장소의 특정 ..

flutter 특정 원격 저장소 패키지 의존성 추가하기

목표 Flutter 공식 패키지 저장소 pub.dev에 있는 패키지가 아닌 원격 저장소 (Git, Bitbucket ...)에 있는 패키지의 특정 버전을 사용 Github 프로젝트 타겟팅 dependencies: package_you_want: git: url: ref: 9f90296751984b359937c38563da5b19db5550f5Bitbucket 프로젝트 타겟팅 앱 프로젝트에 빗버킷에 올린 ollacare_app_theme 패키지 의존성을 추가하려면 다음과 같이 작성합니다. dependencies: ollacare_app_theme: git: url: git@bitbucket.org:blueant_git/ollacare_app_theme.git ref: master원격 저장소의 특정 경로 패..

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

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

플러터 JSON 사용 방법 | the way of using json in Flutter

안녕하세요! 개발자 베베입니다. 이번 포스팅에서는 플러터에서 json 데이터를 다루는 가장 확실한 방법에 대해서 알아보도록 하겠습니다. 시작하기 전에 json이 뭔지 간단하게 알아보도록 할게요! JSON이 뭐지? json은 Javascript Object Notation의 축약어이며, 데이터를 저장 및 전송할 때 데이터 형식으로 자주 사용됩니다. 이름에서 알 수 있듯이 json은 자바스크립트의 객체를 표현하는 형식을 기반으로 만들어졌습니다. 다만 자바스크립트에서는 객체를 표현했다면 json에서는 데이터를 표현한다는 거죠. json은 이렇게 생겼습니다. { "users": [ { "name": "lee", "age": 32 }, { "name": "bebe", "age": 26 } ] } Json 디코딩 ..

플러터 앱에 스플래시 화면을 구현해보자

목표 페이지를 통한 스플래쉬 화면이 아닌 네이티브 스플래쉬 화면을 설정한다. 과정 네이티브 스플래쉬 화면을 구성하려면 각 플랫폼의 디렉터리에서 스플래쉬 화면에 관한 설정을 해주어야 하는데, 꽤나 번거로운 일이기 때문에 이 글에서는 패키지를 통해 네이티브 스플래쉬 화면을 두 플랫폼 한 번에 설정하는 방법에 대해 알아본다. 아래 패키지를 사용할 것이다. flutter_native_splash | Dart Package Automatically generates native code for adding splash screens in Android and iOS. Customize with specific platform, background color and splash image. pub.dev 플러터 프..

플러터 출시한 앱 버전 관리하기

글의 목표 이번 글에서는 플러터 출시한 앱의 버전을 관리하는 방법에 대해 알아본다. IOS와 Android는 버전 스트링을 다루는 방식이 서로 상이한 부분이 있다. 그러나 버전 관리는 같은 플러터 프로젝트에서 해주기 때문에 두 플랫폼에 동일하게 사용될 수 있는 버전을 관리 방법을 찾아야 한다. 플레이 콘솔 앱 출시 버전 정책 플러터에서는 앱 버전을 설정하기 위해서 pubspec.yaml 파일을 사용한다. 파일의 상단에 version이라고 적혀있는 부분이 있는데 그곳에 앱이 어떤 버전으로 빌드될 것인지 적어주기만 하면 된다. 플러터에서 버전 스트링은 총 4가지로 나뉘며 본인은 각각 아래와 같이 부르고 있다. 1(major) . 6(minor) . 0(maintain) + 27(version code) 앞의..

flutter :: 앱 버전 및 업데이트 관리 | app version control

목표 내 앱이 현재 최신 버전인지 확인하고, 최신 버전이 아니라면 업데이트를 하도록 유도하는 다이얼로그를 화면에 띄운다. 최신 버전이 아니여도 호환이 되는 상태기 때문에 업데이트를 강제하지는 않는다. 만약 앱이 최신버전이 아니고, 최신 버전과 호환되지 않는 상태라면 ( 최소 앱 버전보다 낮다면) 업데이트를 강제하고 앱 사용을 중단시킨다. 해결 방법 사용중인 유저의 앱의 버전은 반드시 최소로 요구되는 버전보다 크거나 같아야 하고 최신 버전 이하여야 한다. minimumAppVersion

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

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