[flutter] carousel_slider를 사용하여 취미 소개 슬라이더 만들기

04 Dec 2023

flutter

개요

carousel_slider는 Flutter에서 이미지나 컨텐츠를 슬라이더 형태로 보여주는 UI 라이브러리입니다. 이 라이브러리를 사용하여 간단하게 취미 소개 슬라이더를 만들어보겠습니다.

단계

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

먼저, carousel_slider 라이브러리를 프로젝트에 추가해야합니다. pubspec.yaml 파일에 다음과 같이 carousel_slider를 추가합니다.

dependencies:
  carousel_slider: ^2.3.1

저장 후, 패키지를 가져옵니다.

$ flutter pub get

2. 슬라이더 위젯 만들기

다음으로, 슬라이더 위젯을 만듭니다. SliderWidget 라는 새로운 StatefulWidget 클래스를 생성합니다.

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

class SliderWidget extends StatefulWidget {
  @override
  _SliderWidgetState createState() => _SliderWidgetState();
}

class _SliderWidgetState extends State<SliderWidget> {
  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        height: 200,
        enableInfiniteScroll: true,
        autoPlay: true,
      ),
      items: [
        Image.asset('assets/hobby1.jpg'),
        Image.asset('assets/hobby2.jpg'),
        Image.asset('assets/hobby3.jpg'),
      ],
    );
  }
}

위 코드에서는 CarouselSlider 위젯을 사용하여 슬라이더를 만들고, options를 통해 슬라이더의 높이와 자동 재생 등을 설정할 수 있습니다. items에는 슬라이더에 표시될 이미지나 컨텐츠를 추가합니다.

3. 슬라이더 사용하기

슬라이더를 사용하기 위해서는 SliderWidget을 다른 화면에서 호출해야합니다. 이를 위해 새로운 화면에 SliderWidget을 추가해봅시다.

import 'package:flutter/material.dart';

import 'slider_widget.dart';

class HobbiesScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Hobbies'),
      ),
      body: Center(
        child: SliderWidget(),
      ),
    );
  }
}

위 코드에서는 SliderWidget을 Center 위젯으로 감싸서 가운데에 위치시킵니다. 이제 HobbiesScreen을 호출하면 슬라이더가 표시됩니다.

결론

carousel_slider를 사용하여 취미 소개 슬라이더를 만들었습니다. 라이브러리를 사용하면 간단하게 다양한 슬라이더를 구현할 수 있습니다. 추가적으로, options 속성을 통해 슬라이더의 동작을 더욱 세밀하게 제어할 수 있습니다.

더 자세한 정보는 공식 문서를 참고하세요.

Happy coding!