Flutter - #32. PageView

Pearl Lee·2021년 7월 13일
1

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';

  
  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);

  
  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.8viewportFraction : 1
100300

이제 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';

  
  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);

  
  _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);

  
  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),
            ),
          ),
        );
      },
    );
  }
}

위의 실행코드와 유사하게 만들어보았다. 실행화면은 아래와 같다.

controller 사용controller 미사용
100300

이번에는 controller를 지워보았는데, initialPage가 0으로 자동 설정되는 거랑 viewportFraction 가 1로 설정되는 것 뿐 없어도 상관없다. PageView 기본 생성자에도 마찬가지다. 없어도 됨! 그렇다면 난 안 쓰고 싶...어








오늘의 일기는 여기까지!

profile
안 되면 되게 하라

1개의 댓글

comment-user-thumbnail
2022년 10월 2일

감사합니다. ㅎㅎ

답글 달기