깡샘의 플러터&다트 프로그래밍 12-3

페이지 뷰

페이지 뷰란?

페이지 뷰는 리스트 뷰와, 그리드 뷰와 같이 항목을 나열하는 위젯이다. 차이점은 항목을 하나만 보여주며 왼쪽, 오른쪽으로 밀면 차례로 하나씩 위젯이 나오게 된다.

• PageView의 children에 여러 위젯을 지정한다.
• PageController 객체에 맨 처음 보일 페이지 지정
  • initialPage 속성을 1로 설정 -> 위젯 인덱스 1번
  • viewportFraction 속성은 화면 차지 비율
    • ex) viewportFraction: 0.8 -> 현재 페이지가 80%, 앞 뒤 페이지가 20% 차지한다.

페이지 뷰 활용하기

import 'package:flutter/material.dart';

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

class ch12_3 extends StatelessWidget {
  PageController ax = PageController(
    initialPage: 0,
    viewportFraction: 0.8,
  );

  ch12_3({super.key});
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('practice'),
        ),
        body: PageView(
          controller: ax,
          children: [
            Container(
              color: Colors.red,
              margin: const EdgeInsets.all(20),
              child: const Center(
                child: Text(
                  'First Page',
                  style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.white),
                ),
              ),
            ),
            Container(
              color: Colors.yellow,
              margin: const EdgeInsets.all(20),
              child: const Center(
                child: Text(
                  'Second Page',
                  style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.white),
                ),
              ),
            ),
            Container(
              color: Colors.green,
              margin: const EdgeInsets.all(20),
              child: const Center(
                child: Text(
                  'Third Page',
                  style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.white),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}