Giter Site home page Giter Site logo

flutter-carousel's Introduction

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.

flutter-carousel's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

flutter-carousel's Issues

Fade in/out dots

Hey,

does anyone know a way to make the dots left and right of the middle dot fade? Like instagrams dots.

image

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!

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
════════════════════════════════════════════════════════════════════════════════════════════════════

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

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

Null Safety

Hello there. is there any plan update on null safety?

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,)
],
),
),
),
);
}
}`

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.