Flutter - #32. PageView

Pearl Lee·2021년 7월 13일

Flutter Widget

목록 보기

31/50

내가 보려고 쓰는 Flutter 일기
참고1 : https://api.flutter.dev/flutter/widgets/PageView-class.html

PageView

오늘 배워볼 건 PageView
여러 페이지를 보여주는 스크롤 가능한 영역이다. 좌우, 또는 상하로 밀었을 때 다음 페이지가 뜨는 것이다. 평소 앱을 사용할 떄, 여러 장의 사진을 한 프레임 안에서 좌우로 밀어서 볼 때를 생각하면 된다.

예시를 보면 바로 이해가 된다. 코드로 넘어가보자

코드 예시로 알아보자

공식 페이지에서 제공하는 코드를 가져다가 조금 수정해서 돌려보았다.

PageView 기본 생성자


import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Text PageView';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const PageViewWidget(),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class PageViewWidget extends StatelessWidget {
  const PageViewWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final PageController controller =
    PageController(initialPage: 0, viewportFraction: 0.8);
    
    return PageView(
      scrollDirection: Axis.horizontal,
      controller: controller,
      children: <Widget>[
        Container(
          color: Colors.blue.withOpacity(0.5),
          child: Center(
            child: Text('첫 번째 페이지',style: TextStyle(fontSize: 50),),
          ),
        ),
        Container(
          color: Colors.orangeAccent.withOpacity(0.5),
          child: Center(
            child: Text('두 번째 페이지',style: TextStyle(fontSize: 50),),
          ),
        ),
        Container(
          color: Colors.cyanAccent.withOpacity(0.5),
          child: Center(
            child: Text('세 번째 페이지',style: TextStyle(fontSize: 50),),
          ),
        ),
      ],
    );
  }
}

2번 일기에서 썼던 ListView와 참 비슷하게 생겼다... builder 생성자 있는 것 마저도 똑같다.
다른 점은 PageView는 controller를 쓴다는 것! (하지만 꼭 쓰지 않아도 된다.)

final PageController controller =
    PageController(initialPage: 0, viewportFraction: 0.8);

initialPage는 앱 처음 빌드 때 몇번째 페이지를 먼저 보여줄 것인지 결정한다. 0이면 맨 처음 자식 요소를 보여준다.
viewportFraction 은 자식 요소로 넣어둔 페이지가 보여지는 영역이 얼마나 되는지를 결정한다. 이 속성 때문에 배경색이 보이도록 코드를 조금 손대보았다. 실행화면을 보자.

viewportFraction : 0.8	viewportFraction : 1

이제 builder 생성자를 보자.

PageView.builder

ListView.buider와 쓰는 방법이 비슷하다. 자식요소들을 하나하나 나열하지 않고 itemBuilder로 페이지를 와그르르 만든다. 코드를 바로 보자.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Text PageView';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const PageViewWidget(),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class PageViewWidget extends StatefulWidget {
  const PageViewWidget({Key? key}) : super(key: key);

  @override
  _PageViewWidgetState createState() => _PageViewWidgetState();
}

class _PageViewWidgetState extends State<PageViewWidget> {
  int currentPage = 0;
  List<String> pageName = ["First Page", "Second Page", "Third Page"];

  final PageController controller =
  PageController(initialPage: 0, viewportFraction: 0.8);

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      controller: controller,
      onPageChanged: (value) {
        setState(() {
          currentPage = value;
        });
      },
      itemCount: pageName.length,
      itemBuilder: (context, index) {
        return Container(
          color: Colors.blue.withOpacity(index * 0.1),
          child: Center(
            child: Text(
              pageName[index],
              style: TextStyle(fontSize: 50),
            ),
          ),
        );
      },
    );
  }
}