2023.12.04 - [Programming Language/Flutter] - [Dart, Flutter] Carousel Slider 를 이용하여 여러 View를 보이기 [Dart, Flutter] Carousel Slider 를 이용하여 여러 View를 보이기 간혹 처음사용하는 App을 켜면 사용방법이 touch & slide 형식으로 이루어져있는 것을 몇번 보았을 것입니다. 저희 프로젝트 App에서도 그러한 기능을 넣기위해서 찾아보다가 Carousel Slider 라는 Package developepe.tistory.com 이전에 작성한 글에서는 Carosel Slider를 이용하여 이미지 또는 View를 슬라이드 하는 형식으로 페이지를 이동했습니다. 이번에는 현재 슬라이드가 어디 슬라이드 인지..

간혹 처음사용하는 App을 켜면 사용방법이 touch & slide 형식으로 이루어져있는 것을 몇번 보았을 것입니다. 저희 프로젝트 App에서도 그러한 기능을 넣기위해서 찾아보다가 Carousel Slider 라는 Package를 찾게되었습니다. 백문이 불여일견, 먼저 구현해보면 "아~ 이거 자주봤지" 라는 표현이 나오실 겁니다 ㅎㅎ.. 먼저 Package를 pubspec.yaml 파일에 넣어주고 pub get 을 해줍시다! carousel_slider: ^4.2.1 프로젝트에 사용하기위해 import도 해주시구요! import 'package:carousel_slider/carousel_slider.dart'; import 'package:carousel_slider/carousel_controller..

프로젝트에서 백엔드에게 토큰을 얻어와서 이를 보관해야 하는데, 어디다 보관할지 고민할일이 좀 생겼다. 백엔드에서 발급해준 토큰은 App 내부에서 API를 요청할 때 Client의 주민등록증 같은것이라고 생각하면 되겠다. 그래서 우연히 찾아본 결과, Flutter Secure Storage 라는 것을 발견하게 됬다. Pub.dev의 Package Docs에서 찾아봤더니, 보안이 강화된 일종의 memory 영역이라고 보면 되겠다. iOS 같은경우 secure storage에 데이터를 넣으면 KeyChain에 저장되고 Android 같은경우 Keystore에 저장된다고 한다. 사용법을 알아보기전에 우선 설치부터 먼저해보자! pubspec.yaml에서 아래 구문을 추가해준 뒤, Pub get을 시도해주자. fl..

프로젝트에서 장소마다 Category를 정하여 정리하는 것이 쉽고 아이콘으로도 확인이 가능하다고 해서, 장소를 등록할 때 여러가지 아이콘을 화면에 띄우고 싶은데, 마침 GridView라는 것을 발견하여 이번에 사용해보고 소개하고자 합니다. 필요한것은 List 형태의 데이터만 있으면 됩니다. GridView는 GridView.builder를 통해 생성이 가능합니다. 내부 속성은 다음과 같습니다. GridView.builder( itemCount: , //item 개수 gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: , // 하나의 행에 보여줄 item 개수 childAspectRatio: 1 / 2, // item 의 가로 ..

프로젝트를 진행하면서 백엔드 Spring boot 서버와 통신이 필요하게 됩니다. 수많은 데이터를 로컬에 저장하기엔 너무 무거우니까요. 우리는 서버 컴퓨터에 저장된 데이터 가져온 후 화면에 나타내려고 합니다. 서버에서 데이터를 가져오는 방법은 많지만, 가장 쉽고 대표적인 방법으로 HTTP 통신을 사용하려 합니다. Flutter 에서 사용하기 위해서는 http package 가 필요하므로 설치해줍시다. pubspec.yaml 파일에 아래 내용을 넣고, pub get 을 해줍시다! http: ^1.1.0 먼저 대략적인 순서는 이렇습니다. 1. post, get method 를 통하여 데이터를 요청한다. (Front) 2. 백엔드에서 요청을 받은 후, 쿼리를 통해 백엔드 데이터베이스에서 데이터를 가져온다. (..

이번 시간에는 Flutter Map에서 마커를 생성하는 방법을 알아봅시다. Flutter_Map 같은 경우, Layer 구조로 되어 있는데, 쉽게 말해서 2D 평면이 여러개 겹쳐있다고 보시면 됩니다. Flutter_Map 여러가지 레이어가 존재하는데, 그중 대표적으로 MarkerLayer가 존재합니다. 구현 코드는 다음과 비슷합니다. FlutterMap( mapController: mapController.mapController, options: MapOptions( initialCenter: currentLocation ?? latLng.LatLng(51.509364, -0.128928), initialZoom: zoom, ), children: [ TileLayer( urlTemplate: 'htt..

이전 글에서는 Flutter_Map 을 이용하여 Device에 Map 화면을 띄우는 방법을 설명했습니다. 이번에는 Device의 현재 위치를 기준으로 Map을 띄우는 방법을 설명하겠습니다. 사용할 패키지는 Geolocator 라는 Plugin 입니다. 먼저 pubspec.yaml 파일에 해당 구문을 추가해주고 pub get을 통해 설치해줍시다. geolocator: ^10.1.0 이제 Device의 OS 마다 별도의 추가적인 Setting이 필요한데 잘 따라오시면 문제없을듯 합니다. Android android/gradle.properties 파일에 해당 구문을 추가해줍시다. android.useAndroidX=true android.enableJetifier=true android/app/build.g..

Flutter 에는 다양한 Map API 들이 존재하는데 그중 Flutter_Map 이라는 Package를 알아보자. 사전준비부터 알아보자. 먼저 Pubspec.yaml 파일에 해당 package를 적으면 사용이 가능하다. flutter_map: ^6.0.0 latlong2: ^0.9.0 latlong2 패키지 같은 경우, flutter_map은 위도, 경도 좌표를 기반으로 Map에 Marker를 생성하는 latlong2 패키지는 위도,경도를 가진 자료형을 지원하는 package라고 생각하면 되겠다. Android의 경우 AndroidManifest.xml 파일에 다음과 같은 코드를 넣어준다. 기본적인 코드는 다음과 같다. 의외로 간단하다. import 'package:flutter_map/flutter..