A carousel package in flutter with various configuration options

Overview

Flutter_Carosel

A simple Carousel Widget with multiple configuration option.

...
dependencies:
 ...
 flutter_multi_carousel: ^1.0.0
...

And install it using flutter packages get on your project folder. After that, just import the module and use it:

import 'package:flutter/material.dart';
import 'package:flutter_multi_carousel/carousel.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Carousel Demo',
      home: CarouselExample(),
    );
  }
}

class CarouselExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Carousel(
            height: 350.0,
            width: 350,
            initialPage: 3,
            allowWrap: false,
            type: Types.slideSwiper,
            onCarouselTap: (i) {
              print("onTap $i");
            },
            indicatorType: IndicatorTypes.bar,
            arrowColor: Colors.black,
            axis: Axis.horizontal,
            showArrow: true,
            children: List.generate(
                7,
                (i) => Center(
                      child:
                          Container(color: Colors.red.withOpacity((i + 1) / 7)),
                    ))),
      ),
    );
  }
}

For detailed demonstration refer this GitHub link

https://github.com/jaiswalshubham84/Flutter-Carousel

Getting Startedslide

Properties Type Default Value Description
height Double null Defines height of carousel.This field is required
width Double null Defines width of carousel. This field is required
axis Axis Axis.horizontal Defines axis of carousel.
type Types "simple" Defines type of carousel.
for ex: Types.simple, Types.slideSwiper, Types.xRotating, Types.yRotating, Types.zRotating, Types.multiRotating
onCarouselTap Function null A callback function
arrowColor Color Colors.white Define the color of arrow
arrowColor Color Colors.white Define the color of arrow
showIndicator Bool true Choice to show indicator in carousel
indicatorType IndicatorTypes bar Defines the type of indicator.
For ex: IndicatorTypes.bar, IndicatorTypes.dot, IndicatorTypes.bubble
initialPage int 0 Start your carousel with custom initial page number
activeIndicatorColor Color Colors.white Defines the color of active indicator
unActiveIndicatorColor Color Colors.black Defines the color of unactive indicator
indicatorBackgroundColor Color Color(0xff121212) Defines the background color of indicator
indicatorBackgroundOpacity Double 0.5 Defines the opacity of indicator background
allowWrap bool true Defines if the carousel should wrap once you reach the end or if your at the begining and go left if it should take you to the end


Credits

Developed by Shubham Jaiswal [email protected]

Contributing

Feel free to Contribute!

For help getting started with Flutter, view our online documentation.

