[flutter] carousel_slider를 사용하여 음식 메뉴 슬라이더 만들기

04 Dec 2023

flutter

Food Menu Slider

이번에는 Flutter에서 carousel_slider를 사용하여 음식 메뉴 슬라이더를 만들어 보겠습니다. carousel_slider는 이미지나 컨텐츠를 슬라이드 형태로 보여주는 역할을 합니다. 우리는 이를 이용하여 다양한 음식 메뉴를 슬라이더 형태로 표현할 수 있습니다.

Step 1: carousel_slider 패키지 추가하기

먼저, carousel_slider 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일을 열고, dependencies 섹션에 다음 코드를 추가합니다:

dependencies:
  carousel_slider: ^3.0.0

package dependencies를 업데이트하기 위해 터미널에서 flutter pub get 명령어를 실행합니다.

Step 2: carousel_slider 위젯 생성하기

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

class FoodMenuSlider extends StatelessWidget {
  final List<String> foodItems = [
    'Pizza',
    'Burger',
    'Sushi',
    'Tacos',
    'Pasta',
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        height: 200,
        autoPlay: true,
        aspectRatio: 16 / 9,
        enlargeCenterPage: true,
        enableInfiniteScroll: true,
        autoPlayInterval: Duration(seconds: 2),
        autoPlayAnimationDuration: Duration(milliseconds: 800),
        autoPlayCurve: Curves.easeInOut,
        pauseAutoPlayOnTouch: true,
        onPageChanged: (index, reason) {
          // 페이지 변경 시 동작할 내용 추가
        },
      ),
      items: foodItems.map((food) {
        return Container(
          margin: EdgeInsets.all(5),
          child: Image.asset('assets/images/$food.jpg'),
        );
      }).toList(),
    );
  }
}

위 코드를 보면, carousel_slider 패키지를 import하고, CarouselSlider 위젯을 생성하는 FoodMenuSlider를 정의합니다.

foodItems은 음식 항목의 목록을 나타내며, 이미지 파일 이름으로 사용됩니다. 각 항목은 items 속성을 통해 Container 위젯으로 래핑된 이미지로 표시됩니다.

options 속성을 통해 슬라이더의 동작 방식과 속성을 설정할 수 있습니다. 예를 들어, autoPlay을 true로 설정하면 자동으로 슬라이드가 진행됩니다.

Step 3: FoodMenuSlider 사용하기

import 'package:flutter/material.dart';

import 'food_menu_slider.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Food Menu'),
      ),
      body: Column(
        children: [
          SizedBox(height: 20),
          Text(
            '오늘의 베스트 메뉴',
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: 10),
          FoodMenuSlider(),
        ],
      ),
    );
  }
}

이제 FoodMenuSlider를 HomeScreen 위젯에서 사용할 수 있습니다. 원하는 위치에 FoodMenuSlider 위젯을 추가하고, 필요에 따라 스타일을 조정할 수 있습니다.

위 코드에서는 FoodMenuSlider 위젯을 Column 위젯 안에 추가하여 원하는 위치에 슬라이더를 표시했습니다.

결론

이제 Flutter에서 carousel_slider를 사용하여 음식 메뉴 슬라이더를 만들 수 있게 되었습니다. 이를 통해 다양한 음식 메뉴를 시각적으로 표현하고 사용자의 관심을 끌 수 있습니다. 자세한 옵션과 사용법은 carousel_slider 패키지의 공식 문서를 참고하시기 바랍니다.