Flutter#Image_Carousel

##다섯장의 이미지를 순차적으로 슬라이드 되는 기능을 만들어 보았다.

 

1, main.dart

 

import 'package:flutter/material.dart';
import 'package:image_carousel/home_screen/homeScreen.dart';

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

 

2,homeScreen.dart

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() {  //homeScreenState가 실행될때 실행
    super.initState();
    
    timer = Timer.periodic(Duration(seconds: 1), (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() {  //homeScreenState가 죽을때 실행
    controller.dispose();
    if(timer != null){
      timer!.cancel();
    }
    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(),
      ),
    );
  }
}

# Timer을 이용하여 지정한 시간만큼 함수가 호출되어 이미지가 슬라이되는 기능을 만들었따.

# 그러기 위해선 controller를 필수로 지정해야했고 Page단위로 이동하는거기 때문에 PageController를 사용하였다.

# 여기서 initState는 실제로 homeScreenState가 실행될때 실행이 되며 dispose는 homeScreenState가 종료될때 실행이 되는 함수이다.

# 소스를 간략하게 해석하자면 controller.page!.toInt(); 를 통해 현재 페이지를 가져오고, 현재페이지+1을 하여 다음 페이지의 값을 변수에 저장하였다.

# 이미지가 총 5개이기 때문에 index가 4를 넘어가는 순간 처음으로 돌아가기 위해 nextPage를 0으로 초기화 하였다.