패키지, 저장소 및 앱 카테고리 검색

패키지 상세v1.0.3

flutter_multi_carousel

다양한 유형과 구성이 가능한 간단한 카루셀 패키지입니다.

30일 다운로드
53
좋아요
30
Pub 점수
25

패키지 설치

flutter pub add flutter_multi_carousel

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

다양한 유형의 캐러셀을 만들 수 있는 유연한 Flutter 패키지로, 사용자 정의 가능한 설정을 지원합니다. 표준, 커버 플로우, 인터랙티브 레이아웃 등 다양한 캐러셀 스타일을 지원하며, 부드러운 스크롤링과 반응형 디자인을 가능하게 합니다. 이미지, 제품 또는 콘텐츠를 시각적으로 매력적으로 보여주는 데 이상적입니다. 가볍고 쉽게 통합할 수 있으며, 구성 가능한 애니메이션, 지시기 및 스와이프 제스처를 통해 유연성을 제공합니다. 복잡한 설정 없이도 동적이고 재사용 가능한 캐러셀 컴포넌트를 원하는 개발자를 위한 것입니다.

사용 사례

  • 이미지 갤러리 표시
  • 제품 목록 전시
  • 인터랙티브 콘텐츠 슬라이더 만들기
  • 온보딩 화면 구축
  • 앱에서 주목할 만한 항목을 소개합니다
  • 시각적 전환을 통한 사용자 참여도 향상

주요 기능

  • 다양한 카루셀 유형(기본, 커버 플로우)
  • 사용자 정의 가능한 애니메이션 및 전환
  • 내장형 페이지네이션 표시기
  • 스와이프 제스처 지원
  • 반응형 레이아웃 처리
  • 최소 구성으로 간편한 통합

적합한 대상

  • 모바일 앱 개발자
  • UI/UX 디자이너
  • 전자상거래 애플리케이션
  • 콘텐츠가 풍부한 애플리케이션
  • 인터랙티브 프로토타입
  • 동적 콘텐츠 표시가 필요한 앱

고려 사항

  • 제한된 플랫폼별 사용자 지정
  • 내장된 자동 재생 제어 없음
  • 대규모 데이터셋을 수동으로 처리해야 합니다
  • 복잡한 레이아웃을 위해 추가 스타일링이 필요할 수 있습니다
  • 매우 높은 성능 시나리오에 최적화되지 않음
  • 업데이트를 위해 외부 저장소에 의존합니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

Flutter_Carosel

A simple Carousel Widget with multiple configuration option.

...
dependencies:
 ...
 flutter_multi_carousel: ^1.0.0
...

And install it using flutter packages get on your project folder. After that, just import the module and use it:

import 'package:flutter/material.dart';
import 'package:flutter_multi_carousel/carousel.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Carousel Demo',
      home: CarouselExample(),
    );
  }
}

class CarouselExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Carousel(
            height: 350.0,
            width: 350,
            initialPage: 3,
            allowWrap: false,
            type: Types.slideSwiper,
            onCarouselTap: (i) {
              print("onTap $i");
            },
            indicatorType: IndicatorTypes.bar,
            arrowColor: Colors.black,
            axis: Axis.horizontal,
            showArrow: true,
            children: List.generate(
                7,
                (i) => Center(
                      child:
                          Container(color: Colors.red.withOpacity((i + 1) / 7)),
                    ))),
      ),
    );
  }
}

For detailed demonstration refer this GitHub link

https://github.com/jaiswalshubham84/Flutter-Carousel

Getting Startedslide

Properties Type Default Value Description
height Double null Defines height of carousel.This field is required
width Double null Defines width of carousel. This field is required
axis Axis Axis.horizontal Defines axis of carousel.
type Types "simple" Defines type of carousel.
for ex: Types.simple, Types.slideSwiper, Types.xRotating, Types.yRotating, Types.zRotating, Types.multiRotating
onCarouselTap Function null A callback function
arrowColor Color Colors.white Define the color of arrow
arrowColor Color Colors.white Define the color of arrow
showIndicator Bool true Choice to show indicator in carousel
indicatorType IndicatorTypes bar Defines the type of indicator.
For ex: IndicatorTypes.bar, IndicatorTypes.dot, IndicatorTypes.bubble
initialPage int 0 Start your carousel with custom initial page number
activeIndicatorColor Color Colors.white Defines the color of active indicator
unActiveIndicatorColor Color Colors.black Defines the color of unactive indicator
indicatorBackgroundColor Color Color(0xff121212) Defines the background color of indicator
indicatorBackgroundOpacity Double 0.5 Defines the opacity of indicator background
allowWrap bool true Defines if the carousel should wrap once you reach the end or if your at the begining and go left if it should take you to the end


Credits

Developed by Shubham Jaiswal <jaiswal.shubham84@gmail.com>

Contributing

Feel free to Contribute!

For help getting started with Flutter, view our online documentation.

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.