[내용추가 필요]PageView

 

PageView위젯은 화면에 Scrollable 위젯을 보여줍니다. PageView 위젯은 고정된 리스트 일수도 있고, builer 함수를 통해서 페이지를 계속 만들 수도 있습니다. PageView는 요소 구성 측면에서 ListView와 비슷하게 동작합니다.

 

 

3가지 생성자

   -. PageView

   -. PageView.builder

   -. PageView.custom

 

 

1. PageView (디폴트 생성자) : 이 형태는 하위의 고정된 리스트들을 스크롤 가능하게 만듭니다. – 주로 정적

[전체 소스]

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("PageView"),
      ),
      body: PageView(
        children:[
          Container(
            color: Colors.pink,
            child: Text("Page1"),
          ),
          Container(
            color: Colors.cyan,
            child: Text("Page2"),
          ),
          Container(
            color: Colors.deepPurple,
            child: Text("Page3"),
          )
        ]
      )
    );
  }
}

 

 

 

2. PageView.builder 생성자 : itemBuilder와 itemCount를 인자로 받습니다. (ListView와 비슷) – 주로 동적,

 

2-1. 위의 1번예제와 동일한 화면

[전체소스] 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {

  List<Color> myColors = [Colors.pink, Colors.cyan, Colors.deepPurple];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("PageView"),
      ),
      body: PageView.builder(
        itemCount: myColors.length,
        itemBuilder: (context, position){
           return Container(
             color: myColors[position],
             child: Text('page$position'),
           );
        }
      )
    );
  }
}

 

2-2 무한(?)으로 이동할 수 있는 페이지뷰

[전체소스]

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {

  List<Color> myColors = [Colors.pink, Colors.cyan, Colors.deepPurple];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("PageView"),
      ),
      body: PageView.builder(
        //itemCount: myColors.length, // <<주석처리함
        itemBuilder: (context, position){
          int pos = position%3;  //<<페이지 위치 계산
           return Container(
             color: myColors[pos],
             child: Text('page$pos'),
           );
        }
      )
    );
  }
}

 

 

3. PageView.custom 커스텀 스크롤 동작/애니메이션이 필요할 때 사용

 

 

 

4. 속성들

 

4-1. scrollDirection: Axis.vertical,

body: PageView.builder(
        scrollDirection: Axis.vertical,// 스크롤 방향
        itemCount: ..
        itemBuilder: ...
      )

 

4-2. Pagesnapping : 값을 false로 설정하면, 페이지를 중간값으로 설정할 수 있습니다.

false 이면 이상태에서 멈출 수 있음. 아니면 페이지 이동 됨

 

 

4-3. ScrollPhysics : 커스텀 스크롤 동작을 정의할 수 있습니다.

   -. 

      AlwaysScrollableScrollPhysics

      BouncingScrollPhysics : 

     ClampingScrollPhysics : 

     FixedExtentScrollPhysics

    NeverScrollableScrollPhysics:  스크롤 안됨.. 스크롤 막음.

     PageScrollPhysics

 

 

PageView제어

 

 

-. onPageChanged

 

-. controller

        인디케이터

        [전체소스]

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {

  List<Color> myColors = [Colors.pink, Colors.cyan, Colors.deepPurple];

  final PageController controller = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("PageView"),
      ),
      body: Column(
        children: [
          SizedBox(
            height: 150.0,
            child: PageView.builder(
              controller : controller,
              onPageChanged: (page){
                setState(() {});
              },
              scrollDirection: Axis.horizontal,
              pageSnapping: true,
              physics: PageScrollPhysics(),
              //itemCount: myColors.length, // <<주석처리함
              itemBuilder: (context, position){
                int pos = position%3;  //<<페이지 위치 계산
                 return Container(
                   color: myColors[pos],
                   child: Text('page$pos'),
                 );
              }
            ),
          ),
          Indicator(controller : controller, pageTotalCount : myColors.length )
        ],
      )
    );
  }
}


class Indicator extends StatelessWidget{

  final PageController controller;
  final int pageTotalCount;
  Indicator({required this.controller, required this.pageTotalCount});

  final Color normalColor = Colors.blue;
  final Color selectedColor = Colors.white;
  final double normalSize = 8.0;
  final double selectedsize = 18.0;

  final double spacing = 4.0;

  Widget _buildIndicator(int index, int pageCount, double spacing){
    bool isCurrentPageSelected = index == (controller.page != null ? controller.page!.round() % pageCount : 0);

    return Container(
      height: selectedsize,
      width: normalSize + (2*spacing),
      color: Colors.grey,
      child: Center(
        child: Material(
          color: isCurrentPageSelected ? selectedColor : normalColor,
          type: MaterialType.circle,
          child: Container(
            width: isCurrentPageSelected ? selectedsize:  normalSize,
            height: isCurrentPageSelected ? selectedsize :  normalSize,
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: new List<Widget>.generate(pageTotalCount, (int index) {
        return _buildIndicator(index, pageTotalCount, spacing);
      }),
    );
  }


}

 

 

 

 

-. PageView 제어

 

PageController를 사용하면 Page에 표시되는 페이지를 조작할 수 있습니다.

 

컨텐츠의 픽셀 오프셋을 제어 할 수 있고, 뷰포트의 크기도 지정할 수 있습니다.

 

상속관계 : ScrollController >  PageController

 

 

 

ScrollNotification and NotificationListener, which can be used to watch the scroll position without using a ScrollController.

 

 

 

-. 커스텀 전환

 

 

 

 

[내용추가할 것들]

https://medium.com/aubergine-solutions/create-an-onboarding-page-indicator-in-3-minutes-in-flutter-a2bd97ceeaff

 

 

https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple