[Practice] carousel_slider

목표

Carousel slide의 구조와 실 사용법을 확인하여 보고 실제 코드까지 작성을 해본다

---

정의

해당 플러그인은 이미지를 루프처럼 넘기거나 자동으로 움직일 수 있는 플러그인을 말한다.

 

 

사용 예시

코드를 직접보면서 순번을 따라 만들어 보자.

 

먼저 pubspec.yaml 파일에서 아래의 두개 플러그인을 설치한다.

carousel_slider는 슬라이더를 위한 것이며, smooth_page_indicator는 추후에 사용할 dot indicator를 적용하기 위함이다.

 # image carousel slider
  carousel_slider: ^4.2.1

  # dots indicator
  smooth_page_indicator: ^0.3.0-nullsafety.0

 

그다음 main.dart에서 다음의 코드를 통해 구현을 한다. 사진은 unsplash에서 제공하는 어떤것을 사용해도 좋다.

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

///1. pubspec.yaml 파일에서 carousel_slider와 smooth indicator를 입력하여 사용가능하게 만든다.

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'carousel slider',
      theme: ThemeData(primarySwatch: Colors.purple),
      home: Myhome(),
    );
  }
}

class Myhome extends StatefulWidget {
  const Myhome({super.key});

  @override
  State<Myhome> createState() => _MyhomeState();
}

class _MyhomeState extends State<Myhome> {
  /// 5-1. activeIndex의 기초값을 선언한다
  int activeIndex = 0;

  /// 2. List로 홈페이지 상에서 Url를 가져 올 수 있도록 주소들을 입력한다.
  final List<String> imageUrls = [
    'https://images.unsplash.com/photo-1633989464081-16ccd31287a1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDE0fHxoZWxsb3xlbnwwfHx8fDE2NTk0MDQ5NTQ&ixlib=rb-1.2.1&q=80&w=2000',
    'https://images.unsplash.com/photo-1633989464081-16ccd31287a1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDE0fHxoZWxsb3xlbnwwfHx8fDE2NTk0MDQ5NTQ&ixlib=rb-1.2.1&q=80&w=2000',
    'https://images.unsplash.com/photo-1633989464081-16ccd31287a1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDE0fHxoZWxsb3xlbnwwfHx8fDE2NTk0MDQ5NTQ&ixlib=rb-1.2.1&q=80&w=2000',
    'https://images.unsplash.com/photo-1633989464081-16ccd31287a1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDE0fHxoZWxsb3xlbnwwfHx8fDE2NTk0MDQ5NTQ&ixlib=rb-1.2.1&q=80&w=2000',
    'https://images.unsplash.com/photo-1633989464081-16ccd31287a1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDE0fHxoZWxsb3xlbnwwfHx8fDE2NTk0MDQ5NTQ&ixlib=rb-1.2.1&q=80&w=2000',
  ];

  /// 3. Carousel slider가 원하는 형태의 UI로 사진을 보여줄 수 있도록 형태를 만든다.
  /// horizontal은 사진간의 거리를 의미하며
  /// color의 경우에는 사진이 차지할 공간의 임시적인 색을 의미한다.
  /// Image.network 위젯을 사용하여 imageUrl(미리 List에서 선언해두었다)를 불러온다
  Widget buildImage(String imageUrl, int index) => Container(
        margin: EdgeInsets.symmetric(horizontal: 12),
        color: Colors.grey,
        child: Image.network(
          imageUrl,
          fit: BoxFit.cover,
        ),
      );

  /// 5-3. buildIndicator의 속성을 위젯으로 만들어준다.
  Widget buildIndicator() => AnimatedSmoothIndicator(
        activeIndex: activeIndex,
        count: imageUrls.length,
        /// effect는 여러가지가 있으니 홈페이지에서 참고하여 확인하길 바란다.
        effect: JumpingDotEffect(dotWidth: 20, dotHeight: 20),
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Carousel Slider"),
        elevation: 0,
      ),

      /// 4. CarouselSlider를 사용하게 되면 itemCount, itemBuilder, option 이렇게 총 3가지
      /// 가 required가 되는데, 각각은 다음과 같은 역할을 한다
      /// itemCount: 보여주고자 하는 이미지의 갯수
      /// itemBuilder: 이미지의 갯수등을 입력받고 buildImage 위젯을 반환한다
      /// options: Carousel이 autoplay, height, enlargeCenterPage 등 다양한 형태의
      /// 추가 옵션을 넣어 꾸밀 수 있다.
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CarouselSlider.builder(
              itemCount: imageUrls.length,
              itemBuilder: (context, index, realIndex) {
                final imageUrl = imageUrls[index];

                return buildImage(imageUrl, index);
              },
              options: CarouselOptions(
                autoPlay: true,
                height: 400,
                enlargeCenterPage: true,

                /// 5. dot을 넣어 indicator를 만든다
                onPageChanged: (index, reason) =>
                    setState(() => activeIndex = index),
              ),
            ),

            /// 5-2. Indicator를 추가 하기 위한 공간을 확보한다.
            SizedBox(height: 20),
            buildIndicator(),
          ],
        ),
      ),
    );
  }
}

 

 

실제 화면은 다음과 같다

 

참고: HeyFlutter, Flutter Tutorial - Build A Simple Image Slider Carousel | Flutter Carousel Slider (https://youtu.be/JEMx2ax0734)