Notice
Recent Posts
Recent Comments
Link
코드로 우주평화
flutter _ PageView 와 PageController, Timer 사용방법 본문
반응형
main
import 'package:flutter/material.dart';
import 'package:image_carousel/screen/home_screen.dart';
void main() {
runApp(
MaterialApp(
home: HomeScreen(),
),
);
}
설명은 생략
HomeScreen StatefulWidget
class _HomeScreenState extends State<HomeScreen> {
Timer? timer;
PageController controller = PageController(
initialPage: 0,
);
State에 Timer 와 PageController 선언
initialPage는 인덱스니까 당연히 0
@override
void initState() {
super.initState();
timer = Timer.periodic(Duration(seconds: 2), (timer) { // 2초 짜리 타이머가 요기로 들어옴
int currentPage = controller.page!.toInt(); // page는 원래 double(소수점)이다. 중간이 있기 때문에
int nextPage = currentPage + 1;
if(nextPage > 4){
nextPage = 0;
}
controller.animateToPage(nextPage, duration: Duration(milliseconds: 400), curve: Curves.ease); // 페이지 넘김 애니메이션
});
}
initSate 에는 타이머 객체를 만들고 현재 페이지와 다음 페이지에 대한 값을 할당한다.
다음 페이지가 4를 초과하면 (이미지가 5개만 있음) 다음 페이지를 0으로 할당한다.
controller.animateToPage는 페이지를 넘길 때 애니메이션을 줄 수 있음
@override
void dispose() {
controller.dispose(); // controller는 dispose 해주어야 메모리 누수를 막을 수 있다.
if(timer != null){
timer!.cancel();
}
super.dispose();
}
위젯이 죽을 때에는 controller와 timer를 없애줘야 메모리 누수를 막을 수 있음
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark); // ui와 관련없는 상태바 요소의 색상을 변경
return Scaffold(
body: PageView( // 페이지를 만들 수 있음
controller: controller,
children: [1, 2, 3, 4, 5]
.map((e) => // map을 이용하면 파일명을 동적으로 전달할 수 있음
Image.asset('asset/img/image_$e.jpeg', fit: BoxFit.cover))
.toList(),
),
);
}
}
SystemChrome.setSystemUIOverlayStyle 는 시스템 ui의 스타일을 바꿔줄 수 있음(배터리, 시간, 와이파이 같은 요소들)
PageView 에 controller 붙이고 map을 이용해 Image.asset에 파일명을 동적으로 전달
결과 화면
전체 코드
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: 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: 2), (timer) { // 1초 짜리 타이머가 요기로 들어옴
int currentPage = controller.page!.toInt(); // page는 원래 double(소수점)이다. 중간이 있기 때문에
int nextPage = currentPage + 1;
if(nextPage > 4){
nextPage = 0;
}
controller.animateToPage(nextPage, duration: Duration(milliseconds: 400), curve: Curves.ease); // 페이지 넘김 애니메이션
});
}
@override
void dispose() {
controller.dispose(); // controller는 dispose 해주어야 메모리 누수를 막을 수 있다.
if(timer != null){
timer!.cancel();
}
super.dispose();
}
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark); // ui와 관련없는 상태바 요소의 색상을 변경
return Scaffold(
body: PageView( // 페이지를 만들 수 있음
controller: controller,
children: [1, 2, 3, 4, 5]
.map((e) => // map을 이용하면 파일명을 동적으로 전달할 수 있음
Image.asset('asset/img/image_$e.jpeg', fit: BoxFit.cover))
.toList(),
),
);
}
}
반응형
'나는 이렇게 학습한다 > App' 카테고리의 다른 글
Flutter의 Wrap 위젯으로 동적 레이아웃 쉽게 구성하기 (0) | 2024.09.06 |
---|---|
flutter _ 날짜 사용법(DateTime, Duration, difference, isAfter, isBefore, add, substract) (0) | 2023.01.01 |
flutter _ WebView 위젯에서 홈으로 이동, 뒤로가기, 새로고침 (2) | 2022.12.19 |
flutter _ webview_flutter 를 이용해 앱에서 웹페이지 불러오기 (2) | 2022.12.17 |