[flutter] carousel_slider에서 아이템에 맞는 라벨 추가하기

04 Dec 2023

flutter

소개

carousel_slider는 Flutter에서 이미지나 컨텐츠를 슬라이드하는 데 사용되는 패키지입니다. 이 패키지를 사용하여 슬라이드 되는 각 아이템에 맞게 라벨을 추가하는 방법에 대해 알아보겠습니다.

구현 단계

carousel_slider 패키지를 프로젝트에 추가합니다. pubspec.yaml 파일에 아래의 의존성을 추가합니다.

dependencies:
  carousel_slider: ^x.x.x

필요한 파일을 import 합니다.

import 'package:carousel_slider/carousel_slider.dart';

슬라이드할 아이템들을 정의합니다. 예를 들어, Image 위젯을 사용한 슬라이드 아이템 리스트를 생성합니다.

List<Widget> sliderItems = [
  Image.asset('assets/image1.jpg'),
  Image.asset('assets/image2.jpg'),
  Image.asset('assets/image3.jpg'),
];

CarouselSlider 위젯을 생성하고 items 속성에 슬라이드할 아이템들을 넣고, options 속성에 원하는 설정을 추가합니다.

CarouselSlider(
  items: sliderItems,
  options: CarouselOptions(
    height: 200.0,
    viewportFraction: 0.8,
    enableInfiniteScroll: true,
    autoPlay: true,
  ),
)

라벨을 추가하기 위해 슬라이드 아이템을 Stack 위젯으로 감싸고, Positioned 위젯을 사용하여 라벨을 원하는 위치에 추가합니다.

CarouselSlider(
  items: sliderItems.map((item) => Stack(
    alignment: Alignment.bottomCenter,
    children: [
      item,
      Positioned(
        bottom: 10.0,
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
          decoration: BoxDecoration(
            color: Colors.black45,
            borderRadius: BorderRadius.circular(10.0),
          ),
          child: Text(
            '라벨 추가',
            style: TextStyle(
              color: Colors.white,
              fontSize: 16.0,
            ),
          ),
        ),
      ),
    ],
  )).toList(),
  options: CarouselOptions(
    height: 200.0,
    viewportFraction: 0.8,
    enableInfiniteScroll: true,
    autoPlay: true,
  ),
)

최종적으로 위와 같은 코드로 슬라이드에 라벨이 추가됩니다.

결론

carousel_slider를 사용하여 Flutter 앱에서 슬라이드에 아이템에 맞는 라벨을 추가하는 방법에 대해 알아보았습니다. 이를 통해 앱의 사용자에게 더 효과적인 컨텐츠를 제공할 수 있습니다.

소개

구현 단계

결론

참고 자료