carousel_slider 패키지

“Slider, Carousel”를 지정된 패키지를 활용하여 다음의 결과물을 만드시오

• 결과물
  • 결과물의 데이터는 과제3번의 데이터를 활용할 수 있다.
  • 2.5초마다 다음 페이지로 자동으로 넘어가도록 설정하시오.
  •  

아래는 패키지옵션의 사용법이다.

https://github.com/serenader2014/flutter_carousel_slider/blob/master/lib/carousel_options.dart

CarouselSlider(
   items: items,
   options: CarouselOptions(
      height: 400,
      aspectRatio: 16/9,       //기본 종횡비
      viewportFraction: 0.8,   //기본 뷰포트
      initialPage: 0,       // [CarouselSlider] 를 처음 생성할 때 보여줄 초기 페이지 기본값0
      enableInfiniteScroll: true,  //carousel이 무한 반복되어야 하는지 또는 항목 길이로 제한되어야 하는지 결정 기본값true 즉, 무한반복
      reverse: false,  //항목의 순서 반대 기본값 false
      autoPlay: true,   //자동재생 활성화
      autoPlayInterval: Duration(seconds: 3),   // 슬라이드 빈도를 억제하도록 기간을 설정합니다.(자동재생 true)
      autoPlayAnimationDuration: Duration(milliseconds: 800),  // 자동 재생 중 두 전환 페이지 사이의 애니메이션 지속 시간
      autoPlayCurve: Curves.fastOutSlowIn,   // 애니메이션 곡선 물리를 결정
      enlargeCenterPage: true,   // 현재 페이지가 측면 이미지보다 커야 하는지 결정
      scrollDirection: Axis.horizontal,   // 페이지 보기가 스크롤되는 축
   )
 )

원하는 옵션만 사용하면 되기 때문에 주문형 항목 위젯 빌드를 사용하였다.

예)

CarouselSlider.builder(
  itemCount: 15,
  itemBuilder: (BuildContext context, int itemIndex, int pageViewIndex) =>
    Container(
      child: Text(itemIndex.toString()),
    ),
)

 

아래는 내 메인코드

import 'package:flutter/material.dart';

import 'package:carousel_slider/carousel_slider.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  MyApp({super.key});

  final imageUrl = [

    "https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",

    "https://images.pexels.com/photos/33053/dog-young-dog-small-dog-maltese.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",

    "https://images.pexels.com/photos/2664417/pexels-photo-2664417.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",

    "https://images.pexels.com/photos/10361796/pexels-photo-10361796.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",

    "https://images.pexels.com/photos/9409823/pexels-photo-9409823.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"

  ];

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          title: Text('14일차 과제 4번'),

        ),

        body: Center(

          child: CarouselSlider.builder(

              options: CarouselOptions(

                  autoPlay: true,

                  autoPlayInterval: Duration(milliseconds: 2500),

                  enableInfiniteScroll: false),

              itemCount: imageUrl.length,

              itemBuilder:

                  (BuildContext context, int itemIndex, int pageViewIndex) =>

                      ClipRRect(

                        borderRadius: BorderRadius.circular(30),

                        child: Image.network(imageUrl[itemIndex]),

                      )),

        ),

      ),

    );

  }

}

 

Android Emulator - Pixel_XL_API_27_5554 2023-02-16 11-51-24.mp4

6.46MB