[flutter] carousel_slider를 사용하여 추천 영화 슬라이더 만들기

04 Dec 2023

flutter

carousel-slider

이 튜토리얼에서는 Flutter 앱에 carousel_slider 패키지를 사용하여 추천 영화 슬라이더를 만드는 방법을 알아보겠습니다.

1. carousel_slider 패키지 추가하기

먼저, pubspec.yaml 파일에 carousel_slider 패키지를 추가해야 합니다. 아래의 코드를 dependencies 섹션에 추가하세요.

dependencies:
  carousel_slider: ^4.0.0

그런 다음, 터미널에서 다음 명령을 실행하여 패키지를 설치하세요.

flutter pub get

2. carousel_slider 사용하기

다음으로, carousel_slider를 사용하여 슬라이더를 생성하고 표시해야 합니다. 아래의 예제 코드를 참고하세요.

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

class MovieCarousel extends StatelessWidget {
  final List<String> movies = [
    'movie1.jpg',
    'movie2.jpg',
    'movie3.jpg',
    'movie4.jpg',
    'movie5.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(height: 200.0),
      items: movies.map((movie) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.symmetric(horizontal: 5.0),
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage(movie),
                  fit: BoxFit.cover,
                ),
              ),
            );
          },
        );
      }).toList(),
    );
  }
}

위의 코드에서는 movies라는 영화 목록을 생성하고, 각 영화에 대한 이미지를 Container 위젯에 추가합니다. 이미지는 BoxFit.cover로 조정되어 슬라이더에 맞춰 표시됩니다.

3. MovieCarousel 위젯 사용하기

이제 MovieCarousel 위젯을 사용하여 화면에 추천 영화 슬라이더를 표시할 수 있습니다. 다음은 예제 코드입니다.

import 'package:flutter/material.dart';

import 'movie_carousel.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Movie Carousel Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Movie Carousel'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              SizedBox(height: 20),
              Text(
                'Recommendations',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(height: 10),
              MovieCarousel(),
            ],
          ),
        ),
      ),
    );
  }
}

위의 코드에서는 MovieCarousel 위젯을 Column 위젯 내에 배치하여 슬라이더를 표시합니다. 또한, “Recommendations”라는 텍스트를 추가하여 슬라이더 위에 제목을 표시하였습니다.

이제 앱을 실행하여 추천 영화 슬라이더를 확인해보세요!

결론

이 튜토리얼에서는 carousel_slider 패키지를 사용하여 추천 영화 슬라이더를 만드는 방법을 알아보았습니다. carousel_slider를 활용하면 다양한 슬라이더 구성을 구현할 수 있으므로, 앱에 다양한 슬라이더를 추가해보세요.

더 자세한 내용은 carousel_slider 패키지의 공식 문서를 참고하세요.