[flutter] 플러터 RxDart를 활용한 이미지 슬라이더 및 캐러셀 구현 방법

05 Dec 2023

flutter

이번 블로그 포스트에서는 RxDart를 사용하여 Flutter에서 이미지 슬라이더 및 캐러셀을 구현하는 방법에 대해 알아보겠습니다.

RxDart란?

RxDart는 Dart 언어를 위한 반응형 프로그래밍 라이브러리입니다. 이 라이브러리를 사용하면 Dart 코드에서 반응형 프로그래밍 패턴을 쉽게 구현할 수 있으며, 스트림과 이벤트를 효율적으로 처리할 수 있습니다. RxDart를 사용하여 이미지 슬라이더 및 캐러셀을 구현하면 코드가 간결하고 유지보수가 쉬워집니다.

이미지 슬라이더 및 캐러셀 구현하기

1. RxDart 라이브러리 추가하기

먼저 pubspec.yaml 파일에 RxDart 라이브러리를 추가해야 합니다. 아래와 같이 dependencies 항목에 RxDart를 추가하세요.

dependencies:
  rxdart: ^0.27.0

추가한 후에는 터미널에서 flutter packages get 명령어를 실행하여 종속성을 설치하세요.

2. 이미지 슬라이더 위젯 생성하기

이제 이미지 슬라이더 위젯을 만들어 보겠습니다. 아래와 같이 코드를 작성하세요.

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

class ImageSlider extends StatefulWidget {
  @override
  _ImageSliderState createState() => _ImageSliderState();
}

class _ImageSliderState extends State<ImageSlider> {
  BehaviorSubject<int> _currentIndex = BehaviorSubject<int>.seeded(0);

  final List<String> _images = [
    "assets/image1.jpg",
    "assets/image2.jpg",
    "assets/image3.jpg"
  ];

  @override
  void dispose() {
    _currentIndex.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Image.asset(
          _images[_currentIndex.value],
          fit: BoxFit.cover,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: _buildIndicator(),
        ),
      ],
    );
  }

  List<Widget> _buildIndicator() {
    List<Widget> indicators = [];

    for (int i = 0; i < _images.length; i++) {
      indicators.add(
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: CircleAvatar(
            backgroundColor:
                _currentIndex.value == i ? Colors.blueAccent : Colors.grey,
            radius: 5,
          ),
        ),
      );
    }

    return indicators;
  }
}

위 코드에서는 BehaviorSubject를 사용하여 현재 이미지의 인덱스를 관리합니다. _currentIndex는 초기값으로 0을 갖고, dispose 메서드에서는 스트림이 닫히도록 처리합니다. 이미지 경로를 저장하는 리스트인 _images는 있다고 가정하고 Image.asset 위젯을 통해 현재 인덱스에 해당하는 이미지를 보여줍니다. _buildIndicator 메서드는 현재 인덱스에 해당하는 원형 인디케이터를 생성합니다.

3. ImageSlider 위젯 사용하기

이제 ImageSlider 위젯을 사용해보겠습니다. 아래와 같이 코드를 작성하세요.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Image Slider"),
        ),
        body: Center(
          child: ImageSlider(),
        ),
      ),
    );
  }
}

위 코드에서는 ImageSlider 위젯을 Center 위젯으로 감싸서 가운데에 위치시켰습니다. 앱을 실행하면 이미지 슬라이더가 표시되는 것을 확인할 수 있습니다.

마무리하며

이번 포스트에서는 RxDart를 활용하여 Flutter에서 이미지 슬라이더 및 캐러셀을 구현하는 방법에 대해 알아보았습니다. RxDart를 사용하면 반응형 프로그래밍을 쉽게 구현할 수 있으므로, 다양한 UI 요소를 동적으로 제어할 때 유용합니다. 더 많은 기능과 자세한 사용법은 RxDart의 공식 문서를 참고하시기 바랍니다.

참고 자료: