카테고리 없음

carousel_slider 패키지

신승호. 2023. 2. 16. 11:52

“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 = [
  ];
  @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