# PageView

tjddus5767

페이지 뷰 페이지 뷰란? > 페이지 뷰는 리스트 뷰와, 그리드 뷰와 같이 항목을 나열하는 위젯이다. 차이점은 항목을 하나만 보여주며 왼쪽, 오른쪽으로 밀면 차례로 하나씩 위젯이 나오게 된다. PageView의 children에 여러 위젯을 지정한다. PageController 객체에 맨 처음 보일 페이지 지정 initialPage 속성을 1로 설정 -> 위젯 인덱스 1번 viewportFraction 속성은 화면 차지 비율 ex) viewportFraction: 0.8 -> 현재 페이지가 80%, 앞 뒤 페이지가 20% 차지한다. <img src ="https://github.com/tjddus5767/Picture/assets/123969184/67ef3a2c-2ffd-4d65-9233-1d3e82de02c0" width = "250" height = "500"

tygerhwang

Tab & Page View에서 BLoC 사용 방법 flutter_bloc | Flutter Packages 예제로 배워보는 BLoC Pattern이란 ? Count App With BLoC Count App With Cubit 이번 글에서는 Tab & Page View에서 Bloc Pattern을 사용하는 방법에 대해서 살펴보도록 하겠다. Bloc 패턴 사용시 어느 시점에 Bloc을 생성해 줘야 하는지에 따라서 Bloc이 탭을 떠났을 때에 Dispo

tygerhwang

Calander(달력) 만들어 보기 Date Picker 만들어 보기 (Cupertino UI) 이번 글에서는 Calander를 만들어 보도록 하겠다. Flutter에서는 달력을 기본적으로 제공하고 있는데, 직접 만들어 보고 싶다면 글을 참고해서 나만의 달력을 만들도로 해보자. Cupertino 디자인의 달력을 원하면, 이전에 작성했던 글을 참고하길 바라며, 여기서는 Material 디자인 달력을 만들도록 하겠다. 글로벌 릴리즈 서비스라면 달력을 만드는 작업도 고난이도의 개발 영역으로 볼 수 있다. 국가마다의 공휴일이 다르고, Direction, DateTime 등 고려해야 할 사항이 너무 많다. 그래서 여기서는 대한민국을 기준으로 개발을 할 것이고, UI는 보여줄 수 있는 수준으로만 만들었다. 해당 코드를 가져다 커스텀해서 사용하셔도 되고, 로직만 가져다 사

zinkiki

위 올라온 예시는 조금 이상하지만 예쁘게 봐주시구요😅 먼저 사용한 indicator 라이브러리는 [smoothpageindicator] (https://pub.dev/packages/smoothpageindicator) 입니당 코드로 보자면, PageView Indicator 우와~ 매우 쉽져?? 참고로 이 라이브러리에는 엄청 귀여운 indicator 애니메이션들이 있답니당 ![](https://velog.velcdn.com/images/zinkiki/post/4f23f5e6-e01f-4e54-8fc2-

dnjsry8377

body: PageView( children: [1,2,3,4,5].map((e)=> Image.asset('asset/img/image_$e.jpeg', fit: BoxFit.cover, ),).toList() ) fit: BoxFit.cover >> 화면을 꽉 채움, 단 비율을 맞추기 위해 짤릴 수 있다 @override void initState() { super.initState(); timer=Timer.periodic(Duration(seconds: 1), (timer) { print('Timer!'); }); } ) 처음에 부모 클래스의 initSate()를 실행시킨다 ) Timer.periodic(Duration(seconds: 1), (timer) { print('Timer!');}) >> 1초를 주기로

tygerhwang

Custom Slider Widget 만들기(2) 이번 글에서는 수평으로 하나의 사이즈가 큰 이미지를 백그라운드 배경으로 사용하면서 페이지 뷰 처럼 수평으로 슬라이딩 할 수 있는 위젯을 소개하려고 한다. 아래 공유한 결과물을 확인하면 이해가 될 것이다. 백프로 완성된 상태는 아니다. 애니메이션이 부자연스러운 부분이 있어, 이 부분의 개선은 필요하다. 실제로 이런 뷰가 필요하여 우선 개발을 해본 상태이고, 나중에 실제 사용될 때에 완성된 상태로 다시 글을 추가할 예정이다. Custom Slider Widget 만들기(1) Flutter 먼저 해당 슬라이더 뷰를 구현하기 위해 필요한 뷰의 갯수인 itemCount와 items를 필수로 받아와야 한다. 슬라이더를 구현하기 위한 스와이프 기능 사용에 현재 position과 index 값을 선언하여 해당

tygerhwang

Custom Slider Widget 만들기(1) Custom Slider Widget 만들기(2) carousel_slider | Flutter Package 이번 글에서는 Slider 위젯을 만들어 보려고 한다. 결과물이 궁금하신 분은 글 아랫 부분에 구현된 영상을 올려놨습니다. 기존 Flutter 기본 위젯으로 슬라이더가 가능한 스와이프 위젯을 만들 수 있다. PageView 위젯을 사용하여 만들 수도 있고 유명한 라이브러리인 carousel_slider 라이브러리를 사용해서도 이러한 UI는 쉽고 빠르게 만들어 볼 수 있다. carousel_slider 라이브러리도 생성 기반은 PageView를 기반으로 하고 있고, PageView를 사용하다 보니 한 가지 문제점이

