Navigation Pattern, PageView

1. PageView

PageView는 여러 페이지를 좌우로 스와이프 하여 전환할 수 있는 위젯으로, 페이지 간의 슬라이드 애니메이션을 제공한다. 사용자가 화면을 좌우로 스와이프 하면 다음 페이지로 자연스럽게 이동되며, 페이지 전환이 간단하고 직관적으로 이루어지는 특징이 있다. PageView는 일반적으로 페이지 컨텐츠가 넓은 화면 공간에 맞지 않을 때 사용된다.

 

예를 들어, 앱의 홈 화면이나 이미지 뷰어와 같이 다양한 페이지를 효과적으로 표시해야 할 때 주로 사용된다. 주요 속성으로는 itemBuilder, controller, onPageChanged, physics 등이 있다. itemBuilder는 페이지를 동적으로 생성하는 콜백 함수를 지정하며, controller는 PageView의 컨트롤러를 지정하여 페이지 전환을 관리할 수 있다. onPageChanged는 현재 페이지 인덱스가 변경될 때 호출되는 콜백으로, 페이지 전환 이벤트를 처리하는 데 사용된다. physics는 페이지 스와이프 동작을 제어하는 데 사용되며, 사용자의 스와이프 속도나 스크롤 가능 여부를 설정할 수 있다. PageView는 다양한 앱에서 화면 전환, 페이지 뷰어, 이미지 슬라이더 등의 용도로 활용되며, 사용자 친화적인 인터페이스를 구현하는데 유용한 위젯이다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentPage = 0;
  final List<String> pages = ["Page 1", "Page 2", "Page 3"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PageView Example'),
      ),
      body: PageView.builder(
        itemCount: pages.length,
        onPageChanged: (int index) {
          setState(() {
            _currentPage = index;
          });
        },
        itemBuilder: (context, index) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: List.generate(
                    pages.length,
                        (pageIndex) {
                      return Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: _buildCircleIndicator(pageIndex == _currentPage),
                      );
                    },
                  ),
                ),
                SizedBox(height: 16),
                Text(
                  pages[index],
                  style: TextStyle(fontSize: 24),
                ),
              ],
            ),
          );
        },
      ),
    );
  }

  Widget _buildCircleIndicator(bool isCurrentPage) {
    return Container(
      width: 12,
      height: 12,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: isCurrentPage ? Colors.blue : Colors.grey,
      ),
    );
  }
}