카테고리 없음

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

신승호. 2023. 2. 7. 15:43
  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에 가까울 수록 페이지 전체를 차지하게 된다.