[flutter] 이미지 애니메이션을 사용한 캐러셀 구현하기

11 Dec 2023

flutter

이번 포스트에서는 Flutter 프레임워크를 사용하여 이미지 애니메이션을 구현한 캐러셀을 만드는 방법에 대해 알아보겠습니다.

필요한 라이브러리 설치

우선, 이미지 애니메이션을 사용하기 위해 carousel_slider 라이브러리를 설치해야 합니다.

dependencies:
  carousel_slider: ^3.0.0

이후, 패키지 매니저를 사용하여 라이브러리를 설치해줍니다.

flutter pub get

이미지 애니메이션을 사용한 캐러셀 구현하기

다음은 carousel_slider 라이브러리를 사용하여 이미지 애니메이션을 구현한 캐러셀을 만드는 예제 코드입니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyCarousel(),
    );
  }
}

class MyCarousel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('이미지 캐러셀'),
      ),
      body: CarouselSlider(
        options: CarouselOptions(height: 400.0),
        items: [
          'https://example.com/image1.jpg',
          'https://example.com/image2.jpg',
          'https://example.com/image3.jpg',
          // 추가 이미지
        ].map((i) {
          return Builder(
            builder: (BuildContext context) {
              return Container(
                width: MediaQuery.of(context).size.width,
                margin: EdgeInsets.symmetric(horizontal: 5.0),
                decoration: BoxDecoration(
                  color: Colors.amber,
                ),
                child: Image.network(i, fit: BoxFit.cover),
              );
            },
          );
        }).toList(),
      ),
    );
  }
}

위의 예제 코드에서 options를 통해 캐러셀의 높이를 설정하고, items에 캐러셀에 표시될 이미지들을 넣어주면 됩니다.

이제 이 코드를 실행하면 이미지 애니메이션을 사용하여 캐러셀을 만들 수 있습니다.

마무리

이번 포스트에서는 Flutter를 사용하여 이미지 애니메이션을 구현한 캐러셀을 만드는 방법을 알아보았습니다. carousel_slider 라이브러리를 사용하면 간편하게 이미지 애니메이션을 구현할 수 있으니, 프로젝트에 적용해보시기 바랍니다.