[flutter] carousel_slider를 사용하여 인트로 슬라이더 만들기

04 Dec 2023

flutter

앱에 인트로 슬라이더를 추가하는 것은 사용자들에게 앱의 특징을 소개하고 관심을 돌리는 좋은 방법입니다. Flutter에서 carousel_slider를 사용하여 인트로 슬라이더를 만들 수 있습니다. carousel_slider는 사용하기 쉽고, 다양한 슬라이더 기능과 함께 제공됩니다. 이번 블로그 포스트에서는 carousel_slider를 사용하여 간단한 인트로 슬라이더를 만드는 방법에 대해 알아보겠습니다.

1. carousel_slider 패키지 설치하기

먼저, carousel_slider 패키지를 설치해야 합니다. pubspec.yaml 파일을 열고 dependencies에 carousel_slider를 추가해주세요:

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^3.0.0

저장 후 패키지를 가져옵니다:

$ flutter packages get

2. 인트로 슬라이더 위젯 만들기

슬라이더를 생성하기 위해 StatefulWidget을 사용하는 위젯을 만들어야 합니다. 아래의 코드와 같이 IntroSlider 클래스를 만들어주세요:

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

class IntroSlider extends StatefulWidget {
  @override
  _IntroSliderState createState() => _IntroSliderState();
}

class _IntroSliderState extends State<IntroSlider> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      items: [], // 슬라이더 아이템들을 추가할 리스트
      options: CarouselOptions(
        height: 200, // 슬라이더 높이
        autoPlay: true, // 자동 재생 여부
        enlargeCenterPage: true, // 현재 아이템 크게 표시 여부
        onPageChanged: (index, reason) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

3. 슬라이더 아이템 추가하기

이제 슬라이더에 나타낼 아이템들을 추가해야 합니다. items 리스트에 원하는 위젯들을 추가하세요. 예를 들어, 이미지 슬라이더를 만들고 싶다면 Image.network를 사용하면 됩니다:

class _IntroSliderState extends State<IntroSlider> {
  int _currentIndex = 0;
  
  final List<Widget> _slides = [
    Image.network('https://example.com/slide1.jpg'),
    Image.network('https://example.com/slide2.jpg'),
    Image.network('https://example.com/slide3.jpg'),
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      items: _slides,
      options: CarouselOptions(
        // ...
      ),
    );
  }
}

4. 인트로 슬라이더 사용하기

슬라이더를 사용하는 방법은 아주 단순합니다. 인트로 슬라이더를 앱의 어떤 화면에 추가하기만 하면 됩니다.

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: Column(
        children: [
          // 다른 위젯들 ...
          IntroSlider(),
          // 다른 위젯들 ...
        ],
      ),
    );
  }
}

이제 위의 코드를 실행하면 앱에 인트로 슬라이더가 표시됩니다. 사용자는 슬라이더를 스와이프하여 다른 슬라이드를 볼 수 있습니다.

이상으로 Flutter에서 carousel_slider를 사용하여 인트로 슬라이더를 만드는 방법에 대해 알아보았습니다. carousel_slider의 다양한 특징과 옵션을 사용하여 더욱 독특한 인트로 슬라이더를 만들 수 있습니다. Flutter의 carousel_slider 패키지에 대한 자세한 내용은 공식 문서를 참조하세요.

Happy coding!

목차

1. carousel_slider 패키지 설치하기

2. 인트로 슬라이더 위젯 만들기

3. 슬라이더 아이템 추가하기

4. 인트로 슬라이더 사용하기