[flutter] carousel_slider를 사용하여 광고 슬라이더 만들기

04 Dec 2023

flutter

Flutter의 carousel_slider 패키지는 광고나 이미지 슬라이드쇼를 만드는 데 유용한 도구입니다. 이번 블로그 포스트에서는 carousel_slider 패키지를 사용하여 광고 슬라이더를 만드는 방법을 알아보겠습니다.

1. carousel_slider 패키지 설치하기

먼저, pubspec.yaml 파일에 carousel_slider 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 carousel_slider를 추가하세요.

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^3.0.0

그리고 터미널에서 프로젝트의 루트 디렉토리로 이동한 다음, 아래 명령어를 실행하여 패키지를 설치합니다.

flutter pub get

이제 carousel_slider 패키지가 설치되어 사용할 준비가 되었습니다.

2. 광고 슬라이더 만들기

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

class AdSlider extends StatelessWidget {
  final List<String> adImages = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        height: 200.0,
        autoPlay: true,
        enlargeCenterPage: true,
        autoPlayInterval: Duration(seconds: 3),
        autoPlayAnimationDuration: Duration(milliseconds: 800),
        pauseAutoPlayOnTouch: true,
        aspectRatio: 16 / 9,
        onPageChanged: (index, reason) {
          // 이미지가 변경될 때 호출되는 콜백 함수
        },
      ),
      items: adImages.map((image) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.symmetric(horizontal: 5.0),
              child: Image.network(image, fit: BoxFit.cover),
            );
          },
        );
      }).toList(),
    );
  }
}

위의 코드는 AdSlider라는 StatelessWidget을 정의합니다. adImages 리스트에 광고 이미지 URL을 저장하고, CarouselSlider 위젯을 사용하여 이미지를 보여줍니다. CarouselOptions에서는 슬라이더의 동작 옵션을 설정할 수 있습니다. items에는 광고 이미지를 표시하는데 사용되는 위젯을 정의합니다.

3. 광고 슬라이더 사용하기

위에서 정의한 AdSlider를 다른 스크린이나 위젯에서 사용할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다.

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('광고 슬라이더'),
      ),
      body: Column(
        children: [
          Text('이곳에 다른 콘텐츠가 들어갈 수 있습니다.'),
          SizedBox(height: 20),
          AdSlider(),
        ],
      ),
    );
  }
}

위의 코드에서는 AppBar와 Text 위젯 등 다른 콘텐츠를 추가한 후, AdSlider를 추가하여 광고 슬라이더를 표시합니다.

이제 carousel_slider 패키지를 사용하여 광고 슬라이더를 만들 수 있게 되었습니다. carousel_slider 패키지의 다양한 옵션과 기능을 사용하여 원하는 대로 슬라이더를 커스텀하실 수 있습니다. 다른 속성 및 사용 예제에 대해서는 carousel_slider 패키지 공식 문서를 참조하시기 바랍니다.