[Flutter] PageView를 이용해서 Instagram 릴스 같은 페이지를 만들어보자

아래 GIF는 인스타그램의 릴스 페이지를 보여주는 부분인데

저렇게 한 페이지, 페이지를 밑으로 내려서 구현하는 것을 해보려고 하는데
Flutter에서는 저 부분을 구현하기 쉽게 PageView 라는 Widget을 이용해서 구현할 수 있다.

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

PageView class - widgets library - Dart API

구현 코드 및 구현 영상은 아래와 같다.

import 'package:flutter/material.dart';

class VideoTimelineScreen extends StatefulWidget {
  const VideoTimelineScreen({super.key});

  @override
  State<VideoTimelineScreen> createState() => _VideoTimelineScreenState();
}

class _VideoTimelineScreenState extends State<VideoTimelineScreen> {
  int _itemCount = 4;

  List<Color> colors = [
    Colors.blue,
    Colors.yellow,
    Colors.teal,
    Colors.red,
  ];

  final PageController _pageController = PageController();

  void _onPageChanged(int page) {
    _pageController.animateToPage(
      page,
      duration: const Duration(milliseconds: 150),
      curve: Curves.linear,
    );
    if (page == _itemCount - 1) {
      _itemCount = _itemCount + 4;
      colors.addAll(
        [
          Colors.blue,
          Colors.yellow,
          Colors.teal,
          Colors.red,
        ],
      );

      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      controller: _pageController,
      scrollDirection: Axis.vertical,
      itemCount: _itemCount,
      onPageChanged: _onPageChanged,
      itemBuilder: (context, index) => Container(
        color: colors[index],
        child: Center(
          child: Text("Screen $index"),
        ),
      ),
    );
  }
}