[flutter] carousel_slider를 사용하여 FAQ 슬라이더 만들기

04 Dec 2023

flutter

이번 블로그에서는 Flutter에서 carousel_slider 패키지를 사용하여 자주 묻는 질문(FAQ) 슬라이더를 만드는 방법에 대해 알아보겠습니다.

carousel_slider 패키지 설치

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

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^4.0.0

그리고 패키지를 적용하기 위해 다음과 같이 import 문을 추가해주세요.

import 'package:carousel_slider/carousel_slider.dart';

슬라이더 만들기

이제 carousel_slider를 사용하여 FAQ 슬라이더를 만들어보겠습니다. 예를 들어, 다음과 같은 질문들을 슬라이더 형식으로 표시해보겠습니다.

class FAQSlider extends StatelessWidget {
  final List<String> faqList = [
    '질문 1',
    '질문 2',
    '질문 3',
    '질문 4',
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        height: 200,
        autoPlay: true,
        enlargeCenterPage: true,
      ),
      items: faqList.map((faq) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.symmetric(horizontal: 10.0),
              child: Text(faq, style: TextStyle(fontSize: 16)),
            );
          },
        );
      }).toList(),
    );
  }
}

위의 코드에서는 FAQ 질문들을 faqList에 저장하고, CarouselSlider를 사용하여 슬라이더를 생성합니다. 슬라이더의 높이를 200으로 지정하고, 자동 재생 기능을 활성화하며, 중앙 요소를 확대하는 옵션을 설정했습니다. 그리고 faqList를 매핑하여 각각의 질문을 Builder를 통해 슬라이드 아이템으로 만들었습니다. 각 슬라이드 아이템은 너비를 화면의 가로 크기로 설정하고, 좌우 여백을 주었으며, 텍스트를 표시하도록 설정했습니다.

사용하기

이제 위에서 생성한 FAQSlider 위젯을 원하는 곳에서 사용할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FAQ 슬라이더',
      home: Scaffold(
        appBar: AppBar(title: Text('FAQ 슬라이더')),
        body: Center(child: FAQSlider()),
      ),
    );
  }
}

위의 코드에서는 FAQSlider 위젯을 body에 추가하여 슬라이더를 표시하도록 설정했습니다.

결론

이렇게 carousel_slider 패키지를 사용하여 Flutter에서 FAQ 슬라이더를 만들 수 있습니다. carousel_slider의 다양한 옵션을 사용하면 슬라이더를 원하는 대로 커스터마이징할 수 있습니다. 자세한 내용은 공식 documentation을 참조해주세요.

Happy coding!