작성
·
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
안녕하세요!
혹시 한번 스크롤을 다 하고나면 애니메이션이 정상 작동 하나요?
이미지를 로딩하는 과정에서 한번 깜빡일 수 있습니다. 만약 맞다면 이 부분은 배포할경우 어느정도 해결되는 문제입니다.
더욱 개선하고 싶다면 이미지 용량을 줄이는 방법이 있습니다.
확인 해보신 후 다시 답변 주시면 추가 답변 해드리도록 하겠습니다.
감사합니다!
스크롤이 끝나고 처음 사진으로 돌아와도 지속되고 몇 분이고 화면을 켜놓아도 마찬가지네요 ㅠㅠ
일단 큰 지장이 가는 부분은 아니니 일단 쭉 수업 듣겠습니다.
답변 감사합니다!