인프런 커뮤니티 질문&답변

종마루님의 프로필 이미지
종마루

작성한 질문수

[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

PageController 사용해보기

curve: Curves.linear가 동작을 안 합니다.

작성

·

368

0

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  Timer? timer;
  PageController controller = PageController(
    initialPage: 0,
  );

  @override
  void initState() {
    super.initState();

    timer = Timer.periodic(Duration(seconds: 4), (timer) {
      int currentPage = controller.page!.toInt();
      int nextPage = currentPage + 1;

      if (nextPage > 4) {
        nextPage = 0;
      }

      controller.animateToPage(
          nextPage,
          duration: Duration(microseconds: 400),
          curve: Curves.linear
      );
    });
  }

  @override
  void dispose() {
    if (timer != null) {
      timer!.cancel();
    }
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 상태바 색 변경
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

    return Scaffold(
      // 스크롤
      body: PageView(
        controller: controller,
        children: [1, 2, 3, 4, 5]
            .map(
              (e) => Image.asset(
                'asset/img/image_$e.jpeg',
                fit: BoxFit.cover,
              ),
            )
            .toList(),
      ),
    );
  }
}

전체 코드이고 controller.animateToPage 부분입니다.

 

Curves.linear 대신 다른 여러 효과들을 적용해봐도

어떠한 애니메이션 없이 모두 화면이 깜빡이고 그 후 다음 사진이 나오는 방식으로만 동작합니다. 애니메이션이 적용이 안 되네요 ㅠㅠ

 

윈도우에 안드로이드 시뮬, 실기기(갤럭시) 둘 다 테스트 해봐도 동일해서 코드 문제인가 싶은데 따로 강의 내용이랑 다르게 작성한 것 같지는 않습니다.


검색해도 딱히 나오는 건 없어서 질문 드립니다 ㅠㅠ

답변 2

1

timer = Timer.periodic(Duration(seconds: 5), (timer) {
  int currentPage = controller.page!.toInt();
  int nextPage = currentPage + 1;
  if (nextPage > 4) {
    nextPage = 0;
  }
  controller.animateToPage(nextPage,
      duration: Duration(seconds: 2), curve: Curves.linear);

위와 같이 애니메이션 효과 시간을 늘려주니 되네요.

애니메이션 효과가 너무 빠르게 설정되어 깜박이는 것 같습니다.

0

코드팩토리님의 프로필 이미지
코드팩토리
지식공유자

안녕하세요!

혹시 한번 스크롤을 다 하고나면 애니메이션이 정상 작동 하나요?

이미지를 로딩하는 과정에서 한번 깜빡일 수 있습니다. 만약 맞다면 이 부분은 배포할경우 어느정도 해결되는 문제입니다.

더욱 개선하고 싶다면 이미지 용량을 줄이는 방법이 있습니다.

확인 해보신 후 다시 답변 주시면 추가 답변 해드리도록 하겠습니다.

감사합니다!

종마루님의 프로필 이미지
종마루
질문자

스크롤이 끝나고 처음 사진으로 돌아와도 지속되고 몇 분이고 화면을 켜놓아도 마찬가지네요 ㅠㅠ
일단 큰 지장이 가는 부분은 아니니 일단 쭉 수업 듣겠습니다.

답변 감사합니다!

종마루님의 프로필 이미지
종마루

작성한 질문수

질문하기