조준장 개발자 생존기

이번에는 AnimatedBuilder 애니메이션을 구현해보자. 코드 import 'package:flutter/material.dart'; import 'dart:math' as math; class AnimatedBuilderScreen extends StatefulWidget { const AnimatedBuilderScreen({Key? key}) : super(key: key); @override _AnimatedBuilderScreenState createState() => _AnimatedBuilderScreenState(); } // TickerProviderStateMixin은 매 프레임마다 함수를 호출하는 객체인데 // 프레임이 변화되어야 할 때 알려주는 거라고 한다. class _Ani..

이번에는 Slivers 애니메이션 효과에 대해서 알아보도록 하자. Slivers는 화면 헤더를 동적으로 표현하고 헤더를 위로 스크롤했을 때, 헤더 하단 부분이 나오는 애니메이션이다. 당근 마켓, 번개장터 등 게시물이 있는 UI를 생각하면 이해하기 쉬울 것 같다. 코드를 작성하기 전에 간단하게 알아보면 CustomScrollView를 통해 body를 감싸게 된다. 그냥 Sliver를 사용하기 위한 ScrollView라고 생각하면 좋을 것 같다. CustomScrollView 안에는 SliverAppBar와 다양한 Sliver 위젯이 들어간다. SliverAppBar는 헤더 부분이 되고 Sliver 위젯은 헤더 하단 부분이 된다. 그럼 코드를 작성하면서 구현해보자. 코드 import 'package:flut..

이번에는 Flutter와 Firebase를 연동해보려고 한다. 연동하기 전에 Firebase에 대해서 간단하게 알아보자. FIrebase란? Firebase는 백엔드 서비스라고 생각하면 이해하기 쉬울 것이라고 생각하고 flutter와 쉽고 간편하게 연동되며 여러 가지 기능을 제공하고 있다. 우선 간단히 빌드를 살펴보면 6개의 기능을 제공하고 있다. Authentication 서버 기반의 서비스를 제공하는 앱이라면 사용자의 가입과 로그인 기능이 필수인데, Firebase에서는 이 기능을 제공하고 있어서 직접 구현할 필요가 없다. google, facebook, twitter, github와 제휴되어서 각각의 계정으로 로그인 인증을 제공한다. kakao와 naver도 가능하다고 알고 있다. Database(..

이전에 image_picker 패키지를 통해 카메라를 구현해보았다. [Flutter] 플러터 image_picker 패키지를 통해 카메라 구현 이번에는 Flutter에서 카메라를 구현해보려고 했다. 카메라 구현을 위해 여러 패키지를 알아보았지만 UI 커스터마이징은 불가능한 것으로 보였고 다른 분들에 오픈 소스 코드도 확인해보았지만 fre2-dom.tistory.com 이번에는 이전에 만든 image_picker 패키지를 가지고 tflite를 활용하여 이미지 분류를 하는 앱을 만들어보려고 한다. tflite(TensorFlow Lite) tflite를 알기 위해서는 우선 TensorFlow부터 알아야 한다. TensorFlow는 인간이 사용하는 학습 및 추론과 유사한 패턴과 상관관계를 감지하고 해독할 수 ..

이번에는 Flutter에서 카메라를 구현해보려고 했다. 카메라 구현을 위해 여러 패키지를 알아보았지만 UI 커스터마이징은 불가능한 것으로 보였고 다른 분들에 오픈 소스 코드도 확인해보았지만 앱을 재실행 시 카메라 구현이 안 되는 버그가 있어 보였다. 그중에서 image_picker 패키지는 다른 패키지보다 비교적 구현이 쉬웠고 버그도 없는 것으로 판단되어 image_picker 패키지를 통해 카메라를 구현해보려고 한다. 라이브러리 image_picker | Flutter Package Flutter plugin for selecting images from the Android and iOS image library, and taking new pictures with the camera. pub.dev..

이전에 현재 위치 좌표를 구하고 Google Map에 나타내는 것을 구현해보았다. [Flutter] 플러터 Google Map에서 현재 위치 좌표(위도, 경도) 찾기 이번에는 Google Map에서 현재 위치 좌표(위도, 경도)를 찾아보자. Google Map API에서 GoogleMap 위젯을 살펴보면 다음과 함수가 있는 것을 확인할 수 있다. initialCameraPosition : 초기 시작 시 지도 보기를.. fre2-dom.tistory.com 그렇다면 이번에는 구한 위치를 주소로 바꿔보는 코드를 구현해보자. Google Cloud Platform Google Cloud Platform 하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요...

이번에는 개발 중 자주 사용하는 권한을 사용자에게 요청하는 코드를 구현해보자. 앱을 개발하다 보면 사용자가 카메라, 위치 정보, 사진 등 권한을 허용해야 실행되는 것을 구현할 때가 있을 것이다. 그런 권한 요청을 permission_handler를 통해 수행하자. 패키지 permission_handler | Flutter Package Permission plugin for Flutter. This plugin provides a cross-platform (iOS, Android) API to request and check permissions. pub.dev 위 링크에서 Installing에 들어가 다음 패키지를 복사하고 pubspec.yaml의 dependencies에 다음 코드를 작성한다. de..

이번에는 Google Map에서 현재 위치 좌표(위도, 경도)를 찾아보자. Google Map API에서 GoogleMap 위젯을 살펴보면 다음과 함수가 있는 것을 확인할 수 있다. initialCameraPosition : 초기 시작 시 지도 보기를 로드하는 데 사용되는 필수 매개변수 myLocationEnabled : 지도에 파란색 점으로 현재 위치를 표시 myLocationButtonEnabled : 사용자 위치를 카메라 뷰의 중앙으로 가져오는 데 사용되는 버튼 mapType : 표시할 지도의 유형(일반, 위성, 하이브리드 및 지형)을 지정 zoomGesturesEnabled : 지도 보기가 확대/축소 제스처에 응답해야 하는지 여부 zoomControlsEnabled : 확대/축소 컨트롤을 표시할지..

Flutter로 앱을 개발하다보면 api 호출하는 경우가 종종 있다. api 호출을 할 때 xml이나 json형식으로 데이터를 받게 되는데 데이터를 받게 되면 String을 double로 변환해야하는 경우가 있다. ex) 온도, 위도, 경도, 등등.. 그럴때 쓰이는 함수는 다음과 같다. double.parse(string) string 부분에 자신이 double로 변환해야하는 문자열을 넣면 된다.

이전에 Flutter에서 Google Map API를 활용해보았다. Flutter에서 Google Map API를 활용하는 방법에 대해서 궁금한 점이 있다면 다음 링크를 통해 알아보고 오면 좋을 것 같다. [Flutter] 플러터 Google Map API 활용 이전에 kakaomap_webview 패키지를 통해 지도를 구현해보았다. kakaomap_webview 패키지를 통해 지도를 쉽게 구현할 수 있었지만 지도의 여러 가지 기능을 코드로 작성할 때 JavaScript를 사용해야 하는 경우 fre2-dom.tistory.com 이번에는 Google Map API의 간단한 예제 코드 2개를 리뷰해보면서 구현해보자. 이번 예제 코드도 main.dart와 map_sample.dart를 통해 이루어져 있으며 ..