[flutter] carousel_slider를 사용하여 가구 소개 슬라이더 만들기

04 Dec 2023

flutter

가구 쇼핑 앱을 개발하고 있을 때, 사용자들에게 가구 소개를 위한 슬라이더를 제공하고 싶을 수 있습니다. 이때 carousel_slider 라이브러리를 사용하면 간편하고 멋진 슬라이더를 손쉽게 구현할 수 있습니다.

이번 블로그 포스트에서는 flutter에서 carousel_slider를 사용하여 가구 소개 슬라이더를 만드는 방법에 대해 알아보겠습니다.

1. carousel_slider 설치하기

dependencies:
  carousel_slider: ^4.0.0

pubspec.yaml 파일에 위와 같이 carousel_slider 라이브러리를 추가합니다. 그리고 터미널에서 flutter pub get 명령어를 실행하여 라이브러리를 설치합니다.

2. carousel_slider 구현하기

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

class FurnitureCarousel extends StatefulWidget {
  @override
  _FurnitureCarouselState createState() => _FurnitureCarouselState();
}

class _FurnitureCarouselState extends State<FurnitureCarousel> {
  List<String> furnitureImages = [
    'assets/furniture1.jpg',
    'assets/furniture2.jpg',
    'assets/furniture3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        height: 200.0,
        enlargeCenterPage: true,
        autoPlay: true,
        autoPlayInterval: Duration(seconds: 3),
        autoPlayAnimationDuration: Duration(milliseconds: 800),
        autoPlayCurve: Curves.fastOutSlowIn,
        enableInfiniteScroll: true,
        viewportFraction: 0.8,
      ),
      items: furnitureImages.map((image) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.symmetric(horizontal: 5.0),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0),
                image: DecorationImage(
                  image: AssetImage(image),
                  fit: BoxFit.cover,
                ),
              ),
            );
          },
        );
      }).toList(),
    );
  }
}

위의 코드는 carousel_slider를 사용하여 가구 이미지를 보여주는 위젯을 만드는 예시입니다.

furnitureImages 리스트에 가구 이미지의 경로를 저장합니다.
CarouselSlider의 options 속성을 사용하여 슬라이더의 디자인과 동작을 설정합니다.
items 속성을 사용하여 가구 이미지를 보여주는 컨텐츠를 구성합니다.

3. 가구 소개 슬라이더 사용하기

가구 소개 슬라이더를 사용하려면 단순히 FurnitureCarousel 위젯을 적절한 위치에 배치하면 됩니다.

import 'package:flutter/material.dart';
import 'package:your_app/furniture_carousel.dart';

class FurniturePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('가구 소개'),
      ),
      body: Center(
        child: FurnitureCarousel(),
      ),
    );
  }
}

위 코드는 FurnitureCarousel 위젯을 FurniturePage에서 사용하는 예시입니다.

마무리

flutter에서 carousel_slider를 사용하여 가구 소개 슬라이더를 만드는 방법에 대해 알아보았습니다. carousel_slider를 사용하면 간단하고 멋진 슬라이더를 쉽게 구현할 수 있으므로 가구 쇼핑 앱에 적용해보세요.

추가적인 기능이나 자세한 사용법은 carousel_slider 라이브러리의 공식 문서를 참조하시기 바랍니다.