[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: ^x.x.x  # x.x.x는 원하는 버전을 작성해 주세요

그리고, 터미널에서 flutter pub get 명령어를 실행하여 라이브러리를 다운로드 받아주세요.

2. carousel_slider 사용하기

사용할 페이지에서 carousel_slider를 import 해주세요.

import 'package:carousel_slider/carousel_slider.dart';

텍스트를 슬라이딩할 컨테이너를 생성합니다. carousel_slider 위젯을 사용하고, items 속성에 슬라이딩될 텍스트를 추가합니다.

CarouselSlider(
  options: CarouselOptions(
    height: 200,
    // 슬라이딩 속도 등 다양한 옵션 설정
    autoPlay: true,
    aspectRatio: 2.0,
    enlargeCenterPage: true,
  ),
  items: [
    Text('첫 번째 슬라이드'),
    Text('두 번째 슬라이드'),
    Text('세 번째 슬라이드'),
  ],
)

위 예제에서는 carousel_slider의 options 속성을 사용하여 슬라이딩 속도, 사이즈 조정 등의 옵션을 설정할 수 있습니다. items 속성에는 슬라이드될 텍스트 위젯들을 추가합니다.

3. 결과 확인하기

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(
      title: 'Carousel Slider Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Carousel Slider Example'),
      ),
      body: Center(
        child: CarouselSlider(
          options: CarouselOptions(
            height: 200,
            autoPlay: true,
            aspectRatio: 2.0,
            enlargeCenterPage: true,
          ),
          items: [
            Text('첫 번째 슬라이드'),
            Text('두 번째 슬라이드'),
            Text('세 번째 슬라이드'),
          ],
        ),
      ),
    );
  }
}

위 코드를 작성하고 실행하면 텍스트가 슬라이딩되는 텍스트 슬라이더를 확인할 수 있습니다. carousel_slider 라이브러리를 사용하여 손쉽게 텍스트 슬라이더를 구현할 수 있습니다.

더 자세한 사용법과 옵션은 carousel_slider 공식 문서를 참고해 주세요.