스나이퍼팩토리 9일차 과제 4번

1. PageView에 사용할 수 있는 PageController는 다음과 같은 속성이 포함됩니다. 
   • var pageController = PageController(viewportFraction: ...);
   • 해당 속성값(viewportFraction)에 들어가야할 데이터타입은 무엇인지 확인해보고, 속성을 통해 어떤 결과를 얻을 수 있는지 테스트하는 코드를 작성하세요.

아래는 테스트 코드

import 'package:flutter/material.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    var pageController = PageController(viewportFraction: 0.8);

    return MaterialApp(

      home: Scaffold(

        body: SafeArea(

            child: Center(

                child: SizedBox(

          height: 300,

          child: PageView(

            controller: pageController,

            scrollDirection: Axis.horizontal,

            children: [

              Container(

                alignment: Alignment.center,

                decoration: BoxDecoration(color: Colors.green),

                child: Text(

                  '1',

                  style: TextStyle(fontSize: 20, color: Colors.white),

                ),

              ),

              Container(

                alignment: Alignment.center,

                decoration: BoxDecoration(color: Colors.indigo),

                child: Text(

                  '2',

                  style: TextStyle(fontSize: 20, color: Colors.white),

                ),

              ),

              Container(

                alignment: Alignment.center,

                decoration: BoxDecoration(color: Colors.red),

                child: Text(

                  '3',

                  style: TextStyle(fontSize: 20, color: Colors.white),

                ),

              ),

            ],

          ),

        ))),

      ),

    );

  }

}

 

1,2,3페이지뷰

PageView를 사용하다 보면 좌우 여백에 이전, 다음 페이지를 보이게 하고 싶을 때가 있다.

이때는 PageView의 PageController 생성자에 viewportFraction 값을 주는 것으로 설정할 수 있다.

 

viewportFraction은 0-1까지의 값을 가지며, 1에 가까울 수록 페이지 전체를 차지하게 된다.