Flutter/12 Clone 당근마켓 (54) 썸네일형 리스트형 [Flutter] Clone - 당근마켓45(Map - 2) 이번에는 구글 지도에 마커를 추가해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 구현한 화면은 아래와 같습니다. ./src/screens/near/map_screen.dart - userModel 을 파라미터로 전달하여 사용자 위치에 마커를 표시 import 'package:apple_market3/src/models/user_model.dart'; import 'package:extended_image/extended_image.dart'; import 'package:flutter/material.dart'; import 'package:latlng/latlng.dart'; import 'package:map/map.dart'; class MapScreen ext.. [Flutter] Clone - 당근마켓44(Map - 1) 이번에는 Near 화면에 구글 지도 로딩 및 drag 기능을 추가해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 구현 화면은 아래와 같습니다. 필요한 패키지는 아래와 같습니다. map: ^1.3.3 latlng: ^0.2.0 ./src/screens/near/map_screen.dart import 'package:extended_image/extended_image.dart'; import 'package:flutter/material.dart'; import 'package:latlng/latlng.dart'; import 'package:map/map.dart'; class MapScreen extends StatefulWidget { const MapScree.. [Flutter] Clone - 당근마켓43(Item detail & PageView) - 5 이번에는 게시글 작성자의 다른 게시글을 하단에 추가해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 구현 전/후 화면은 아래와 같습니다. ./src/repo/item_service.dart - 유저 정보 하위에 저장된 글정보 가져오는 함수 추가 Future getUserItems({required String userKey, String? itemKey}) async { CollectionReference collectionReference = FirebaseFirestore.instance.collection(COL_USERS).doc(userKey).collection(COL_USER_ITEMS); QuerySnapshot snapshots = await colle.. [Flutter] Clone - 당근마켓42(Item detail & PageView) - 4 지난번에는 title 로 구현한 인디케이터를 숨기기 위해서 Scaffold 를 추가, LinearGradient 를 구현했었습니다. 이번에는 게시글의 상세 정보를 화면에 표시 및 Custom bottomNavigationBar 구현해 보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 구현 전/후 하면은 아래와 같습니다. ./src/screens/home/item_detail_page.dart - 전체 코드는 아래 "더보기" 를 클릭하세요 더보기 import 'package:apple_market3/src/states/category_controller.dart'; import 'package:extended_image/extended_image.dart'; import .. [Flutter] Clone - 당근마켓41(Item detail & PageView) - 3 지난번에는 SmoothPageIndicator 를 backgroud 로 구현한 경우와 title 로 구현한 경우를 비교해 보았습니다. 이번에는 title 로 구현한 인디케이터를 숨기기 위해서 Scaffold 를 추가, 화면 상단을 조금 부드럽게 표현하기 위해서 Container 를 추가해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 구현한 화면은 아래와 같습니다. 초기 화면 상단에 검은색 계열로 appBar 영역만큼 그라데이션 처리, 화면 스크롤시 이미지가 화면 밖으로 사라지면 appBar 영역이 흰색으로 변경됨. ./src/screens/home/item_detail_page.dart - 전체 코드는 아래 "더보기" 를 클릭하세요 더보기 import 'package.. [Flutter] Clone - 당근마켓40(Item detail & PageView) - 2 지난번에 구현한 SmoothPageIndicator 를 다른 위치에 넣아서 유사한 효과를 내는 방법에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 이전 버전 화면은 아래와 같습니다. (붉은색)인디케이터의 이동 경로에 집중해주세요. 화면을 스크롤 다운할때 인디케이터가 사라진다. 이전 버전 화면은 아래와 같습니다. (검은색)인디케이터의 이동 경로에 집중해주세요. 화면을 스크롤 다운할때 인디케이터가 사라지지 않고 이미지와 같이 올라가다가 타이틀 위치로 올라간다. ./src/screens/home/item_detail_page.dart(붉은색 인디케이터 코드) SliverAppBar _imageAppBar(ItemModel2 itemModel) { return .. [Flutter] Clone - 당근마켓39(Item detail & PageView) 이번에는 Item detail page 구현에 필요한 PageView 에 대해서 알아보겠습니다. 이미지가 여러개인 경우, 인디케이터도 같이 구현하는 방법에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 구현한 화면은 아래와 같습니다. 인디케이터를 위해서 추가한 패키지는 아래와 같습니다. smooth_page_indicator: ^1.0.0+2 ./src/screens/home/item_detail_page.dart class _ItemDetailPageState extends State { final PageController _pageController = PageController(); Size? _size; late String newItemKey; .. [Flutter] Clone - 당근마켓38(Item detail & CustomScrollView) 이번에는 CustomScrollView 에 대해서 알아보겠습니다. CustomScrollView 내부에는 slivers[] 를 이용하여 화면을 구역으로 나눠서 각 구역마다 슬라이스를 구현할 수 있다. 일반적으로 slivers 내부에는 Sliver 스타일의 위젯을 넣을수 있다. SliverAppBar 는 기존 AppBar 와 유사한 기능을 하고, 일반 위젯을 사용하려면 SliverToBoxAdapter 으로 wrapping 하여 사용하면 된다. 그 외에도 많은 기능이 있으니 참고하세요. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 구현한 화면은 아래와 같습니다. ./src/screens/home/item_detail_page.dart - appBar 사용안하고, body 에서 C.. 이전 1 2 3 4 5 ··· 7 다음
