[flutter] carousel_slider를 사용하여 레스토랑 소개 슬라이더 만들기

04 Dec 2023

flutter

restaurant

레스토랑 앱을 개발하고 있습니다. 사용자에게 레스토랑의 소개를 슬라이더로 보여주고 싶습니다. Flutter의 carousel_slider를 사용하여 손쉽게 구현할 수 있습니다.

carousel_slider 패키지 추가하기

먼저, carousel_slider 패키지를 프로젝트에 추가해야 합니다. 프로젝트의 pubspec.yaml 파일을 열어 다음과 같이 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^4.0.0

패키지를 추가한 후에는 터미널에서 flutter packages get 명령어를 실행하여 패키지를 설치해야 합니다.

carousel_slider 사용하기

carousel_slider 패키지를 추가한 후에는 CarouselSlider 위젯을 사용하여 슬라이더를 생성할 수 있습니다. 아래의 예제 코드를 참고해주세요.

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

final List<String> images = [
  'https://example.com/restaurant1.jpg',
  'https://example.com/restaurant2.jpg',
  'https://example.com/restaurant3.jpg',
];

class RestaurantSlider extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        height: 200,
        autoPlay: true,
      ),
      items: images.map((image) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.symmetric(horizontal: 10),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                image: DecorationImage(
                  image: NetworkImage(image),
                  fit: BoxFit.cover,
                ),
              ),
            );
          },
        );
      }).toList(),
    );
  }
}

위의 코드에서 images 리스트에는 슬라이더에 표시할 이미지의 URL을 저장합니다. CarouselSlider 위젯의 options 속성은 슬라이더의 높이와 자동 재생 기능을 설정합니다. items 속성에는 images 리스트를 매핑하여 각 이미지를 슬라이더로 변환하는 코드가 포함되어 있습니다.

결과 확인하기

RestaurantSlider 위젯을 실제 화면에 출력하기 위해서는 해당 위젯을 원하는 위치에 추가하면 됩니다. 아래의 예제 코드를 참고해주세요.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Restaurant App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Restaurant App'),
        ),
        body: Center(
          child: RestaurantSlider(),
        ),
      ),
    );
  }
}

위의 코드에서 RestaurantSlider 위젯을 Center 위젯의 child 속성에 추가하여 슬라이더를 화면 중앙에 출력하도록 설정했습니다.

슬라이더의 결과를 확인하기 위해 실행해보세요. 이제 사용자에게 레스토랑의 소개를 슬라이더로 손쉽게 보여줄 수 있습니다!

참고: carousel_slider 패키지
이미지 출처: example.com