Comments
  • PageController.page cannot be accessed before a PageView is built with it.

    PageController.page cannot be accessed before a PageView is built with it.

    Receive this error when I tap on my image in the carousel to rout to a new page

    PageController.page cannot be accessed before a PageView is built with it. 'package:flutter/src/widgets/page_view.dart': Failed assertion: line 179 pos 7: 'positions.isNotEmpty' User-created ancestor of the error-causing widget was Carousel

    opened by JoshRice1 2
  • HorizontalDragGesture is raising Exception

    HorizontalDragGesture is raising Exception

    ══╡ EXCEPTION CAUGHT BY GESTURE ╞═══════════════════════════════════════════════════════════════════ The following NoSuchMethodError was thrown while handling a gesture: The method 'call' was called on null. Receiver: null Tried calling: call(1)

    When the exception was thrown, this was the stack: #0 Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5) #1 SlideSwipe.build. (package:flutter_multi_carousel/src/carousel/slide_swipe.dart:39:39) #2 _PageViewState.build. (package:flutter/src/widgets/page_view.dart:816:33) #3 NotificationListener._dispatch (package:flutter/src/widgets/notification_listener.dart:131:41) #4 Notification.visitAncestor (package:flutter/src/widgets/notification_listener.dart:49:20) #5 ViewportNotificationMixin.visitAncestor (package:flutter/src/widgets/scroll_notification.dart:33:18) #6 Element.visitAncestorElements (package:flutter/src/widgets/framework.dart:4033:39) #7 Notification.dispatch (package:flutter/src/widgets/notification_listener.dart:65:13) #8 DragScrollActivity.dispatchScrollUpdateNotification (package:flutter/src/widgets/scroll_activity.dart:457:139) #9 ScrollPosition.didUpdateScrollPositionBy (package:flutter/src/widgets/scroll_position.dart:756:14) #10 ScrollPosition.setPixels (package:flutter/src/widgets/scroll_position.dart:247:9) #11 ScrollPositionWithSingleContext.setPixels (package:flutter/src/widgets/scroll_position_with_single_context.dart:85:18) #12 ScrollPositionWithSingleContext.applyUserOffset (package:flutter/src/widgets/scroll_position_with_single_context.dart:128:5) #13 ScrollDragController.update (package:flutter/src/widgets/scroll_activity.dart:386:14) #14 ScrollableState._handleDragUpdate (package:flutter/src/widgets/scrollable.dart:545:12) #15 DragGestureRecognizer._checkUpdate. (package:flutter/src/gestures/monodrag.dart:405:54) #16 GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:184:24) #17 DragGestureRecognizer._checkUpdate (package:flutter/src/gestures/monodrag.dart:405:7) #18 DragGestureRecognizer.handleEvent (package:flutter/src/gestures/monodrag.dart:260:9) #19 PointerRouter._dispatch (package:flutter/src/gestures/pointer_router.dart:78:12) #20 PointerRouter._dispatchEventToRoutes. (package:flutter/src/gestures/pointer_router.dart:124:9) #21 _LinkedHashMapMixin.forEach (dart:collection-patch/compact_hash.dart:377:8) #22 PointerRouter._dispatchEventToRoutes (package:flutter/src/gestures/pointer_router.dart:122:18) #23 PointerRouter.route (package:flutter/src/gestures/pointer_router.dart:108:7) #24 GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:220:19) #25 GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:200:22) #26 GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:158:7) #27 GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:104:7) #28 GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:88:7) #32 _invoke1 (dart:ui/hooks.dart:267:10) #33 _dispatchPointerDataPacket (dart:ui/hooks.dart:176:5) (elided 3 frames from dart:async)

    Handler: "onUpdate" Recognizer: HorizontalDragGestureRecognizer#f5c92 ════════════════════════════════════════════════════════════════════════════════════════════════════

    ════════ Exception caught by gesture ═══════════════════════════════════════════════════════════════ The following NoSuchMethodError was thrown while handling a gesture: The method 'call' was called on null. Receiver: null Tried calling: call(1)

    When the exception was thrown, this was the stack: #0 Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5) #1 SlideSwipe.build. (package:flutter_multi_carousel/src/carousel/slide_swipe.dart:39:39) #2 _PageViewState.build. (package:flutter/src/widgets/page_view.dart:816:33) #3 NotificationListener._dispatch (package:flutter/src/widgets/notification_listener.dart:131:41) #4 Notification.visitAncestor (package:flutter/src/widgets/notification_listener.dart:49:20) ... Handler: "onUpdate" Recognizer: HorizontalDragGestureRecognizer#f5c92 start behavior: start ════════════════════════════════════════════════════════════════════════════════════════════════════

    opened by thrushfire 1
  • Null Safety Support

    Null Safety Support

    Hey :) I was wondering whether you have plans to release a version of your package supporting the new null safety feature of Flutter/Dart.

    Thanks in advance for your reply!

    opened by Giuspepe 0
  • Allow auto rotation and infinite rotatiomn

    Allow auto rotation and infinite rotatiomn

    The widget is working well with my application. But i want to ask is there a way i can allow the carousel to auto rotate and infinite rotation. i followed your step for allowWrap : true/false but it does not seem to be working for me

    opened by aTechieInc 0
  • The method 'updateRenderer' was called on null

    The method 'updateRenderer' was called on null

    The method 'updateRenderer' was called on null. Receiver: null Tried calling: updateRenderer(false)

    Everytime I scroll between the widgets, I get this error.

    Code:

    `import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_multi_carousel/carousel.dart'; import 'package:flutter_story_app_concept/cardPage.dart';

    class MyPage extends StatefulWidget { @override _MyPageState createState() => _MyPageState(); }

    class _MyPageState extends State {

    int initial = 2;

    @override Widget build(BuildContext context) { return Container( decoration: BoxDecoration( gradient: LinearGradient( colors: [ Color(0xFF1b1e44), Color(0xff1b1e44), ], begin: Alignment.topCenter, end: Alignment.bottomCenter, tileMode: TileMode.clamp)), child: Scaffold( appBar: CupertinoNavigationBar( middle: Text("My Cards", style: TextStyle(color: Colors.white),), backgroundColor: Colors.transparent, ), backgroundColor: Colors.transparent, body: SingleChildScrollView( child: Column( children: [ SizedBox(height: 20,), SingleChildScrollView( scrollDirection: Axis.horizontal, padding: EdgeInsets.only(left: 20, right: 20), child: Row( children: [ Center( child: Hero( tag: 'dash', child: ClipRRect( borderRadius: BorderRadius.circular(20.0), child: Image.asset("assets/image_02.jpg", width: 296.0, height: 222.0), ), ), ), SizedBox(width: 20,), Center( child: ClipRRect( borderRadius: BorderRadius.circular(20.0), child: Container( padding: EdgeInsets.only(left: 20, top: 20), width: 296.0, height: 222.0, color: Colors.white, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text("Random Analytics", style: TextStyle(color: Colors.black, fontSize: 24, fontWeight: FontWeight.w500),), Text("Bla Bla Bla"), Text("\nGRAPH",style: TextStyle(fontWeight: FontWeight.bold, fontSize: 26),), Text("\nMore Text") ], ), alignment: Alignment.centerLeft, ) ), ), SizedBox(width: 20,), Center( child: ClipRRect( borderRadius: BorderRadius.circular(20.0), child: Container( padding: EdgeInsets.all(20), width: 296.0, height: 222.0, decoration: BoxDecoration( color: Colors.transparent, border: Border.all( color: Colors.red ), borderRadius: BorderRadius.circular(20) ), child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text("More Analytics", style: TextStyle(color: Colors.white, fontSize: 24, fontWeight: FontWeight.w500),), Text("Bla Bla Bla", style: TextStyle(color: Colors.white),), Container( decoration: BoxDecoration(borderRadius: BorderRadius.circular(30), color: Colors.green), height: 60, width: 60, ), Text("More Text",style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: Colors.white)) ], ), alignment: Alignment.center, ) ), ), ], ), ), SizedBox(height: 30,), Container( child: Carousel( showIndicator: true, indicatorType: IndicatorTypes.dot, indicatorBackgroundOpacity: 0, allowWrap: false, height: MediaQuery.of(context).size.height*.58, width: MediaQuery.of(context).size.width*95, initialPage: initial, type: Types.slideSwiper, axis: Axis.horizontal, children: [ GestureDetector( onTap: () { Navigator.push( context, CupertinoPageRoute(builder: (BuildContext context) => CardPage( start: Colors.deepOrange[900], end: Colors.yellow[400], tag: 'num1', name: 'Nithin Sai', bank: 'Vijaya Bank', numb: '4432 5677 9812 0120', date: '02/23', ), fullscreenDialog: true ), ); setState(() { initial = 0; }); }, child: Hero( tag: 'num1', child: Container( padding: EdgeInsets.all(20), decoration: BoxDecoration( borderRadius: BorderRadius.circular(15), gradient: LinearGradient( colors: [ Colors.deepOrange[900],Colors.yellow[400], ], begin: Alignment.topLeft, end: Alignment.bottomRight ) ), alignment: Alignment.topLeft, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text("Nithin Sai", style: TextStyle(fontSize: 40,color: Colors.white, fontWeight: FontWeight.bold, decoration: TextDecoration.none ), ), Text("\nVijaya Bank", style: TextStyle(fontSize: 30,color: Colors.grey[400], fontWeight: FontWeight.bold, decoration: TextDecoration.none ), ), ], ), ), flightShuttleBuilder: ( BuildContext flightContext, Animation animation, HeroFlightDirection flightDirection, BuildContext fromHeroContext, BuildContext toHeroContext, ) { final Hero toHero = toHeroContext.widget; return RotationTransition( turns: animation, child: toHero.child, ); }, ), ), GestureDetector( onTap: () { Navigator.push( context, CupertinoPageRoute(builder: (BuildContext context) => CardPage( start: Color(0xffe633e6), end: Color(0xff0000aa), tag: 'num2', name: 'Kashware', bank: 'ICICI Bank', numb: '4432 5209 9812 2314', date: '12/43', ), fullscreenDialog: true ), ); setState(() { initial = 1; }); }, child: Hero( tag: 'num2', child: Container( padding: EdgeInsets.all(20), decoration: BoxDecoration( borderRadius: BorderRadius.circular(15), gradient: LinearGradient( colors: [ Color(0xffe633e6), Color(0xff0000aa) ], begin: Alignment.topLeft, end: Alignment.bottomRight ) ), alignment: Alignment.topLeft, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text("Kashware", style: TextStyle(fontSize: 40,color: Colors.white, fontWeight: FontWeight.bold, decoration: TextDecoration.none ), ), Text("\nICICI Bank", style: TextStyle(fontSize: 30,color: Colors.grey[400], fontWeight: FontWeight.bold, decoration: TextDecoration.none ), ), ], ), ), flightShuttleBuilder: ( BuildContext flightContext, Animation animation, HeroFlightDirection flightDirection, BuildContext fromHeroContext, BuildContext toHeroContext, ) { final Hero toHero = toHeroContext.widget; return RotationTransition( turns: animation, child: toHero.child, ); }, ), ), GestureDetector( onTap: () { Navigator.push( context, CupertinoPageRoute(builder: (BuildContext context) => CardPage( start: Colors.amber, end: Color(0xffaa0000), tag: 'num3', name: 'Random Person', bank: 'Bank Of Baroda', numb: '4577 0434 5678 9010', date: '06/28', ), fullscreenDialog: true ), ); setState(() { initial = 2; }); }, child: Hero( tag: 'num3', child: Container( padding: EdgeInsets.all(20), decoration: BoxDecoration( borderRadius: BorderRadius.circular(15), gradient: LinearGradient( colors: [ Colors.amber, Color(0xffaa0000) ], begin: Alignment.topLeft, end: Alignment.bottomRight ) ), alignment: Alignment.topLeft, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text("Random Person", style: TextStyle(fontSize: 40,color: Colors.white, fontWeight: FontWeight.bold, decoration: TextDecoration.none ), ), Text("\nBank Of Baroda", style: TextStyle(fontSize: 30,color: Colors.grey[400], fontWeight: FontWeight.bold, decoration: TextDecoration.none ), ), ], ), ), flightShuttleBuilder: ( BuildContext flightContext, Animation animation, HeroFlightDirection flightDirection, BuildContext fromHeroContext, BuildContext toHeroContext, ) { final Hero toHero = toHeroContext.widget; return RotationTransition( turns: animation, child: toHero.child, ); }, ), ), GestureDetector( onTap: () { Navigator.push( context, CupertinoPageRoute(builder: (BuildContext context) => CardPage( start: Color(0xff4411ff), end: Colors.pink, tag: 'num4', name: 'Ranveer Singh', bank: 'HDFC Bank', numb: '1299 5630 7612 8710', date: '01/20', ), fullscreenDialog: true ), ); setState(() { initial = 3; }); }, child: Hero( tag: 'num4', child: Container( padding: EdgeInsets.all(20), decoration: BoxDecoration( borderRadius: BorderRadius.circular(15), gradient: LinearGradient( colors: [ Color(0xff4411ff), Colors.pink ], begin: Alignment.topLeft, end: Alignment.bottomRight ) ), alignment: Alignment.topLeft, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text("Ranveer Singh", style: TextStyle(fontSize: 40,color: Colors.white, fontWeight: FontWeight.bold, decoration: TextDecoration.none ), ), Text("\nHDFC Bank", style: TextStyle(fontSize: 30,color: Colors.grey[400], fontWeight: FontWeight.bold, decoration: TextDecoration.none ), ), ], ), ), flightShuttleBuilder: ( BuildContext flightContext, Animation animation, HeroFlightDirection flightDirection, BuildContext fromHeroContext, BuildContext toHeroContext, ) { final Hero toHero = toHeroContext.widget; return RotationTransition( turns: animation, child: toHero.child, ); }, ), ), ], ), ), SizedBox(height: 20,), Center( child: Container( decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(10) ), height: 100, width: MediaQuery.of(context).size.width-30, child: Text("Something Else", style: TextStyle(fontSize: 20),), alignment: Alignment.center, ) ), SizedBox(height: 20,) ], ), ), ), ); } }`

    opened by ninjaasmoke 3
