[flutter] 스택드 위젯을 사용하여 캐러셀(슬라이더) 뷰 구현하기

15 Dec 2023

flutter

이 블로그 포스트에서는 Flutter에서 스택(Stacked) 위젯을 사용하여 캐러셀(슬라이더) 뷰를 구현하는 방법에 대해 알아보겠습니다.

1. 필요한 패키지 설치

먼저, 캐러셀(슬라이더) 뷰를 구현하기 위해 carousel_slider 패키지를 설치해야 합니다. 다음 명령어를 사용하여 패키지를 설치합니다.

flutter pub add carousel_slider

2. 스택(Stacked) 위젯 이해

스택(Stacked) 위젯은 여러 위젯을 겹쳐서 뷰를 구성할 수 있는 위젯입니다. 자식 위젯들을 겹쳐서 배치하고, 각각의 위치를 지정할 수 있습니다.

3. 캐러셀(슬라이더) 뷰 구현

다음은 carousel_slider 패키지를 사용하여 캐러셀(슬라이더) 뷰를 구현한 예제 코드입니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('캐러셀(슬라이더) 뷰'),
        ),
        body: Center(
          child: CarouselSlider(
            items: [
              Container(
                margin: EdgeInsets.all(8.0),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8.0),
                  color: Colors.red,
                ),
              ),
              Container(
                margin: EdgeInsets.all(8.0),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8.0),
                  color: Colors.green,
                ),
              ),
              Container(
                margin: EdgeInsets.all(8.0),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8.0),
                  color: Colors.blue,
                ),
              ),
            ],
            options: CarouselOptions(
              height: 200.0,
              autoPlay: true,
              enlargeCenterPage: true,
              aspectRatio: 16/9,
              autoPlayCurve: Curves.fastOutSlowIn,
              enableInfiniteScroll: true,
              autoPlayAnimationDuration: Duration(milliseconds: 800),
              viewportFraction: 0.8,
            ),
          ),
        ),
      ),
    );
  }
}

4. 마치며

위 예제 코드에서 carousel_slider 패키지를 사용하여 캐러셀(슬라이더) 뷰를 간단히 구현하는 방법을 살펴보았습니다. Flutter에서 스택(Stacked) 위젯을 사용하여 여러 위젯을 겹쳐서 다양한 레이아웃을 만들 수 있으니, 다양한 UI를 구현할 때 유용하게 활용할 수 있습니다.

목차

1. 필요한 패키지 설치

2. 스택(Stacked) 위젯 이해

3. 캐러셀(슬라이더) 뷰 구현

4. 마치며