본문 바로가기

Flutter/04 Widgets

(17)
[Flutter] Widgets - FCM(Firebase Cloud Messaging) 이번 카테고리는 Firebase Cloud Messaging 에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 소스코드 위치 - Release 04_FCM_latest_upgrade · mike-bskim/FCM_test · GitHub Release 04_FCM_latest_upgrade · mike-bskim/FCM_test github.com 초기 화면은 아래와 같습니다. 기본적인 Firebase 설정은 아래 설정을 참고하세요. 1,2번까지만 설정하면 됩니다. 단, SHA1 부분은 필요없습니다. (3. Firebase 프로젝트에서 구글 인증 활성화 부터 필요없습니다.) 2021.08.06 - [Flutter/01 SNS login] - [Flutter..
[Flutter] Widgets - Google map 5 이번 카테고리는 google map 을 사용하는 방법에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 소스코드 위치 - https://github.com/mike-bskim/google_map_test/releases/tag/09_refactoring_1 Release 09_refactoring_1 · mike-bskim/google_map_test github.com 오늘은 지난 블로그에서 화면 초기 로딩 부분을 수정하였습니다. _goToCurrentPosition 함수를 이용해서 초기 더미 position 에서 현재 자신의 위치 정보를 가져와서 이동하게 초기화면을 처리했는데, 이 부분을 CircularProgressIndicator() 를 이용하여 조금..
[Flutter] Widgets - Google map 4(Geolocator) 이번 카테고리는 google map 을 사용하는 방법에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 소스코드 위치 - Release 08_geolocator · mike-bskim/google_map_test · GitHub Release 08_geolocator · mike-bskim/google_map_test github.com 화면은 아래와 같습니다. main.dart 추가분 CustomButton( title: 'Place Autocomplete + Location', onPressed: () { Navigator.of(context).push( MaterialPageRoute(builder: (context) { return const Auto..
[Flutter] Widgets - Google map 3(Place autocomplete) 이번 카테고리는 google map 을 사용하는 방법에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 소스코드 위치 - Release 07_place_autocomplete2 · mike-bskim/google_map_test · GitHub Release 07_place_autocomplete2 · mike-bskim/google_map_test github.com 화면은 아래와 같습니다. 이전 블로그에서 설명하지 않은 리팩토링을 포함하여 기능이 추가된 부분을 설명하겠습니다. 약간 혼란이 있을수 있습니다. 프로젝트 구조는 소스코드를 참고하시고, 블로그에서는 기본 기능을 중심으로 참고하시면 좋을것 같습니다. main.dart import 'package:f..
[Flutter] Widgets - Google map 2 이번 카테고리는 google map 을 사용하는 방법에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 소스코드 위치 - https://github.com/mike-bskim/google_map_test/releases/tag/05_search%26model Release 05_search&model · mike-bskim/google_map_test github.com 새로운 기능 구현 후 리팩토링을 하여 파일구조가 변경되었습니다. 화면은 아래와 같습니다. 메인화면에서 "Places Nearby" 버튼을 클릭하면 아래와 같은 화면이 나옵니다. 이전 블로그에서는 "어디에서 볼까?" 를 클릭하여 베이커리, 레스토랑, 카페를 선택하는 기능까지 구현하였고 이번 블..
[Flutter] Widgets - Google map 이번 카테고리는 google map 을 사용하는 방법에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 소스코드 위치 - 화면은 아래와 같습니다. 메인화면에서 "Places Nearby" 버튼을 클릭하면 아래와 같은 화면이 나옵니다. MapType 을 클릭하면 지도의 타입(normal, satellite, terrain, hybrid)을 순차적으로 변경됩니다. "어디에서 볼까?" 를 클릭하면 베이커리, 레스토랑, 카페 를 선택할수 있습니다. 관련 패키지들은 google_maps_flutter: ^2.1.8 flutter_form_builder: ^7.3.1 form_builder_validators: ^8.1.1 http: ^0.13.4 API 관련 키 취득..
[Flutter] Widgets - Completer 이번에는 Completer 에 대해서 알아보겠습니다. Completer 는 future 객체를 방법입니다(나중에 값이나 에러를 반환 가능, callback 으로 사용가능). 개발환경 : dart pad, flutter 3.0.3 소스코드는 아래와 같음. import 'dart:async'; import 'dart:math'; void main() { // futureOne 함수는 동기방식으로 결과는 간단하다, 짝수면 성공 홀수면 실패 출력 // 1. Lucky number is 0 // 1. Success final Future futureOne = Future(() { Random rnd = Random(); int luck = rnd.nextInt(10); print('1. Lucky number i..
[Flutter] Widgets - FormBuilder 4 이번 카테고리는 form 관련 위젯인 FormBuilder 에 대해서 알아보겠습니다. 입력받은 정보를 다른 페이지에 전달하는 방법에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 소스코드 위치 - Release 06_data_transfer · mike-bskim/flutter_form_builder_test · GitHub Release 06_data_transfer · mike-bskim/flutter_form_builder_test github.com 화면은 아래와 같습니다. main.dart 수정 - 데이터를 정리하여 다음 페이지로 전달. // final inputValues = _fbKey.currentState!.value; Map tempVal..