Owner
GeekyAnts
GeekyAnts
A Flutter slidable widget that provides an easy to use configuration. Highly customisable. Just as you want it!

A Flutter slidable widget that provides an easy to use configuration. Highly customisable. Just as you want it!

Ravi Kavaiya 89 Dec 8, 2022
Create flutter project with all needed configuration in two minutes (theme, localization, connect to firebase, FCM, local notifications, safe API call, error handling, animation..etc)

Flutter GetX Template Flutter Getx template to make starting project fast and easy . Introduction We all face the same problem when we want to start a

Emad Beltaje 150 Jan 7, 2023
A customizable carousel slider widget in Flutter which supports inifinte scrolling, auto scrolling, custom child widget, custom animations and built-in indicators.

flutter_carousel_widget A customizable carousel slider widget in Flutter. Features Infinite Scroll Custom Child Widget Auto Play Horizontal and Vertic

NIKHIL RAJPUT 7 Nov 26, 2022
A customizable carousel slider for Flutter. Supports infinite sliding, custom indicators, and custom animations with many pre-built indicators and animations.

Flutter Carousel Slider A customizable carousel slider for flutter Screenshots Installing dependencies: flutter_carousel_slider: ^1.0.8 Demo Demo a

Udara Wanasinghe 23 Nov 6, 2022
This is a view pager provides carousel effect and dismissal animation when page was removed.

