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

banner_carousel कवर
पैकेज विवरणv1.2.1

banner_carousel

एक विंडो क्षैतिज स्क्रॉल करने योग्य सूची जिसमें संकेतक और एनीमेशन हैं।

AndroidiOSWebmacOSWindowsLinux
30-दिन डाउनलोड
588
लाइक
147
Pub अंक
150

पैकेज इंस्टॉल करें

flutter pub add banner_carousel

पैकेज अवलोकन

सार्वजनिक जानकारी से बना चयन मार्गदर्शन। केवल संदर्भ हेतु।

बैनरकारोसेल एक फ्लटर विजेट है जो चिकनी एनीमेशन और विजुअल संकेतक के साथ एक क्षैतिज रूप से स्क्रॉल करने वाली सूची प्रदान करता है जो वर्तमान स्थिति को दिखाता है। इसका डिज़ाइन बैनर, छवियों या सामग्री की एक श्रृंखला को अधिक आकर्षक और बातचीत करने वाले तरीके से कई प्लेटफॉर्मों पर प्रदर्शित करने के लिए किया गया है। कारोसेल टच गेस्चर, स्वचालित स्क्रॉलिंग और कस्टमाइज़ेबल इंडिकेटर्स का समर्थन करता है, जिससे यह ऐप में विशेष विषयों को प्रदर्शित करने के लिए आदर्श होता है। इसे मिनिमल सेटअप के साथ मौजूदा फ्लटर प्रोजेक्ट में बिना किसी दिक्कत के एकीकृत किया जा सकता है।

उपयोग

  • ई-कॉमर्स ऐप्स में फीचर्ड उत्पादों को प्रदर्शित करें
  • समाचार या मीडिया ऐप्स में प्रचार बैनर प्रदर्शित करें
  • ऑनबोर्डिंग स्क्रीन्स में कंटेंट हाइलाइट करें
  • नेविगेशन संकेतकों के साथ छवि गैलरी प्रस्तुत करें

मुख्य विशेषताएँ

  • हॉरिजॉन्टल स्क्रॉल करने योग्य लेआउट
  • आइटम के बीच एनिमेटेड ट्रांज़िशन
  • कस्टमाइज़ेबल इंडिकेटर डॉट्स
  • स्वचालित स्लाइडिंग का समर्थन करता है
  • गति-आधारित नेविगेशन
  • प्लेटफॉर्म के अनुकूलता

इनके लिए उपयुक्त

  • मोबाइल और वेब ऐप डेवलपर्स
  • इंटरैक्टिव कारोसेल खोज रहे डिज़ाइनर
  • दृश्य सामग्री हाइलाइट करने वाले ऐप्स

विचार योग्य बातें

  • बड़े डेटासेट के लिए अनुकूलन की आवश्यकता हो सकती है
  • सूचक के शैली के लिए कस्टम कॉन्फ़िगरेशन की आवश्यकता होती है
  • प्रति स्लाइड भारी विजेट्स के साथ प्रदर्शन प्रभाव

मूल README

संबंधित सोर्स रिपॉज़िटरी के मूल README का स्नैपशॉट। नवीनतम सामग्री के लिए रिपॉज़िटरी देखें।

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),
)

श्रेणियाँ

सोर्स रिपॉज़िटरी

इस पैकेज का उपयोग करने वाले प्रोजेक्ट

अभी कोई डेटा उपलब्ध नहीं है।