[flutter] carousel_slider를 사용하여 식당 리뷰 슬라이더 만들기

04 Dec 2023

flutter

Flutter에서는 carousel_slider 패키지를 사용하여 식당 리뷰 슬라이더를 만들 수 있습니다. carousel_slider는 이미지나 컨텐츠를 슬라이더 형태로 보여주는 데 사용됩니다. 이제 식당 리뷰 슬라이더를 만드는 방법에 대해 알아보겠습니다.

1. carousel_slider 패키지 추가하기

먼저 pubspec.yaml 파일에 아래와 같이 carousel_slider 패키지를 추가합니다:

dependencies:
  carousel_slider: ^3.0.0

패키지를 추가한 후, 터미널에서 flutter packages get 명령을 실행하여 패키지를 다운로드 받아주세요.

2. 식당 리뷰 슬라이더 생성하기

다음으로, 식당 리뷰 슬라이더를 생성하기 위해 carousel_slider 위젯을 사용해야 합니다. 아래와 같이 코드를 작성해보세요:

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

class RestaurantReviewSlider extends StatelessWidget {
  final List<String> reviews = [
    '맛있는 음식과 친절한 서비스로 유명한 식당입니다.',
    '분위기 좋고 다양한 메뉴를 제공하는 곳입니다.',
    '가족이 함께 먹기에 좋은 곳이에요.',
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider.builder(
      itemCount: reviews.length,
      itemBuilder: (BuildContext context, int index) => Container(
        alignment: Alignment.center,
        padding: EdgeInsets.all(10),
        child: Text(
          reviews[index],
          style: TextStyle(fontSize: 18),
        ),
      ),
      options: CarouselOptions(
        height: 200,
        enlargeCenterPage: true,
        autoPlay: true,
        autoPlayInterval: Duration(seconds: 3),
      ),
    );
  }
}

위 코드에서는 RestaurantReviewSlider 클래스를 정의하고, 리뷰를 담은 리스트를 생성합니다. CarouselSlider.builder를 사용하여 슬라이더 아이템을 빌드하고, CarouselOptions를 통해 슬라이더의 높이, 자동 재생 등의 옵션을 설정합니다.

3. 식당 리뷰 슬라이더 사용하기

이제 생성한 식당 리뷰 슬라이더를 사용할 수 있습니다. 예를 들어, 식당 상세 페이지에서 리뷰 슬라이더를 보여주고자 한다면, 아래와 같이 코드를 작성해주세요:

import 'package:flutter/material.dart';

import 'restaurant_review_slider.dart';

class RestaurantDetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('식당 상세 페이지'),
      ),
      body: Column(
        children: [
          // 식당 정보 표시
          // ...

          // 식당 리뷰 슬라이더
          RestaurantReviewSlider(),
        ],
      ),
    );
  }
}

위 코드에서는 RestaurantDetailPage 클래스에 RestaurantReviewSlider 위젯을 추가하여 식당 상세 페이지에 리뷰 슬라이더를 표시합니다.

결론

Flutter의 carousel_slider 패키지를 사용하면 식당 리뷰 슬라이더를 쉽게 만들 수 있습니다. CarouselSlider.builder를 이용하여 슬라이더를 구성하고, 옵션을 설정하여 원하는 모양과 동작을 추가할 수 있습니다. 이를 활용하여 보다 멋진 식당 리뷰 슬라이더를 구현해보세요!

참고 자료

carousel_slider 패키지 GitHub 페이지: https://github.com/serenader2014/flutter_carousel_slider