Flutter (156) 썸네일형 리스트형 [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.. [Flutter] Clone - 당근마켓37(Item read & Get.arguments) 이번에는 글목록 페이지에서 더미 데이터를 실제 데이터로 변경하는 부분 및 상세 페이지 추가해보겠습니다. 글목록에서 상세페이지로 이동시, arguments 를 통해서 "아이템 키값" 을 전달하는 방법도 구현해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 구현된 화면은 아래와 같습니다. ./src/repo/item_service.dart - 저장된 글목록 로딩 함수 추가 Future getItem(String itemKey) async { if (itemKey[0] == ':') { String orgItemKey = itemKey; itemKey = itemKey.substring(1); logger.d('[${orgItemKey.substring(0, 10)}...].. [Flutter] Clone - 당근마켓36(ItemModel upload - validators) 지난번에 "거래 등록" 화면에 작성한 글/이미지를 Firebase 에 업로드하는것을 구현한 이후 폼빌더 및 검증 패키지 를 이용한 데이터 유효성 검증 방법을 구현해 보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 구현된 화면 이미지는 아래와 같습니다. 이미지와 카테고리 선택에 대한 검증은 if 문으로 처리하였습니다. 필요한 패키지는 아래와 같습니다. flutter_form_builder: ^7.6.0 form_builder_validators: ^8.3.0 ./src/screens/input/input_screen.dart - 전체 코드는 "더보기" 클릭하세요 더보기 import 'dart:typed_data'; import 'package:extended_image/.. [Flutter] Clone - 당근마켓35(ItemModel upload) 이번에는 "거래 등록" 화면에 작성한 글/이미지를 Firebase 에 업로드하는것을 구현해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 구현 화면은 아래와 같다 ./src/repo/item_service.dart - 새로운 글을 저장하는 로직 구현 import 'package:cloud_firestore/cloud_firestore.dart'; import '../constants/data_keys.dart'; import '../models/item_model.dart'; import '../utils/logger.dart'; Future createNewItem(ItemModel2 itemModel, String itemKey, String userKey) asy.. [Flutter] 안드로이드 스튜디오 설정 - 자동완성 기능 추가 안드로이드 스튜디오에서 "stful" 이라고 입력하면 특정 템플릿이 자동으로 생성되는것 처럼 원하는 템플릿을 추가할 수 있다. 1. 설정에서 아래 항목을 찾아서 추가 버튼 클릭. 2. "Live Template" 선택. 3. 템플릿 추가 - 필요한 정보 추가. 4. 타겟 언어 설정 후 완료. 이전 1 2 3 4 5 6 ··· 20 다음
