Flutter - Loop PageView

PageView를 쓸 때 Loop가 되도록 만들고 싶을 때가 있습니다

 

그래서 관련 패키지와 stackoverflow같은곳을 찾아보니 거의 다

 

본문과 같은 방식으로 처리를 했더군요

 

동일하다면 굳이 패키지를 사용하지 않고 구현하는게 좋지 않을까 해서

 

이번 예제를 만들어봤습니다

import 'package:flutter/material.dart';

class LoopPageView extends StatefulWidget {
  final String title;

  LoopPageView(this.title);

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

class _LoopPageViewState extends State<LoopPageView> {
  PageController _controller = PageController(initialPage: 500);

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: PageView.builder(
          controller: _controller,
          itemBuilder: (_, index) {
            return Center(
                child: Text('Page - ${index % 5}',
                    style: TextStyle(
                        color: (index % 5 == 0) ? Colors.blue : Colors.black,
                        fontSize: 20)));
          }),
    );
  }
}

< 간단한 화면 >

 

간단한 예제인데 주목해야될 부분은 controller의 initialPage값

 

그리고 itemCount값을 주지 않은것 그리고 index처리 부분을 보시면 됩니다

 

itemCount에 아무런 값을 넣지않으면 거의 무한으로 index가 할당이 되고

 

index % value를 이용해서 원하는 만큼의 범위를 지정해줍니다

 

그리고 마지막으로 controller의 init값에 조금 높은값을 줘서

 

0에서 마지막 index로 이동할 수 있도록 해주면 됩니다