[flutter] carousel_slider에서 아이콘 슬라이더 만들기

04 Dec 2023

flutter

이번에는 Flutter에서 carousel_slider 패키지를 사용하여 아이콘 슬라이더를 만드는 방법에 대해 알아보겠습니다. carousel_slider는 이미지나 아이콘을 슬라이드 형태로 보여주는 용도로 사용할 수 있는 패키지입니다.

1. 패키지 설치

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

dependencies:
  carousel_slider: ^4.0.0

그리고 터미널에서 flutter packages get 명령어를 실행하여 패키지를 다운로드 받습니다.

2. 아이콘 슬라이더 생성

슬라이더를 생성하기 위해 새로운 파일을 만들고 다음과 같이 코드를 작성합니다.

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

class IconSlider extends StatelessWidget {
  final List<IconData> icons;
  final double iconSize;

  IconSlider({required this.icons, this.iconSize = 36.0});

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        height: iconSize,
        enableInfiniteScroll: true,
        viewportFraction: 0.3,
      ),
      items: icons.map((icon) {
        return Builder(
          builder: (BuildContext context) {
            return Icon(icon, size: iconSize);
          },
        );
      }).toList(),
    );
  }
}

IconSlider 클래스는 icons와 iconSize를 매개변수로 받아서 아이콘 슬라이더를 생성합니다. icons는 슬라이더에 보여줄 아이콘들의 리스트이고, iconSize는 아이콘의 크기입니다.

위의 코드에서는 CarouselSlider 위젯을 사용하여 슬라이더를 생성합니다. CarouselOptions는 슬라이더의 옵션을 설정하며, 위의 예제에서는 슬라이더의 높이와 무한 스크롤 기능을 사용하도록 설정하였습니다.

items는 슬라이더에 표시할 각각의 아이템을 정의하는 부분입니다. 여기서는 icons 리스트를 순회하면서 각각의 아이콘을 Icon 위젯으로 생성하고, 그것을 Builder 위젯으로 감싸서 반환합니다.

3. 사용 예시

이제 해당 아이콘 슬라이더를 사용하는 예시 코드를 작성해보겠습니다. 예를 들어, 다른 위젯과 함께 AppBar에 아이콘 슬라이더를 추가하는 방법은 다음과 같습니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Icon Slider',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Icon Slider'),
          actions: [
            IconSlider(icons: [Icons.home, Icons.settings, Icons.search]),
          ],
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

위의 예시 코드에서는 IconSlider 위젯을 AppBar의 actions에 추가하여 아이콘 슬라이더를 나타내었습니다. icons 매개변수에는 보여줄 아이콘의 리스트를 전달하면 됩니다.

이제 앱을 실행하면 AppBar에 아이콘 슬라이더가 나타나는 것을 확인할 수 있습니다.

마무리

이번에는 Flutter의 carousel_slider 패키지를 사용하여 아이콘 슬라이더를 만드는 방법을 알아보았습니다. 이렇게 만들어진 슬라이더를 사용하면 원하는 아이콘들을 슬라이드 형태로 손쉽게 보여줄 수 있습니다.

추가로, carousel_slider 패키지에 대한 상세한 사용법은 해당 패키지의 공식 문서를 참고하시기 바랍니다.

carousel_slider 패키지: https://pub.dev/packages/carousel_slider