코딩강의/favorite_places(플러터-유데미) (11) 썸네일형 리스트형 ~262. Using a FutureBuilder for Loading Data 1. 모바일 기기 SQL Database에 데이터를 저장해보고, 화면에 띄워보자. - user.places.dart import 'dart:io'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:path_provider/path_provider.dart' as syspaths; import 'package:path/path.dart' as path; import 'package:sqflite/sqflite.dart' as sql; import 'package:sqflite/sqlite_api.dart'; import 'package:favorite_places/models/place.dart'; Future _getDat.. ~259. Storing the Picked Image Locally 1. 이미지를 로컬 장치에 저장해보자. 서버 DB를 사용하지 않을거라면 모바일에 db를 생성하여 데이터를 저장/불러올 수 있다. flutter pub add sqflite 이거는 sql 구문 날리는식으로 db를 사용 할 수 있고 (해당 강의에서는 이 패키지 사용) 아래 패키지는 간단하게 key, value 식으로 이용 할 수 있는 것 같다. https://pub.dev/packages/shared_preferences shared_preferences | Flutter Package Flutter plugin for reading and writing simple key-value pairs. Wraps NSUserDefaults on iOS and SharedPreferences on Android. .. ~257. Using the Map Screen in the "Add Place" Form 1. add_place 화면에 맵 스크린 화면을 사용해보자. - location_input.dart import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart'; import 'package:location/location.dart'; import 'package:http/http.dart' as http; import 'package:favorite_places/screens/map.dart'; import 'package:favorite_places/models/place.dart'; class LocationInput extends Sta.. ~255. Displaying the Picked Place on a Dynamic Map 1. 구글맵 스크린을 별도로 만들어보자. 다트 패키지에서 google map flutter를 다운받자. 2. detail 화면 아바타 부분(지도화면)을 누르면 구글맵이 뜨고, 현재 지정한 위치로 가게 해보자. - screens/map.dart (new) import 'package:flutter/material.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart'; import 'package:favorite_places/models/place.dart'; class MapScreen extends StatefulWidget { const MapScreen({ super.key, this.location = const PlaceLoca.. ~252. Outputting the Location Data 1. 이제 실제로 내가 위치한/선택한 위치에 대해 detail 화면에 띄워보도록 하자. - place.dart import 'dart:io'; import 'package:uuid/uuid.dart'; const uuid = Uuid(); class PlaceLocation { const PlaceLocation({ required this.latitude, required this.longitude, required this.address, }); final double latitude; final double longitude; final String address; } class Place { Place({ required this.title, required this.image, required .. ~250. Displaying a Location Preview Map Snapshot via Google 1. add_place화면에 내 위치 확인과, 구글맵을 연동시켜보자. 다트 패키지에서 location과, http 를 다운 받아준다. 특히 location은 ios같은 경우 추가 세팅이 필요하니, 상세 내용을 잘 보자. google map api를 사용하기 위해서 아래 사이트에서 계정 가입(vinaarba@gmail.com)을 하고, 데이터 전송 시 필요한, 키 값을 받아낸다. https://developers.google.com/maps?hl=ko Google Maps Platform | Google for Developers Google Maps Platform 설명 developers.google.com 2. 지오코딩 (Geocoding)과 map static api 이해 일반적으로 지오코딩이라는 .. ~244. Previewing the Picked Image 1. 카메라로 촬영한 이미지에 대해 작은 아바타를 만들어보자. - place.dart import 'dart:io'; import 'package:uuid/uuid.dart'; const uuid = Uuid(); class Place { Place({required this.title, required this.image}) : id = uuid.v4(); final String id; final String title; final File image; } 1) 모델 값에서 image 추가 - user_places.dart import 'dart:io'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:favorite_p.. ~242. Using the Device Camera For Taking Pictures 1. 카메라 기능을 활성화 시켜보자. 다트 패키지아래 이미지 피커를 다운받자. https://pub.dev/packages/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 위 설명을 보면 ios 같은 경우 사전 세팅해야되는 부분들이 있다. ios 앱을 출시할거라면 반드시 세팅. android는 따로 설정 없음. (글작성 기준, 나중에 최신 버전으로 다시 봐야함) - add_place.dart import 'package:favorite_places/wid.. 239. Adding a "Place Details" Screen (Challenge Solution 6/6) 1. place detail 화면을 추가하자. 여기까지는 이전에 배웠던 기본 방법들로 다 구현했다. - place_detail.dart https://github.com/academind/flutter-complete-guide-course-resources/blob/main/Code%20Snapshots/13%20Native%20Device%20Features/05%20PlaceDetail%20screen/lib/screens/place_detail.dart - places_list.dart https://github.com/academind/flutter-complete-guide-course-resources/blob/main/Code%20Snapshots/13%20Native%20Device%20.. ~238. Adding Places with Provider & Displaying Places (Challenge Solution 5/6) 1. 리버팟 provider를 사용해서 값을 전역에 사용해보자. flutter pub add flutter_riverpod 설치 - providers/user_places.dart import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:favorite_places/models/place.dart'; class UserPlacesNotifier extends StateNotifier { UserPlacesNotifier() : super(const []); void addPlace(String title) { final newPlace = Place(title: title); state = [newPlace, ...state]; }.. 이전 1 2 다음
