25. [Flutter] PageView List의 item 값 Page형태로 전환시키기

PageView

PageView는 여러 페이지를 가로 또는 세로로 스크롤하여 전환할 수 있도록 해줍니다. 주로 이미지 갤러리, 사용자 안내 등 다양한 상황에서 사용됩니다.

• controller: PageController를 지정합니다. PageController는 페이지의 전환을 제어하는 Widget입니다.
• children: PageView에 표시할 Widget의 목록입니다.
• scrollDirection: 스크롤 방향을 지정합니다. scrollDirection은 horizontal, vertical 중 하나를 선택할 수 있습니다.
• pageSnapping: 페이지가 전환될 때 페이지를 정지시키는 여부를 지정합니다. pageSnapping은 true, false 중 하나를 선택할 수 있습니다.
• viewportFraction: 페이지의 가로 너비 또는 세로 높이를 지정합니다. viewportFraction은 0.0에서 1.0 사이의 값을 지정할 수 있습니다.
• pageBuilder: 페이지를 생성하는 함수입니다. pageBuilder 함수는 currentPage 인자를 받아 현재 페이지의 인덱스를 전달받습니다.
• children 또는 itemBuilder: children을 사용하여 각 페이지의 위젯을 정적으로 지정하거나, itemBuilder를 사용하여 동적으로 페이지를 생성할 수 있습니다. 
  itemBuilder는 페이지 인덱스를 매개변수로 받아 해당 페이지의 위젯을 반환합니다.
• onPageChanged: 페이지 전환이 발생할 때 호출되는 콜백 함수를 지정합니다. 현재 페이지 인덱스를 매개변수로 받아 추가 동작을 수행할 수 있습니다.

---

 

예시.

import 'package:flutter/material.dart';

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

  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  final colorList = [
    Colors.red,
    Colors.amber,
    Colors.blue,
    Colors.purple,
    Colors.green
  ];
  final PageController _pageController = PageController();
  void _onPageChanged(int index) {
    setState(() {
      if (index == 10) {
        _pageController.animateToPage(0,
            duration: const Duration(seconds: 2), curve: Curves.bounceOut);
      }
      if (index == colorList.length - 1) {
        colorList.add(Colors.brown);
        colorList.add(Colors.deepOrange);
        colorList.add(Colors.cyan);
      }
    });
  }

  @override
  void initState() {
    _pageController.addListener(
      () {
        _onPageChanged;
      },
    );
    super.initState();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
        scrollDirection: Axis.vertical,
        onPageChanged: _onPageChanged,
        itemCount: colorList.length,
        controller: _pageController,
        itemBuilder: (context, index) {
          return Center(
            child: Container(
              decoration: BoxDecoration(color: colorList[index]),
              child: Center(
                child: Text(
                  'index: $index',
                  style: const TextStyle(
                      fontSize: 32, fontWeight: FontWeight.bold),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

설명.

• 이 예시 코드는 TestScreen 클래스를 정의하고, 그 안에서 PageView.builder를 사용하여 페이지 전환 애니메이션을 적용합니다. colorList라는 리스트에 다양한 색상을 저장하고, PageController를 생성하여 페이지 전환을 관리합니다.
• _onPageChanged 메서드는 현재 페이지 인덱스를 매개변수로 받고, 페이지 전환에 따라 상태를 업데이트합니다. 예를 들어, 인덱스가 10일 경우 페이지를 처음으로 돌아가는 애니메이션을 실행합니다. 인덱스가 colorList의 길이에서 1 뺀 값과 같을 경우, 추가적인 색상을 colorList에 추가합니다.
• initState 메서드에서는 _pageController의 리스너를 등록하여 페이지 전환 이벤트를 감지하고, _onPageChanged 메서드를 호출합니다. dispose 메서드에서는 _pageController를 정리합니다.
• build 메서드에서는 PageView.builder를 사용하여 페이지를 렌더링합니다. scrollDirection 속성을 Axis.vertical로 설정하여 세로 방향으로 스크롤할 수 있도록 합니다. onPageChanged 콜백은 페이지 전환이 발생할 때 _onPageChanged 메서드를 호출합니다. itemCount는 colorList의 길이를 지정하고, controller는 _pageController를 사용합니다. itemBuilder에서는 각 페이지에 해당하는 컨텐츠를 만들어 반환합니다. 여기서는 각 페이지의 배경색과 인덱스를 표시하는 텍스트를 출력합니다.
• 이렇게 구성된 TestScreen 위젯을 앱의 메인 위젯으로 사용하면 페이지 전환 애니메이션을 포함한 페이지 스크롤 화면을 만들 수 있습니다.

---

빌드.