Flutter PageView 위젯

오늘은 PageView 위젯에 대해 알아보도록 하자

 

PageView 위젯은 여러 위젯을 페이지를 통해 구분해주는 위젯이다.

children 파라미터 안에 위젯들을 넣어주면, 앱에서 슬라이드를 통해 페이지 넘기듯이 위젯들을 볼 수 있다.

예제로써는 이전 글에서 만든 카운터 앱을 좀 더 발전시킨 버전을 사용한다.

2개의 페이지로 구성되며 첫 번째 페이지는 화면에 counter app이라고 쓰여 있는 페이지이고, 두 번째 페이지는 저번 글에서 만든 카운터 페이지이다.

 

카운터에 대한 내용은 저번 글을 참고하자

2023.06.24 - [단기 프로젝트] - 프로젝트 1_2. Flutter StatefulWidget

프로젝트 1_2. Flutter StatefulWidget

 

완성된 앱은 다음과 같다.

왼쪽 : 제목 페이지, 오른쪽 : 카운터 페이지

왼쪽이 제목이 띄워져 있는 페이지이고, 오른쪽 페이지가 카운터 페이지이다.

화면을 좌우로 슬라이드하면 화면이 바뀐다.

 

우선 다음과 같이 폴더와 파일을 만들어준다.

여러 개의 화면을 써야 하기 때문에 보기 쉽게 화면 별로 dart 파일을 만들어준다.

각각의 화면은 다음의 역할을 맡는다.

• counter.dart : Counter 화면과 기능을 구성한다.
• home.dart : 제목 페이지를 구성한다.
• pageView.dart : PageView 위젯을 이용해 counter 와 home 페이지를 하나로 묶어준다.
• main.dart : 앱이 처음 실행되는 파일

지금부터는 화면 별로 코드를 살펴본다.

 

1. main.dart

import 'package:flutter/material.dart';
import 'package:flutter_example/Screen/pageView.dart';

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

main.dart는 아주 간단한 코드로 이루어져 있다.

다른 파일에서 선언한 클래스를 불러오기 위해 pageView.dart 파일을 import 했다.

 

처음 실행하는 위젯은 PageViewWidget에서 리턴하는 위젯이다.

 

2. home.dart

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  HomePage({Key? key}):super(key: key);

  @override
  Widget build(BuildContext context){
    return const Center(
          child: Text(
            "Counter App",
            style: TextStyle(
              fontSize: 70,
              color: Colors.blue,
            ),
          ),
        );
  }

}

다음은 제목 페이지이다.

 

StatelessWidget으로 이루어졌으며, Text 위젯을 자식으로 가지는 Center 위젯을 리턴한다.

텍스트는 가운데 정렬 되며, 70의 크기를 가지고 있고, 파란색이다.

 

StatelessWidget에 대해서는 다음 글을 참고한다.

2023.06.23 - [분류 전체보기] - 프로젝트 1_2. Flutter WebView

프로젝트 1_2. Flutter WebView

 

3. counter.dart

다음은 counter 페이지를 생성하는 파일이다.

import 'package:flutter/material.dart';

int _count=0;

class CounterPage extends StatefulWidget{
  const CounterPage({Key? key}): super(key: key);

  @override
  State<CounterPage> createState()=> _CounterPageState();

}

class _CounterPageState extends State<CounterPage> {

  @override
  Widget build(BuildContext context) {
    return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(
                "$_count",
                style: const TextStyle(
                    fontSize: 30.0
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  OutlinedButton(
                    onPressed: (){
                      setState(() {
                        _count--;
                      });
                    },
                    child: const Text(
                        "Down"
                    ),
                  ),
                  OutlinedButton(
                    onPressed: (){
                      setState(() {
                        _count = 0;
                      });
                    },
                    child: const Text(
                        "Reset"
                    ),
                  ),
                  OutlinedButton(
                    onPressed: (){
                      setState(() {
                        _count++;
                      });
                    },
                    child: const Text(
                        "Up"
                    ),
                  ),
                ],
              ),
            ],
          ),
        );
  }

}

기본 적인 코드는 이전 글에서 짰던 코드와 동일하다.

 

다만 하나 다른 부분이 _counter 변수를 선언하는 부분이다.

_counter가 클래스 안에 있을 경우 화면이 넘어가면 위젯의 생명주기가 끝나 초기화 되기 때문에, 카운트 값이 유지가 되지 않는다.

이 현상을 방지하기 위해 클래스 바깥에 변수를 선언해주었다.

 

4. pageView.dart

import 'package:flutter/material.dart';
import 'package:flutter_example/Screen/counter.dart';
import 'package:flutter_example/Screen/home.dart';


class PageViewWidget extends StatefulWidget {
  PageViewWidget({Key? key}):super(key: key);

  @override
  State<PageViewWidget> createState() => _PageViewState();
}

class _PageViewState extends State<PageViewWidget> {

  final PageController _pageController = PageController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Counter app"),
          centerTitle: true,
        ),
        body: PageView(
          controller: _pageController,
          children: [
            HomePage(),
            CounterPage(),
          ],
        )
      ),
    );
  }
}

이번엔 PageView 위젯을 사용한 클래스를 살펴본다.

 

StatefulWidget에 대해 간단히 집고 넘어가면 StatefulWidget은 상태가 있는 함수로 변화가 있을 때 build가 다시 실행이 되는 위젯이다.

생성자와 상태가 필요하며, override 된 부분이 상태를 나타내고,

그 위의 코드가 생성자를 나타낸다.

 

StatefulWidget 아래에 있는 클래스는 StatefulWidget의 상태클래스이다.

여기서는 Widget을 반환해준다.

 

우리가 주목해야 하는 부분은 pageController 부분과 PageView 위젯이 있는 부분이다.

PageController()는 PageView의 컨트롤러를 생성해준다.

이 컨트롤러는 우리가 페이지를 넘기는 것이 가능하도록 해준다.

 

컨트롤러를 적용해주기 위해 controller: 파라미터에 앞서 선언해준 _pageController를 넣어준다.

그 다음 children 안에 우리가 위해서 만든 두 위젯을 넣어준다.

이렇게 하면 순서대로 위젯이 각각의 페이지에 들어간다.

 

간단하게 살펴보면 PageView를 사용하기 위해서는 다음의 과정이 필요하다.

1. StatefulWidget과 그 상태 클래스 생성
2. pageController()를 이용해 PageView의 컨트롤러 생성
3. PageView에 컨트롤러를 적용
4. children 안에 페이지 안에 넣을 위젯 넣기

예제를 생성하기까지의 코드가 길 뿐이지, PageView 자체는 쓰기 어렵지 않은 위젯이다.