This is a view pager provides carousel effect and dismissal animation when page was removed. Features Carousel effect Horizontal Vertical Dismissal an

Zhe-Yi, Zhu 4 Dec 22, 2022
WYSIWYG editor for Flutter with a rich set of supported formatting options. (WIP)

✨ rich_editor WYSIWYG editor for Flutter with a rich set of supported formatting options. Based on https://github.com/dankito/RichTextEditor, but for

Festus Olusegun 116 Dec 27, 2022
Fluro is a Flutter routing library that adds flexible routing options like wildcards, named parameters and clear route definitions.

English | Português The brightest, hippest, coolest router for Flutter. Features Simple route navigation Function handlers (map to a function instead

Luke Pighetti 3.5k Jan 4, 2023
A Flutter application organizing access to information on University of Toronto Food Options.

UofT Foods Description A Flutter Mobile App designed to aid UofT Students and Staff easily find food options across all campuses. Features Campus Sele

Kyrel Jerome 2 Jan 8, 2021
A Flutter select form field widget. It shows a list of options in a dropdown menu.

select_form_field A Flutter select field widget. It shows a list of options in a dropdown menu. This widget extend TextField and has a similar behavio

m3uzz Soluções em TI 8 Sep 14, 2022
A UI library for easily adding audio waveforms to your apps, with several customization options

A UI library for easily adding audio waveforms to your apps, with several custom

RutvikTak 64 Dec 11, 2022
Tic Tac Toe game with single-player and multi-player options. Implemented minimax algorithm.

flutter_tic_tac_toe A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you star

null 0 Jan 1, 2022
This is a message/chat app with light and dark theme options

this is a message/chat app #ui using #flutter that runs both Android and iOS devices also has a dark and light theme. We create in total 4 screens all

Enes Aydoğdu 17 Dec 30, 2022
A sophisticated tool for managing queues of asynchronous tasks, with a stream interface, strong typing and lots of helpful options.

Secretary A sophisticated task manager. Secretary is a tool for keeping your futures in check. It's useful for managing queues of asynchronous tasks,

Alex Baker 5 Dec 21, 2022
Flutter package that provides you custom clippers to help you achieve various custom shapes.

flutter_custom_clippers Flutter package that provides you custom clippers to help you achieve various custom shapes. Usage To use this plugin, add flu

Damodar Lohani 291 Dec 23, 2022
Morphing Coffee 0 Jan 27, 2022
A package that offers various page indicators inlcuding a Flutter implementation of the Ink Page Indicator

A package that offers various page indicators inlcuding a Flutter implementation of the Ink Page Indicator. See below for more examples.

null 50 Jan 6, 2022
ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter

Basic Widgets Examples This is aimed for complete beginners in Flutter, to get them acquainted with the various basic widgets in Flutter. Run this pro

Pooja Bhaumik 815 Jan 3, 2023
Felipe Dias Casseb 2 Feb 9, 2022
A basic template of Flutter to get started. Includes various folders and packages that might be necessary.

Flutter App - Basic Template It's a time saving template with basic project structure, packages and other files like constants.dart to get started rat

Muhammad Hamza 47 Jun 12, 2022