본문 바로가기

pageview

(3)
[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 - 당근마켓3(PageView) 이번에는 PageView 에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 기본 화면은 아래와 같습니다. ./src/screens/auth_screen.dart import 'package:flutter/material.dart'; class AuthScreen extends StatelessWidget { const AuthScreen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: PageView( children: [ const Center( child: Text( 'AuthScreen', style: TextStyle(..