플루터 이미지 캐러셀(Flutter Image Carousel)

Image Carousel이란?

여러 장의 이미지를 가로 또는 세로로 넘겨가며 표시하는 UI 요소입니다. 

보통 자동 슬라이드 + 좌우 화살표를 할께 제공하며 사용자가 직접 터치/드래그/버튼 클릭으로 넘길 수도 있고 일정 시간마다 자동으로 넘어가기도 합니다. 

한정된 화면 공간에서 여러 장의 이미지를 보여줄 때, 주로 사용하며 대표 이미지, 광고, 배너에 활용 됩니다. 

예시로 쇼핑몰 앱에서는 메인 화면에서 여러 상품 프로모션 배너를 자동으로 넘기는 슬라이드가 있고, 

호텔 예약 앱에서는 호텔 상세 페이지에서 숙소 사진들을 좌우로 넘겨보는 방식이 있습니다. 

 

Timer란?

Timer는 프로그래밍에서 특정 시간이 지난 뒤 실행하거나, 일정 간격마다 반복 실행을 하기 위한 기능입니다. 

"몇 초 뒤에 이 작업을 실행"하라는 의미로 사용되거나 "1초마다 이 작업을 반복해" 같은 요청을 처리합니다. 

Carousel은 자동으로 이미지가 바뀌는 기능이 있는데 바로 그 자동 슬라이드를 가능하게 하는 핵심 도구가 Timer입니다. 

정리하면 Timer는 자동 알람이라면 Image Carousel은 사진 앨범입니다. 

 

Timer 예제 

Timer 클래스는 "dart:async" 패키지 안에 포함되어 있기 때문에 기본적으로 사용 가능합니다. 

아래 코드는 main 함수 실행시 1초뒤에 출력문이 동작하게 됩니다. 

import 'dart:async';

void main() async {
  print('main 함수 실행');

  Timer(Duration(seconds: 1), () {
    print('1초 뒤 실행');
  });
}

Duration은 시간의 길이를 표현하는 객체로, 시간 단위를 초, 밀리초, 분, 시간 등으로 지정할 수 있습니다. 

단순히 시간을 계산하거나 전달하는 역할을 담당합니다. 

아래 코드는 1초 단위로 반복이 실행되고, 

number 값이 5가 되었을 때, 타이머가 종료됩니다. 

import 'dart:async';

void main() async {
  print('main 함수 실행');
  
  int number = 0;
  
  Timer.periodic(
    Duration(seconds:1),
    (Timer timer){
      number++;
      print('${number}초 뒤 실행');
      
      if(number == 5){
        timer.cancel();
      }
    },
  );
}

 

Image Carousel 예제

우선 asset 폴더 밑에 image 폴더를 생성해주세요. 

"pubspec.yaml" 파일 안에 아래 코드를 넣어주세요. 해당 경로의 폴더를 사용하겠다라는 정의입니다. 

  assets:
    - asset/image/

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

이미지 파일을 4개 정도 준비해서 image 폴더에 넣어줍니다. 

"home.dart" 파일에 아래 처럼 코딩합니다. 

우리가 등록한 이미지 파일을 화면에 표현하겠다는 코드입니다. 

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Image.asset(
          'asset/image/img3.jpg',
        ),
      ),
    );
  }
}

이미지 파일 4개를 슬라이드 방식으로 표현하는 코드입니다. 

PageView는 화면을 페이지 단위로 스와이프(넘김)할 수 있는 위젯입니다. 

map 함수를 사용하여 4장의 이미지를 바인딩하고 fit 속성을 사용해서 이미지를 화면에 가득 채웁니다. 

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        children: [1,2,3,4].map((x) => Image.asset(
          'asset/image/img${x}.jpg',
          fit: BoxFit.cover,
        )).toList(),
      ),
    );
  }
}

아래처럼 코드를 작성하면, 

2초 간격으로 이미지가 계속 슬라이드 동작하게 됩니다. 

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

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

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

class _HomeScreenState extends State<HomeScreen> {
  Timer? timer;
  PageController controller = PageController();

  @override
  void initState() {
    super.initState();

    timer = Timer.periodic(Duration(seconds: 2), (timer){
      int currentPage = controller.page!.toInt();
      int nextPage = currentPage + 1;

      if(nextPage > 3){
        nextPage = 0;
      }

      controller.animateToPage(nextPage, duration: Duration(milliseconds: 500), curve: Curves.linear);
    });
  }

  @override
  void dispose() {
    if(timer != null){
      timer!.cancel();
    }

    controller.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: controller,
        children: [1, 2, 3, 4]
            .map(
              (x) => Image.asset('asset/image/img${x}.jpg', fit: BoxFit.cover),
            )
            .toList(),
      ),
    );
  }
}