[flutter] carousel_slider를 사용하여 푸드트럭 정보 슬라이더 만들기

04 Dec 2023

flutter

푸드트럭 정보를 보여주는 슬라이더를 만들려면 carousel_slider 패키지를 사용할 수 있습니다. 이 패키지는 Flutter 앱에서 이미지나 컨텐츠를 슬라이더로 표시하는 데 도움이 되는 유용한 도구입니다.

1. 패키지 추가

먼저 pubspec.yaml 파일에 carousel_slider 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 패키지를 추가하세요:

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^4.0.0-nullsafety.0

그리고 터미널에서 아래 명령어를 실행하여 패키지를 설치하세요:

flutter pub get

2. 슬라이더 생성

슬라이더를 생성하기 위해 carousel_slider 위젯을 사용합니다. 아래와 같이 코드를 작성하세요:

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

class FoodTruckSlider extends StatelessWidget {
  @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,
        pauseAutoPlayOnTouch: true,
        aspectRatio: 16 / 9,
      ),
      items: [
        Container(
          margin: EdgeInsets.all(5.0),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8.0),
            image: DecorationImage(
              image: AssetImage('assets/foodtruck1.jpg'),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Container(
          margin: EdgeInsets.all(5.0),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8.0),
            image: DecorationImage(
              image: AssetImage('assets/foodtruck2.jpg'),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Container(
          margin: EdgeInsets.all(5.0),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8.0),
            image: DecorationImage(
              image: AssetImage('assets/foodtruck3.jpg'),
              fit: BoxFit.cover,
            ),
          ),
        ),
      ],
    );
  }
}

위 코드에서 items에는 슬라이더에 표시할 각 항목을 포함하는 컨테이너를 작성합니다. 이미지를 사용하려면 image 속성에 이미지 경로를 지정하면 됩니다.

그리고 options에는 슬라이더의 동작 방식과 모양 등을 설정할 수 있는 옵션을 지정합니다. 위 코드에서는 몇 가지 예시 옵션을 설정했습니다. 자세한 옵션은 carousel_slider 패키지 문서를 참조하세요.

3. 슬라이더 사용

FoodTruckSlider 위젯을 사용하여 푸드트럭 정보 슬라이더를 화면에 표시할 수 있습니다. 예를 들어 HomePage 위젯의 중간 부분에 슬라이더를 추가하려면 아래와 같이 코드를 작성하세요:

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Food Truck App'),
      ),
      body: Column(
        children: [
          Text('Welcome to Food Truck App!'),
          FoodTruckSlider(),
          // 다른 위젯 추가
        ],
      ),
    );
  }
}

위 코드에서 FoodTruckSlider 위젯을 Column 위젯에서 사용하고 있습니다.

이제 앱을 실행하면 푸드트럭 정보를 보여주는 슬라이더가 화면에 표시됩니다.

위와 같이 carousel_slider 패키지를 사용하여 푸드트럭 정보 슬라이더를 만들 수 있습니다. 또한 위 코드를 기반으로 슬라이더의 디자인 및 동작을 추가로 커스터마이즈할 수 있습니다.