🚀 Flutter Timer와 PageView로 완벽한 자동 슬라이드 구현하기 | 메모리 누수 방지까지!

"앱이 점점 느려지고 있나요?" Timer와 PageView를 잘못 사용하면 메모리 누수가 발생할 수 있습니다. 이 글에서는 Flutter의 Timer와 PageView를 활용한 안전하고 효율적인 자동 슬라이드 구현법을 단계별로 알아보겠습니다.

🎯 이런 분들께 추천합니다

• Flutter로 배너나 이미지 슬라이드를 만들고 싶은 개발자
• Timer 사용 시 메모리 누수가 걱정되는 분
• PageView 자동 슬라이드 기능을 구현하려는 분
• 앱 성능 최적화에 관심이 있는 Flutter 개발자

---

⚡ Before vs After: 문제점과 해결책

❌ Before: 이렇게 하면 위험해요!

문제점들:

• 시간 관련 기능을 어떻게 구현해야 할지 막막
• 페이지 슬라이드 기능에 복잡한 보일러플레이트 코드
• 메모리 누수에 대한 인식 부족

✅ After: 이렇게 개선하세요!

해결책:

• Timer.periodic으로 반복 작업을 깔끔하게 처리할 수 있음
• PageView + PageController로 간단하게 구현 가능
• dispose()에서 Timer와 Controller 정리의 중요성 개념

---

🔧 핵심 구현 코드

1️⃣ Timer 핵심 패턴

Timer? timer;

// 초기화
timer = Timer.periodic(Duration(seconds: 2), (timer) {
  // 반복 실행할 코드
});

// 정리 (필수!)
@override
void dispose() {
  timer?.cancel();
  super.dispose();
}

2️⃣ PageView 자동 슬라이드

PageController controller = PageController();

// 다음 페이지로 애니메이션
controller.animateToPage(
  nextPage,
  duration: Duration(milliseconds: 500),
  curve: Curves.linear,
);

3️⃣ 현재 페이지 인덱스 가져오기

int currentPage = controller.page!.toInt();
int nextPage = currentPage + 1;
if (nextPage > 4) {
  nextPage = 0; // 순환 구조
}

---

🔥 완전한 자동 슬라이드 위젯 구현

class AutoSlideWidget extends StatefulWidget {
  @override
  State<AutoSlideWidget> createState() => _AutoSlideWidgetState();
}

class _AutoSlideWidgetState extends State<AutoSlideWidget> {
  Timer? timer;
  PageController controller = PageController();

  @override
  void initState() {
    super.initState();
    timer = Timer.periodic(Duration(seconds: 2), (timer) {
      int current = controller.page!.toInt();
      int next = (current + 1) % totalPages;
      controller.animateToPage(next,
        duration: Duration(milliseconds: 500),
        curve: Curves.linear);
    });
  }

  @override
  void dispose() {
    timer?.cancel();
    controller.dispose();
    super.dispose();
  }
}

---

⚠️ 주의해야 할 함정들

실수결과해결책

Timer를 cancel하지 않음	메모리 누수, 앱 성능 저하	dispose()에서 timer?.cancel() 필수
PageController를 dispose하지 않음	메모리 누수	controller.dispose() 반드시 호출
controller.page!를 null 체크 없이 사용	Runtime 에러 발생	controller.page!.toInt() 또는 null 체크
페이지 인덱스 범위 초과	IndexOutOfRange 에러	순환 구조로 인덱스 관리

---

🎓 추가 학습 팁

💡 DateTime 핵심사항

• 년도만 필요, 나머지는 옵션별
• .utc 생성자로 UTC 기준 생성 가능
• Duration은 모든 파라미터가 네임드 파라미터

📚 다음 단계 학습 계획

• 섹션 16: 고급 애니메이션과 상태 관리
• 심화 학습: StreamBuilder와 Timer 조합
• 실전 프로젝트: 뉴스 앱의 자동 슬라이드 기능

---

🎯 실무에서 바로 써먹는 시나리오

🔹 자동 슬라이드 배너

• 마케팅 페이지, 앱 소개
• 타임라인 기능: 실시간 데이터 업데이트

🔹 자동 새로고침

• 주기적 API 호출

달성도: 90% (섹션 15 완료, 자가화 정리 완료)

---

💬 마무리하며

"프로그래밍은 점해지는 것이다" - 오늘의 개념을 💡

Timer와 PageView를 정복했습니다! 이제 동적인 UI를 자유자재로 만들 수 있는 실력이 늘었어요. 특히 메모리 관리의 중요성을 깨달은 것이 큰 성장입니다! 🎯

다음 단계도 화이팅! 점점 더 멋진 앱을 만들어갈 거예요 ⭐

---

🤝 같이 성장해요!

💬 댓글로 알려주세요:

• 어떤 부분이 가장 도움이 되었나요?
• Timer나 PageView 관련해서 궁금한 점이 있다면?
• 여러분만의 자동 슬라이드 구현 경험이 있다면 공유해주세요!

🔔 더 많은 Flutter 개발 팁이 궁금하시다면 구독과 좋아요 부탁드려요!