श्रेणियाँ, पैकेज और रिपॉज़िटरी खोजें

GitHub रिपॉज़िटरीMaiaraM/banner_carousel

banner_carousel

बैनर कारोसेल के लिए फ्लटर पैकेज करें

banner_carousel प्रोजेक्ट कवर
स्टार
16
फ़ोर्क
8
अंतिम पुश (UTC)
28 जून 2021
प्रोजेक्ट स्थिति
सक्रिय

मूल 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 ↗