분류, 패키지 및 저장소 검색

GitHub 저장소MaiaraM/banner_carousel

banner_carousel

배너 캐러셀용 플러터 패키지

banner_carousel 프로젝트 이미지
스타
16
포크
8
최근 푸시(UTC)
2021. 6. 28.
프로젝트 상태
활성

원본 README

아래는 영문 원문 스냅샷입니다. 최신 내용은 GitHub에서 확인하세요.

BannerCarousel

BannerCarousel is a custom widget that builds a FullScreen carousel or not, with animation on the indicators.

drawing

Parameters

  • banners - List of BannerModel
  • animation - boolean for indicator animation - Default true
  • indicatorBottom - indicator is below carousel - Default true
  • showIndicator - show indicator - Default true
  • height - Default double 150
  • initialPage
  • viewportFraction
  • borderRadius - Default 5
  • margin
  • activeColor
  • disableColor
  • customizedIndicators - Accepts a IndicatorModel model
  • onPageChanged
  • onTap
  • customizedBanners - List of Widget
  • spaceBetween - Double
  • pageController - PageController

Models

  • BannerModel
  • IndicatorModel

Example

List<BannerModel> listBanners = [
    BannerModel(pathImage: banner1, id: "1"),
    BannerModel(pathImage: banner2, id: "2"),
    BannerModel(pathImage: banner3, id: "3"),
    BannerModel(pathImage: banner4, id: "4"),
];
Default:
drawing
BannerCarousel(banners: listBanners)
FullScreen:
drawing
 BannerCarousel.fullScreen(
    banners: listBanners,
    animation: false,
 );
Custom Carousel:
drawing
BannerCarousel(
  banners: listBanners,
  customizedIndicators: IndicatorModel.animation(width: 20, height: 5, spaceBetween: 2, widthAnimation: 50),
  height: 120,
  activeColor: Colors.amberAccent,
  disableColor: Colors.white,
  animation: true,
  borderRadius: 10,
  width: 250,
  indicatorBottom: false,
),
Custom Banner:
drawing
BannerCarousel(
   animation: false,
   viewportFraction: 0.60,
   showIndicator: false,
   customizedBanners: [
        Container(
           decoration: BoxDecoration(
              border: Border.all(color: Colors.black,width: 2),),
              child: Image.network(BannerImages.banner1)),
        Container(
             margin: EdgeInsets.symmetric(horizontal: 20),
             decoration: BoxDecoration(
                  boxShadow: [
                     BoxShadow(
                        color: Colors.black.withOpacity(0.25),
                        spreadRadius: 0,
                        blurRadius: 4,
                        offset: Offset(0, 3),
                      ),
                    ],
               ),
              child: Image.network(BannerImages.banner2)),
         Container(
             margin: EdgeInsets.symmetric(horizontal: 20),
             decoration: BoxDecoration(
             border: Border.all(
                    color: Colors.green,
                    width: 3,
                  ),
                  borderRadius: BorderRadius.circular(50),
              image: DecorationImage(
              image: NetworkImage(
                        'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
              fit: BoxFit.cover,
              ),
           ),
       ),
    ],
),
Ontap Event:
BannerCarousel(
  banners: listBanners,
  onTap: (id) => print(id),
)
Maiara Martins GitHub avatar
GitHub 작성자

Maiara Martins ↗

Backend Engineer

언어DartHTMLRubySwiftKotlinObjective-C

이 저장소가 배포한 패키지

사용 중인 의존성

의존성 목록 2 개

  • flutter{"sdk":"flutter"}
  • flutter_test개발 의존성{"sdk":"flutter"}

프로젝트에 맞는 저장소를 선택하려면?

사용 목적에 따라 검색하고 개발 활동을 비교한 뒤 원본 저장소에서 요구 사항을 확인하세요.

  1. 이름, 작성자 또는 설명으로 검색하고 기술 주제로 범위를 좁힙니다.
  2. 스타, 포크, 최근 푸시를 함께 비교하세요. 스타는 관심의 지표이며 품질을 보장하지 않습니다.
  3. 사용하기 전에 GitHub에서 README, 라이선스, Issues를 확인하세요.

출처 및 관리

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