[flutter] carousel_slider를 사용하여 포트폴리오 슬라이더 만들기

04 Dec 2023

flutter

포트폴리오 웹사이트나 앱을 개발할 때, 사용자들에게 작품들을 보여주는 슬라이더는 매우 중요합니다. Flutter에서 carousel_slider를 사용하면 간단하게 포트폴리오 슬라이더를 구현할 수 있습니다. 이번 포스트에서는 carousel_slider를 사용하여 포트폴리오 슬라이더를 만드는 방법을 알아보겠습니다.

1. carousel_slider 패키지 설치

먼저, carousel_slider 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 carousel_slider 패키지를 추가합니다.

dependencies:
  carousel_slider: ^3.0.0

패키지를 추가한 후에는 flutter pub get 명령을 실행하여 패키지를 설치합니다.

2. carousel_slider 사용하기

carousel_slider 패키지를 설치했으니 이제 사용해보겠습니다. 먼저, carousel_slider 위젯을 만들고 자식 위젯으로 이미지나 컨텐츠를 추가할 수 있습니다. 다음은 carousel_slider를 사용하는 간단한 예시입니다.

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

class PortfolioSlider extends StatelessWidget {
  final List<String> images = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        height: 200.0,
        aspectRatio: 16 / 9,
        viewportFraction: 0.8,
        enableInfiniteScroll: true,
        autoPlay: true,
      ),
      items: images.map((image) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.symmetric(horizontal: 5.0),
              child: Image.asset(
                'assets/images/$image',
                fit: BoxFit.cover,
              ),
            );
          },
        );
      }).toList(),
    );
  }
}

위의 코드에서는 이미지 파일 경로를 리스트로 선언한 후, carousel_slider를 생성합니다. options 속성으로 슬라이더의 높이, 가로 세로 비율, 보이는 부분의 크기 등을 설정할 수 있습니다. items 속성에는 각 이미지를 출력하는 컨텐츠 위젯을 반환하는 함수를 작성합니다. 이렇게 작성한 carousel_slider를 원하는 화면에 추가하면 됩니다.

3. 포트폴리오 슬라이더 사용하기

위에서 작성한 PortfolioSlider 위젯을 사용하여 포트폴리오 슬라이더를 만들어봅시다. 다음은 포트폴리오 슬라이더를 출력하는 예시입니다.

import 'package:flutter/material.dart';
import 'package:your_app/portfolio_slider.dart';

class PortfolioPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('포트폴리오'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '나의 작품',
              style: TextStyle(
                fontSize: 24.0,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 16.0),
            PortfolioSlider(),
          ],
        ),
      ),
    );
  }
}

위의 코드에서는 PortfolioSlider 위젯을 Column 위젯 안에 추가하여 포트폴리오 슬라이더를 출력합니다. 자신의 작품을 보여주는 페이지에 이 코드를 추가하면 됩니다.

결론

Flutter의 carousel_slider를 사용하여 포트폴리오 슬라이더를 구현하는 방법을 알아보았습니다. carousel_slider는 간편한 사용법과 다양한 옵션을 제공하여 포트폴리오나 이미지 슬라이더 등 다양한 용도로 활용할 수 있습니다. 포트폴리오 웹사이트나 앱을 개발할 때는 carousel_slider를 활용해보세요.