[Flutter] 페이지뷰(PageView) 사용하기

 

페이지뷰(PageView)

여러 페이지를 한 화면에서 구현할 수 있도록 하여 한 화면에서 페이지를 슬라이드로 볼 수 있게 하는 위젯(Widget) 

 

 

 

1. PageviewPage.dart

 

PageController를 만들고 PageView에 연결하여야 합니다. 
PageController는 PageView가 보여줄 첫 페이지를 설정하거나 페이지 넘김을 트리거 할 수 있습니다.

 

PageView.builder(
     controller: PageController(
        initialPage: 0,  //시작 페이지
     ),
     itemCount: ,   //페이지 수
     itemBuilder: (BuildContext context, int index) { ... },  //page 의 반목문 항목 형성
),

이 형태를 사용합니다.

import 'package:flutter/material.dart';

import 'model/BearItem.dart';

final bearItem = {
  "list": [
    {"image": "assets/images/img_blue.png", "name": "파랑이"},
    {"image": "assets/images/img_mint.png", "name": "민트트"},
    {"image": "assets/images/img_skyblue.png", "name": "하늘이"},
    {"image": "assets/images/img_white.png", "name": "하양이"},
    {"image": "assets/images/img_pink.png", "name": "분홍이"},
    {"image": "assets/images/img_yellow.png", "name": "노랑이"},
    {"image": "assets/images/img_purple.png", "name": "보라라"},
    {"image": "assets/images/img_mix.png", "name": "믹스스"}
  ]
};
BearList? bearList;

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

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

class _PageviewPageState extends State<PageviewPage> {
  @override
  Widget build(BuildContext context) {
  
    bearList = BearList.fromJson(bearItem);
    
    return new Material(
      child: Scaffold(
        appBar: AppBar(
          title: Text('PageviewPage'),
        ),
        body: PageView.builder(
          controller: PageController(
            initialPage: 0, //시작 페이지
          ),
          itemCount: bearList!.list!.length,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              color: Colors.blue[200],
              child: Image.asset(
                bearList!.list!.elementAt(index).image!,
              ),
            );
          },
        ),
      ),
    );
  }
}

 

 

 

결과 화면

 

 

 

🐻🐻🐻🐻🐻🐻