A Widget Horizontal Scrollable List with indicator and animations for Flutter Applications

BannerCarousel 

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

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

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add banner_carousel

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  banner_carousel: ^1.2.1

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:banner_carousel/banner_carousel.dart';

example/lib/main.dart

import 'package:banner_carousel/banner_carousel.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Banner Carrousel',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Banner Carousel'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          ///Base
          BannerCarousel(
            banners: BannerImages.listBanners,
            onTap: (id) => print(id),
          ),

          /// Carousel FullScreen
          BannerCarousel.fullScreen(
            banners: BannerImages.listBanners,
            height: 80,
            animation: false,
            initialPage: 1,
            // OR pageController: PageController(initialPage: 6),
          ),

          /// Carousel Customized
          BannerCarousel(
            banners: BannerImages.listBanners,
            customizedIndicators: IndicatorModel.animation(
                width: 20, height: 5, spaceBetween: 2, widthAnimation: 50),
            height: 120,
            activeColor: Colors.amberAccent,
            disableColor: Colors.white,
            animation: true,
            borderRadius: 10,
            onTap: (id) => print(id),
            width: 250,
            indicatorBottom: false,
          ),

          /// Banner Customized Without Indicator
          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: 15),
                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,
                  ),
                ),
              ),
            ],
          ),

          SizedBox(
            height: 20,
          )
        ],
      ),
    );
  }
}

class BannerImages {
  static const String banner1 =
      "https://picjumbo.com/wp-content/uploads/the-golden-gate-bridge-sunset-1080x720.jpg";
  static const String banner2 =
      "https://cdn.mos.cms.futurecdn.net/Nxz3xSGwyGMaziCwiAC5WW-1024-80.jpg";
  static const String banner3 = "https://wallpaperaccess.com/full/19921.jpg";
  static const String banner4 =
      "https://images.pexels.com/photos/2635817/pexels-photo-2635817.jpeg?auto=compress&crop=focalpoint&cs=tinysrgb&fit=crop&fp-y=0.6&h=500&sharp=20&w=1400";

  static List<BannerModel> listBanners = [
    BannerModel(imagePath: banner1, id: "1"),
    BannerModel(imagePath: banner2, id: "2"),
    BannerModel(imagePath: banner3, id: "3"),
    BannerModel(imagePath: banner4, id: "4"),
  ];
}

Download details:

Author: MaiaraM

Source: https://github.com/MaiaraM/banner_carousel

#flutter #android #ios