[Flutter]PageView

들어가며

이번에 소개시켜드릴 위젯은 PageView 위젯입니다. 이름 그대로 페이지를 보여주는 위젯입니다. 이전에 소개해준 BottomNavigationBar는 항목을 클릭하면 화면을 바꿔줬지만, 양 옆으로 스크롤하면서 여러 화면을 보여주는 위젯입니다.

환경 구성

PageView를 사용해보기 위해서 페이지를 하나 만들어 줍니다.

import 'package:flutter/material.dart';

class PageViewPage extends StatelessWidget {
  const PageViewPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PageView'),
      ),
      body: Container(),
    );
  }
}

PageView

우선, body에 전달된 Container위젯을 지우고, PageView 위젯을 전달하겠습니다.

import 'package:flutter/material.dart';

class PageViewPage extends StatelessWidget {
  const PageViewPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PageView'),
      ),
      body: PageView(),
    );
  }
}

PageView는 역시 여러화면을 보여주어야 하기 때문에 child가 아니라 children을 자식들로 갖게 됩니다. 즉, children을 선언해 줍니다. 그리고 children에는 각각의 화면을 담당할 위젯을 전달하면 됩니다. 저희는 각각 다른 화면인 것을 확인하기 위해서 배경색을 다르게 할 것이고, 1페이지 ~ 3페이지라고 화면에 그려줄 겁니다.

children에 전달할 위젯으로 Container 3개를 전달하겠습니다.

...
   ),
      body: PageView(
        children: [
          Container(),
          Container(),
          Container(),
        ],
      ),
    );
...

Container는 각각 Text위젯으로 1페이지, 2페이지, 3페이지를 중앙에 그려줄겁니다. 그리고 각각 red, green, blue색상을 전달하겠습니다.

...
      ),
      body: PageView(
        children: [
          Container(
            color: Colors.red,
            child: Center(
                child: Text(
              '1페이지',
              style: TextStyle(fontSize: 40),
            )),
          ),
          Container(
            color: Colors.green,
            child: Center(
                child: Text(
              '2페이지',
              style: TextStyle(fontSize: 40),
            )),
          ),
          Container(
            color: Colors.blue,
            child: Center(
                child: Text(
              '3페이지',
              style: TextStyle(fontSize: 40),
            )),
          ),
        ],
      ),
    );
...

이제 핫 리로딩 후, 확인하겠습니다.

이제 페이지를 옆으로 스크롤 하면 다른 페이지도 잘 나오는 것을 확인할 수 있습니다.

더 자세한 사항은 공식문서를 통해서 확인할 수 있습니다!
PageView 공식문서

전체 소스코드

import 'package:flutter/material.dart';

class PageViewPage extends StatelessWidget {
  const PageViewPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PageView'),
      ),
      body: PageView(
        children: [
          Container(
            color: Colors.red,
            child: Center(
                child: Text(
              '1페이지',
              style: TextStyle(fontSize: 40),
            )),
          ),
          Container(
            color: Colors.green,
            child: Center(
                child: Text(
              '2페이지',
              style: TextStyle(fontSize: 40),
            )),
          ),
          Container(
            color: Colors.blue,
            child: Center(
                child: Text(
              '3페이지',
              style: TextStyle(fontSize: 40),
            )),
          ),
        ],
      ),
    );
  }
}