banner_carousel

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

BannerCarousel ist ein Flutter-Widget, das eine horizontal scrollbare Liste mit sanften Animationen und visuellen Indikatoren zur Anzeige der aktuellen Position bietet. Es wurde für die ansprechende und interaktive Darstellung einer Reihe von Bannern, Bildern oder Inhalten auf mehreren Plattformen entwickelt. Der Carousel unterstützt Touch-Gesten, automatisches Scrollen und anpassbare Indikatoren, wodurch er ideal für die Präsentation hervorgehobener Inhalte in Apps ist. Er lässt sich nahtlos in bestehende Flutter-Projekte mit minimalem Aufwand integrieren.

Anwendungsfälle

Hervorgehobene Produkte in E-Commerce-Apps präsentieren
Promotionsschaltungen in Nachrichten- oder Medien-Apps anzeigen
Inhalt in Onboarding-Bildschirmen hervorheben
Bildgalerien mit Navigationsindikatoren anzeigen

Hauptmerkmale

Horizontal scrollbares Layout
Animierte Übergänge zwischen Elementen
Anpassbare Indikatorpunkte
Unterstützt automatisches Schieben
Geste gesteuerte Navigation
Plattformübergreifende Kompatibilität

Geeignet für

Mobile- und Web-App-Entwickler
Designer, die interaktive Karussells suchen
Apps, die visuelle Inhaltsmarkierung erfordern

Hinweise

Kann eine Optimierung für große Datensätze erfordern
Die Indikator-Stilisierung erfordert eine benutzerdefinierte Konfiguration
Leistungsbeeinträchtigung bei vielen Widgets pro Folie

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

BannerCarousel

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

Parameters
Models
Examples

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:

BannerCarousel(banners: listBanners)

FullScreen:

 BannerCarousel.fullScreen(
    banners: listBanners,
    animation: false,
 );

Custom Carousel:

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:

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

Kategorien, Pakete und Repositories suchen

Paket installieren