[Flutter] PageView class (scrollable page list)

Define PageView class

PageView는 스와이프를 통해 하위 위젯들을 렌더링 할 수 있는 UI Widget 입니다. 보통 한 화면에 한 페이지를 구현하는데, PageView를 사용하면 한 화면에서 여러 페이지를 책처럼 넘겨볼 수 있도록 구현할 수 있습니다.

- 스크롤 가능한 페이지 리스트

- 각 하위 위젯들은 강제로 같은 사이즈가 됩니다.

- PageView를 제어할 수 있는 PageController를 제공해 줍니다.

- Ex) 인스타 스토리, 스크롤 되는 앱 상단 광고 배너 등

- PageView + Timer 는 일정 시간 마다 넘어가는 광고 배너를 만들 수 있다.

 

 

 

 

 

 

---

 

 

Function

1) 페이징 방향 변경(scrollDirection: Axis.vertical)

2) 페이지 넘김 보정 끄기(pageSnapping: false)

3) 스크롤 행위 제어

4) PageView padding value 지정

5) 방향 반대

6) 페이지 변경 시점마다 실행되는 함수 (ex: 애니메이션 삽입 등)

..등등

 

 

 

---

 

 

Example Code

 

import 'package:flutter/material.dart';

class MyPageView extends StatefulWidget {
  const MyPageView({Key? key}) : super(key: key);

  @override
  State<MyPageView> createState() => _MyPageViewState();
}

class _MyPageViewState extends State<MyPageView> {
  final PageController controller = PageController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: PageView(
          controller: controller,
          children: [1, 2, 3, 4, 5]
              .map((int num) => Image.asset('assets/img/image_$num.jpeg'))
              .toList(),
        ),
      ),
    );
  }
}

 

 

 

 

---

 

 

 

Reference

 

https://api.flutter.dev/flutter/widgets/PageView-class.html

PageView class - widgets library - Dart API

 

https://spiralmoon.tistory.com/entry/Flutter-여러-페이지를-한-화면에서-PageView

[Flutter] 여러 페이지를 한 화면에서, PageView