[ Flutter ] 이미지 슬라이드 만들기

※ 코드팩토리님 강의를 듣고 복습한 내용입니다.

 

안녕하세요 이번 글에서는 이미지 슬라이드(책자?)를 만들어 보겠습니다.

프로젝트 생성 후 아래처럼 폴더와 이미지를 셋팅해 줍시다.

 

 

 

다음 asset 폴더의 이미지를 사용하기 위해서 pupspec.yaml 파일을 열어 세팅하여 줍시다. 

 

 

 

이제 main.dart 파일을 열어 코딩하여 줍시다!

 

import 'dart:async';

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: HomeScreen(),
  ));
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

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

class _HomeScreenState extends State<HomeScreen> {
  // Page 가 시간차를 두고 넘어가기 위한 timer 생성
  Timer? timer;

  // PageView 에 파라미터로 넣어줄 controller 생성
  PageController controller = PageController(
      initialPage: 0); // 시작 페이지의 인덱스 지정


  // 위젯 생성시 실행되는 메소드
  @override
  void initState() {
    super.initState();
    timer = Timer.periodic(Duration(seconds: 2), (timer) {
      // 첫번쨰 파라미터로 페이지가 넘어가는 시간을 설정 두번째 파라미터로 callback 함수 생성
      int currentPage = controller.page!
          .toInt(); // PageController 가 가지고 있는 현재 페이지의 인덱스를 가져온다.
      int nextPage = currentPage + 1; // 다음 페이지

      if (nextPage > 4) {
        nextPage = 0;
      }
      //  animateToPage 사용하여 애니메이션의 정류 및 시간 페이지 설정
      controller.animateToPage(nextPage,
          duration: Duration(milliseconds: 400), curve: Curves.linear);
    });
  }

  // 위젯이 종료 되면서 실행는 메소드
  @override
  void dispose() {
    // 앱이 종료될 경우 타이머 제거
    if (timer != null) {
      timer!.cancel();
    }

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      /// Creates a scrollable list that works page by page from an explicit [List]
      /// of widgets.
      /// PageView 위젯을 클릭하여 들어가 보면 위처럼 주석과 파라미터 정보를 확인할 수 있습니다.
      body: PageView(
        controller: controller,
        children: [1, 2, 3, 4, 5] // 사용할 이미지 호출
            .map((e) => Image.asset(
            'asset/img/cat_$e.jpg',
            fit: BoxFit.cover,
        ))
            .toList(),
      ),
    );
  }
}

 

이제 실행시켜 줍시다.

 

 

캡쳐가 좀 ㅎㅎ...... 이렇게 슬라이드가 넘어가는 화면을 확인할 수 있습니다.