[flutter] carousel_slider를 사용하여 사진 갤러리 슬라이더 만들기

04 Dec 2023

flutter

Flutter에서 carousel_slider를 사용하면 사진 갤러리 슬라이더를 쉽게 만들 수 있습니다. carousel_slider는 다양한 모양과 애니메이션을 사용하여 사진들을 슬라이드하는 기능을 제공합니다.

carousel_slider 라이브러리 추가하기

먼저, pubspec.yaml 파일에서 carousel_slider 라이브러리를 추가해야 합니다. 아래와 같이 dependencies 섹션에 carousel_slider를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^4.2.0

저장한 후에 flutter pub get 명령어를 사용하여 라이브러리를 가져옵니다.

carousel_slider 사용하기

먼저, carousel_slider 라이브러리를 가져오기 위해 아래와 같이 import 문을 추가합니다.

import 'package:carousel_slider/carousel_slider.dart';

갤러리에서 보여줄 사진들의 리스트를 만듭니다. 이 리스트는 carousel_slider 위젯의 items 속성에 전달됩니다. 아래는 예시 코드입니다.

List<String> imageUrls = [
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg',
  // 추가적인 이미지들...
];

이제 carousel_slider 위젯을 렌더링하기 위해 아래와 같이 코드를 작성합니다.

CarouselSlider(
  options: CarouselOptions(
    height: 400, // 슬라이더의 높이 설정
    enlargeCenterPage: true, // 현재 슬라이드를 확대
  ),
  items: imageUrls.map((imageUrl) {
    return Image.network(
      imageUrl,
      fit: BoxFit.cover,
    );
  }).toList(),
)

위 코드에서 options 속성을 사용하여 슬라이더의 높이를 조정하고, 현재 슬라이드를 확대하는 옵션을 설정할 수 있습니다. 또한, items 속성에는 각 이미지를 위젯으로 변환하여 전달해야 합니다. 위 코드에서는 Image.network 위젯을 사용하여 이미지를 가져옵니다.

마지막으로, 위젯을 화면에 렌더링합니다.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Photo Gallery'),
    ),
    body: Center(
      child: CarouselSlider(
        options: CarouselOptions(
          height: 400,
          enlargeCenterPage: true,
        ),
        items: imageUrls.map((imageUrl) {
          return Image.network(
            imageUrl,
            fit: BoxFit.cover,
          );
        }).toList(),
      ),
    ),
  );
}

위 코드에서는 Scaffold 위젯을 사용하여 앱의 기본적인 레이아웃을 만들고, appBar와 body 부분에 carousel_slider를 추가한 것을 볼 수 있습니다. 각자의 프로젝트에 맞게 앱의 레이아웃을 수정할 수 있습니다.

이제 앱을 실행시키면 사진 갤러리 슬라이더가 보여질 것입니다. carousel_slider를 사용하면 사진 갤러리 등 다양한 슬라이더를 쉽게 만들 수 있습니다.

참고 자료

carousel_slider 라이브러리 GitHub 페이지