Search categories, packages and repositories

GitHub repositoryMaiaraM/banner_carousel

banner_carousel

Package Flutter to Banner Carousel

banner_carousel project cover
Stars
16
Forks
8
Last push (UTC)
Jun 28, 2021
Project status
Active

Original README

English project snapshot. Visit GitHub for the latest content.

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 author

Maiara Martins ↗

Backend Engineer

LanguagesDartHTMLRubySwiftKotlinObjective-C

Packages published by this repository

Dependencies used

Dependency list 2 items

  • flutter{"sdk":"flutter"}
  • flutter_testDevelopment{"sdk":"flutter"}

How do I choose a repository?

Start with your use case, compare repository activity, and check the original project before adopting it.

  1. Search by repository name, owner or description, then narrow the results by topic.
  2. Compare stars, forks and recent pushes. Stars show community interest, not a guarantee of quality.
  3. Read the README, license and issues on GitHub before using a project.

Sources and maintenance

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

GitHub Docs — About repositories ↗