모바일

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

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

플러터 파이어스토어 예외처리 | flutter firestore exception handling

Firestore를 이용하여 특정 문서를 읽어오는 코드는 다음과 같습니다. FirebaseFirestore.instance 객체의 get() 함수가 성공적으로 실행이 된다면 DocumentSnapshot 객체를 반환하고 그 안에 값들이 담겨 있겠죠. 근데 이 get() 함수를 수행하면서 여러가지 예외가 발생하기 때문에 예외처리를 해주어야 합니다. 1. 통신 에러 & 권한 에러 처리해주기서버 측에서 통신을 할 수 없거나, 클라이언트(스마트폰) 측에서 인터넷이 연결되지 않아서 통신할 수 없는 경우 get 함수는 통신 에러 예외를 발생시킵니다. 만약 서버와의 통신은 원활하지만 클라이언트 측에서 사용하는 파이어베이스 계정이 해당 문서를 접근할 수 있는 권한이 없다면 권한 에러 예외를 발생시키게 됩니다. 위 두 ..

플러터 ios 프로젝트 pod 의존성 최신화하기 | Flutter ios refresh pod

간혹 플러터 앱 개발중에 버전에 대한 변동을 주고 싶을 때, pubspec.yaml에서는 변경했지만 pod 파일에선 변동이 없는 경우가 있습니다. 이럴 때에는 pod 파일에 관련된 몇몇 파일을 제거하고 다시 pod 파일을 인스톨해주면 해결됩니다. pod 파일 최신화 pod 파일의 의존성 정보를 최신화해줘야 빌드를 눌렀을 때 원하는 패키지 버전이 빌드됩니다. pod 파일을 최신화하는 방법은 다음과 같습니다. 플러터 프로젝트 폴더 내부의 ios 폴더로 이동해줍니다. $ cd ios/ 먼저 ios/Podfile.lock을 제거해줍니다. $ rm -rf Podfile.lock pod 파일 의존성 패키지를 업데이트 해줍니다. $ pod install --repo-update 명령어가 수행되면 의존성 패키지들이 다..

플러터의 위젯에 대해 알아보자

위젯이란 플러터에서 위젯이란 화면에 그려지는 객체를 의미합니다. 화면에 그려지는 모든 것은 모두 위젯이라고 생각하면 됩니다. 위젯은 상태가 있느냐 없느냐에 따라 Stateless Widget, Stateful Widget으로 나뉘게 됩니다. 여기서 상태란 위젯을 구현하기 위해 사용되는 정보입니다. 상태(state) 예를 들어 현재 시간을 알려주는 시계 역할을 하는 위젯이 있다고 생각해봅시다. 매 초마다 현재 시간은 변할태니 시계 위젯은 매 초마다 모양이 변해야겠죠? 이런 기능을 위젯에서 구현하려면 일단 현재 시간이라는 값을 위젯 내부에서 보관해야하고, 시간이 흐를 때마다 시계 침 위치를 변동시켜주어야 합니다. 여기서 현재 시간에 대한 값과 시계 침 위치에 대한 값이 상태라고 불리는 것들입니다. 그렇다면 ..

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

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

[Flutter Admob] 플러터 IOS 앱에 애드몹 배너 광고 달기

안녕하세요 개발자 베베입니다. 이번 글에서는 플러터로 개발한 IOS 앱에 애드몹 광고를 넣는 방법에 대하여 알아보도록 하겠습니다. 사용하는 패키지이 글에서는 애드몹 패키지로 admob_flutter를 사용합니다. 플러터에서 사용하는 애드몹 패키지는 종류가 크게 3가지가 있는데, 각자 장단점이 있습니다. firebase_admob같은 경우에는 앵커 형식의 고정된 배너를 제공한다는 장점이 있지만 여러 단점이 존재합니다. admob_flutter는 광고를 위젯처럼 다룰 수 있는 장점때문에 저는 admob_flutter를 사용하는 것을 추천드립니다. 과정 1. 애드몹 페이지에 앱 등록 2. 광고단위 생성 3. 플러터 프로젝트 설정 4. 배너 추가 1、애드몹 페이지에 앱 등록플러터 앱에 애드몹을 사용하려면 먼저 ..

[Flutter Firebase Login]플러터 익명 로그인 | Flutter Anonymous Login

안녕하세요 개발자 베베입니다. 이번 포스팅에서는 플러터 프로젝트에 파이어베이스 익명 로그인을 추가하는 방법에 대해서 알아보도록 하겠습니다. 선행 조건 플러터 앱에서 파이어베이스 로그인 기능을 사용하기 위해서는 먼저 파이어베이스를 연동시켜주는 작업이 필요합니다. 아래 포스팅에 파이어베이스 연동 방법에 대해 적어놨으니 참고하세요~ [Flutter Firebase]플러터 파이어베이스 연동 | 안드로이드 앱 연결 안녕하세요 개발자 베베입니다. 이번 포스트에서는 안드로이드 앱 기준으로 플러터 프로젝트를 파이어베이스 프로젝트와 연결하는 방법에 대해서 알아보도록 하겠습니다. 만약 여러분들의 앱 bebesoft.tistory.com 목차 1. 파이어베이스 프로젝트 설정 2. 플러터 프로젝트 코드 작성 3. 파이어베이스..

[Flutter Firebase]플러터 파이어베이스 연동 | 안드로이드 앱 연결

사전 지식 및 목표 내 플러터 안드로이드 앱을 파이어베이스와 연동한다. 여기서 연동이라는 것은 파이어베이스의 기능을 사용하기 위한 가장 첫번째의 단계를 말하며, 이 단계가 수행되지 않으면 플러터 앱에서 파이어베이스의 기능을 사용할 수 없다. 이 게시글에서는 안드로이드 앱을 위한 설정을 진행하며, IOS 앱같은 경우 설정을 따로 또 해주어야 함 과정 1. 연동할 파이어베이스 프로젝트를 생성한다. (만약 기존 파이어베이스 프로젝트가 있다면 넘어가도 됨) 2. 파이어베이스 프로젝트에 앱을 등록한다. 3. 플러터 프로젝트를 설정한다. 4. firebase_core 패키지를 설치하고 실행시켜서 확인해본다. 파이어베이스 프로젝트 생성 프로젝트는? 먼저 파이어베이스 홈페이지로 이동해서 플러터 프로젝트와 연결할 파이어..

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..

flutter :: 플러터에서 json 사용하기 - 기본편 | json data in flutter

안녕하세요 개발자 베베입니다. 이번 포스팅에서는 플러터에서 json 데이터를 사용하는 방법에 대해서 알아보도록 하겠습니다. 1. 자료형에 대한 이해 2. json 스트링을 Map 자료형으로 변환 3. Map 자료형을 객체로 변환 4. 객체를 json 스트링으로 변환 자료형에 대한 이해 플러터, 정확히는 Dart 언어에서 json을 다루기 위해선 먼저, 관련된 자료형에 대한 정리가 필요하다. 첫번째로 json 파일을 파일 입출력을 통해 가져오게 되면 json 데이터는 텍스트 데이터이기 때문에 String 형으로 들어오게 된다. 이 글에서는 파일 입출력을 통해 가져온 json 데이터 스트링을 json 스트링이라고 부르도록 하겠다. 두번째로 Dart에서는 json을 다루기 위해 Map 이라는 자료형을 사용한다..