tygerhwang

Tab View 만들기(4) - Custom 2탄 Tab View 만들기(1) - Tabbar Tab View 만들기(2) - PageView Tab View 만들기(3) - Custom 1탄 1편에 이어서 로직 부분에 해당되는 GetController의 코드를 만들어 보자. 작성된 코드는 최대한 복잡하지 않게 작성을 하였지만, 이해가 어려우시다면 Git 클론해서 직접 실행해보면서 값을 변경해 보면 이해가 될 것이다. 자 한번 작성해보자. Flutter 작성에 앞서 상태관리를 하여야하는 부분이 1탄에서 작성한 UI부분에 필요한 Cus

tygerhwang

Tab View 만들기(3) - Custom 1탄 Tab View 만들기(1) - Tabbar Tab View 만들기(2) - PageView Tab View 만들기(4) - Custom 2탄 Tab View 시리즈의 마지막은 직접 TabBarView 부분을 만들어 보려고 한다. 이전 글에서 PageView로 Tab View를 구현할 때는 상단 TabBar 부분을 직접 만들었지만 인디케이터의 포지셔닝 까지 PageView의 움직임과 싱크를 맞추지는 않았었는데, 이번에는 여기 부분도 싱크가 맞춰질 수 있도록 개발을 해보겠다. 우선 Tab Vie

tygerhwang

Tab View 만들기(2) - PageView Tab View 만들기(1) - Tabbar Tab View 만들기(3) - Custom 1탄 Tab View 만들기(4) - Custom 2탄 이전 글에 이어서 이번에는 Tab View를 PageView를 활용하여 만드는 방법에 대해서 소개하도록 하겠다. 여기서는 PageView로 만들기 때문에 TabBar도 직접 커스텀해서 만들어 볼 예정이다. 사실 TabBarView 위젯을 보면 PageView로 개발이 되어있기도 하고 TabBarView, PageView 작동 방식이 거의 비슷하다고 볼

tygerhwang

Tab View 만들기(1) - Tabbar Tab View 만들기(2) - PageView Tab View 만들기(3) - Custom 1탄 Tab View 만들기(4) - Custom 2탄 이번 글 부터 Tab View를 만드는 방법에 대해서 작성하도록 하겠다. Tab View는 앱을 만들다 보면 거의 무조건 사용을 해야하는 위젯 중에 하나라고 볼 수 있는데, Tab View가 조금의 다른 UI 구조로 개발을 하려고 하면 잘 안되서 결국 직접 만들어 쓰는 경우도 있었다. Tab View를 가장 쉽고 간단하게 사용하는 방법은 바로 Fl

dc143c_dev

0. 포트폴리오용 만보기 앱을 만들다가 구현하고픈 아이디어가 떠올랐다. 대부분의 만보기 앱은 유저가 가장 자주 보게 될 홈 화면에 유저가 걸어온 총 걸음의 수와 목표 걸음 수 등을 표시하곤 한다. 경우에 따라 프로필 사진 또는 인증샷을 첨부할수 있게 하거나, 진행도를 그래프로 보여주는 UI를 추가하는 경우도 더러 있다. > **이번에 직접 구현해본 UI. 총 걸음 수 인디케이터, 목표 걸음 수 인디케이터, 표시용 텍스트로 구성되어있다.** 구현하고픈 아이디어라는건 저 인디케이터 UI의 색상을 유저가 마음대로 커스텀할수 있게 만드는 것. 정확한 목표는 여러가지 디자인의 인디케이터 UI를 미리 구현해두고, 유저가 커스텀 페이지에서 걸음 수, 포인트 인디케이터와 텍스트의 색상을 설정하면 UI에

tygerhwang

무한 스크롤 만들기 - PageView 스크롤 인디케이터 - Vertical 스크롤 인디케이터 - Horizontal 무한 스크롤 만들기 - Vertical 무한 스크롤 만들기 - Horizontal 이번에는 PageView 구조에서 무한 스크롤 기능을 만들어 보려고 한다. 앞서 만들었던 무한 스크롤들과 크게 다를 건 없는 기능이다. Data Lorem Picusm

songoori

Flutter 위젯 중 PageView에 대해 알아보자. 출처 https://youtu.be/J1gE9xvph-A https://api.flutter.dev/flutter/widgets/PageView-class.html PageView PageView는 페이지 단위로 스크롤 할 수 있는 화면을 그려준다. PageView에 들어가는 페이지들은 모두 뷰포트(viewport) 사이즈로 화면에 보이게 된다. > 뷰포트(ViewPort)란 현재 보고 있는 화면의 영역을 나타낸다. 모바일 뷰포트는 브라우저 창보다 크거나 작고, 상하 좌우로 움직이거나, 더블탭, 줌인, 줌아웃을 통해 뷰포트의 배율을 변경할 수 있다. Pageiew는 `PageController

sangh518

PageView를 사용하다 보면 좌우 여백에 이전, 다음 페이지를 보이게 하고 싶을 때가 있다. 이때는 PageView의 PageController 생성자에 viewportFraction 값을 주는 것으로 설정할 수 있다. viewportFraction은 0-1까지의 값을 가지며, 1에 가까울 수록 페이지 전체를 차지하게 된다.

tygerhwang

Custom Slide Screen customslidewidget.dart Example Result