[Flutter] 전자액자 프로젝트 (PageView, Timer, PageController)

사진을 넘길 수 있는 / 사진이 자동으로 넘어가는 전자액자

 

< 🖥️ 주요 기술>

• PageView (터치로 좌, 우 스크롤 가능하도 록)
• Timer (특정 기간마다 지정 함수 실행)
• StatefulWidget
• Life Cycle

<실습 CODE>

main.dart

import 'package:flutter/material.dart';
import 'package:splash_screen/screen/home_screen.dart';

void main() {
  // Flutter프레임워크가 앱을 실행할 준비가 될때까지 기다린다. 웹뷰최신플러그인 쓸때필요
  WidgetsFlutterBinding.ensureInitialized();

  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    ),
  );
}

screen/home_screen.dart

• initState 변경사항 반영을 위해서는 반드시 재시작을 해주어야 한다.
• PageView는 PageController로 상태 값을 변경한다.
• 컨트롤러는 dispose()에서 반드시 해제해야 한다.
• controller.animateToPage()를 통해 이미지를 자동으로 넘길 수 있다.
• SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark); 로 상태바 색깔 변경이 가능하다.

import 'dart:async';

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

//단축키 stful
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,
  );

  // Hot reload를 했을때는 build 만 다시 실행된다.
  // initState의 변경사항을 반영하려면 재시작을 해주어야 한다.
  @override
  void initState() {
    super.initState();
    
    // timer를 통한 페이지 변수값 설정
    timer = Timer.periodic(const Duration(seconds: 3), (timer) {
      print('Timer!');
      int currentPage = controller.page!.toInt(); // ! 컨트롤러-페이지연결 확신
      int nextPage = currentPage + 1;

      // 이미지 끝에서 -> 다시 맨 앞으로
      if (nextPage > 4) {
        nextPage = 0;
      }

      // 이미지 자동으로 다음페이지로 이동
      controller.animateToPage(
        nextPage,
        duration: const Duration(microseconds: 400),
        curve: Curves.linear,
      );
    });
  }

  @override
  void dispose() {    // State가 죽을때 실행됨
    controller.dispose(); // 컨트롤러는 반드시 해제해야함!

    if (timer != null) {
      timer!.cancel(); // !는 null이 될 수 없다는 가정을 강제로 넣어주는 문법
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 상태바 색깔 변경
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    return Scaffold(
        body: PageView(
      // PageView가 생성될때 controller가 붙음
      controller: controller,
      // 자동스크롤
      children: [1, 2, 3, 4, 5]
          .map(
            (e) => Image.asset(
              'asset/img/image_$e.jpeg',
              fit: BoxFit.cover,
            ),
          )
          .toList(),
    ));
  }
}

 

강의 출처 인프런 [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!