[Dart, Flutter] Carousel Slider 를 이용하여 여러 View를 보이기

간혹 처음사용하는 App을 켜면 사용방법이 touch & slide 형식으로 이루어져있는 것을 몇번 보았을 것입니다.

저희 프로젝트 App에서도 그러한 기능을 넣기위해서 찾아보다가 Carousel Slider 라는 Package를 찾게되었습니다.

 

백문이 불여일견, 먼저 구현해보면 "아~ 이거 자주봤지" 라는 표현이 나오실 겁니다 ㅎㅎ..

 

먼저 Package를 pubspec.yaml 파일에 넣어주고 pub get 을 해줍시다!

carousel_slider: ^4.2.1

 

프로젝트에 사용하기위해 import도 해주시구요!

import 'package:carousel_slider/carousel_slider.dart';
import 'package:carousel_slider/carousel_controller.dart';

 

 

이제 추가하고자 하는 Widget List를 하나 만들어 줍시다!

저같은 경우는 App을 켜자마자 간단히 App을 소개하는 View를 띄우려고 합니다!

총 4개의 페이지가 되겠네요!

widgetList = [
      IntroductionFirstPage(setLastPage: _setLastPage),
      IntroductionSecondPage(setLastPage: _setLastPage,),
      IntroductionThirdPage(setLastPage: _setLastPage),
      LoginPage(),
    ];

 

이제 본격적으로 Slider 위젯 함수로 만들어 봅시다. 

final CarouselController _carouselController = CarouselController();
  int _current = 0;
  late List<Widget> widgetList;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    widgetList = [
      // scaffold pages
      IntroductionFirstPage(setLastPage: _setLastPage),
      IntroductionSecondPage(setLastPage: _setLastPage,),
      IntroductionThirdPage(setLastPage: _setLastPage),
      LoginPage(),
    ];
  }
  // 마지막 페이지로 이동하기 위한 함수
  void _setLastPage(){
    setState(() {
      _current = 3;
    });
    _carouselController.jumpToPage(3);
  }
  // 슬라이더가 움직이면 인덱스값 변화
  void onPageChange(index){
    setState(() {
      _current = index;
    });
  }
  Widget sliderWidget() {
    return CarouselSlider(
      carouselController: _carouselController, // 현재 슬라이더의 정보를 담고있는 컨트롤러
      items: widgetList, // 위젯 리스트
      options: CarouselOptions(
          height: MediaQuery.of(context).size.height, // 높이설정
          autoPlay: false, // 자동으로 넘어가는 것을 방지
          enlargeCenterPage: true,
          viewportFraction: 0.9,
          aspectRatio: 2.0,
          initialPage: 0, // 첫 페이지 인덱스
          enableInfiniteScroll: false, // 무한으로 스크롤 할건지 여부
          scrollDirection: Axis.horizontal, // 스크롤 방향은 수평으로
          pageSnapping: true,
          onPageChanged: (index, reason) { // 페이지 변화시 호출할 함수
            onPageChange(index);
          }),
    );
  }

 

이제 Build 함수에서 사용하면 됩니다. 저같은 경우 뒤에 배경이 있기때문에 Container로 감싸고, child로 Column을 받습니다.

 

Column 내부안에 오버플로우 방지용 Expanded를 넣고 추후에 소개할 Slider Indigator도 포함하기 때문에 Column을 사용했습니다.

 

전체코드는 다음과 같습니다!

import 'package:flutter/material.dart';
import 'package:mapdesign_flutter/LoginPage/introduction_page_2.dart';
import 'package:mapdesign_flutter/LoginPage/introduction_page_3.dart';
import 'package:mapdesign_flutter/LoginPage/login_page.dart';
import 'package:carousel_slider/carousel_controller.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:mapdesign_flutter/LoginPage/introduction_page_1.dart';

class LoginModule extends StatefulWidget {
  const LoginModule({Key? key}) : super(key: key);

  @override
  State<LoginModule> createState() => _LoginModuleState();
}

class _LoginModuleState extends State<LoginModule> {
  final CarouselController _carouselController = CarouselController();
  int _current = 0;
  late List<Widget> widgetList;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    widgetList = [
      // scaffold pages
      IntroductionFirstPage(setLastPage: _setLastPage),
      IntroductionSecondPage(setLastPage: _setLastPage,),
      IntroductionThirdPage(setLastPage: _setLastPage),
      LoginPage(),
    ];
  }
  void _setLastPage(){
    setState(() {
      _current = 3;
    });
    _carouselController.jumpToPage(3);
  }
  void onPageChange(index){
    setState(() {
      _current = index;
    });
  }
  Widget sliderWidget() {
    return CarouselSlider(
      carouselController: _carouselController,
      items: widgetList,
      options: CarouselOptions(
          height: MediaQuery.of(context).size.height,
          autoPlay: false,
          enlargeCenterPage: true,
          viewportFraction: 0.9,
          aspectRatio: 2.0,
          initialPage: 0,
          enableInfiniteScroll: false,
          scrollDirection: Axis.horizontal,
          pageSnapping: true,
          onPageChanged: (index, reason) {
            onPageChange(index);
          }),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          image: DecorationImage(
        colorFilter: ColorFilter.mode(
          Colors.black.withOpacity(0.5),
          BlendMode.darken,
        ),
        fit: BoxFit.cover,
        image: AssetImage('asset/flutter_asset/find_path.png'),
      )),
      child: Column(
        children: [
          Expanded(child: sliderWidget())
        ],
      ),
    );
  }
}

 

수평방향으로 슬라이딩이 된다.

 

현재 View가 몇번째 뷰인지, 몇개의 뷰가 존재하는지에 대한 Slider indicator는 다음 글에서 포스팅 하겠습니다~

 

참고자료: 

https://pub.dev/packages/carousel_slider