A customizable carousel slider for Flutter. Supports infinite sliding, custom indicators, and custom animations with many pre-built indicators and animations.

Overview

Flutter Carousel Slider

A customizable carousel slider for flutter

pub package

Screenshots

Installing

dependencies:
  flutter_carousel_slider: ^1.0.8

Demo

Demo application available at https://flutter-carousel-slider.web.app/

Using

import 'package:flutter/material.dart';
import 'package:flutter_carousel_slider/carousel_slider.dart';
import 'package:flutter_carousel_slider/carousel_slider_indicators.dart';
import 'package:flutter_carousel_slider/carousel_slider_transforms.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Carousel Slider',
      home: MyHomePage(title: 'Flutter Carousel Slider'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  final List<Color> colors = [
    Colors.red,
    Colors.orange,
    Colors.yellow,
    Colors.green,
    Colors.blue,
    Colors.indigo,
    Colors.purple,
  ];
  final List<String> letters = [
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
  ];

  bool _isPlaying = false;
  GlobalKey<CarouselSliderState> _sliderKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        children: <Widget>[
          Container(
            height: 500,
            child: CarouselSlider.builder(
                key: _sliderKey,
                unlimitedMode: true,
                slideBuilder: (index) {
                  return Container(
                    alignment: Alignment.center,
                    color: colors[index],
                    child: Text(
                      letters[index],
                      style: TextStyle(fontSize: 200, color: Colors.white),
                    ),
                  );
                },
                slideTransform: CubeTransform(),
                slideIndicator: CircularSlideIndicator(
                  padding: EdgeInsets.only(bottom: 32),
                ),
                itemCount: colors.length),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 32),
            child: Align(
              child: ConstrainedBox(
                constraints: BoxConstraints(minWidth: 240, maxWidth: 600),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    IconButton(
                      iconSize: 48,
                      icon: Icon(Icons.skip_previous),
                      onPressed: () {
                        _sliderKey.currentState.previousPage();
                      },
                    ),
                    IconButton(
                      iconSize: 64,
                      icon: Icon(
                        _isPlaying
                            ? Icons.pause_circle_outline
                            : Icons.play_circle_outline,
                      ),
                      onPressed: () {
                        setState(
                          () {
                            _isPlaying = !_isPlaying;
                            _sliderKey.currentState.setPlaying(_isPlaying);
                          },
                        );
                      },
                    ),
                    IconButton(
                      iconSize: 48,
                      icon: Icon(Icons.skip_next),
                      onPressed: () {
                        _sliderKey.currentState.nextPage();
                      },
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
Comments
  • [Feature]optional slideTransform and slideIndicator

    [Feature]optional slideTransform and slideIndicator

    if slideTransform is null, use slideTransform: DefaultTransform(), is better.

    and slideIndicator is not needed. I put indicatorRadius: 0, instead.

                slideIndicator: CircularSlideIndicator(
                  padding: EdgeInsets.only(bottom: 32),
                  indicatorRadius: 0,
                ),
    
    opened by shinriyo 3
  • Support clipBehavior parameter

    Support clipBehavior parameter

    Currently CarouselSlider clips children's content visually even though they can intentionally overflow when laid out with the help of OverflowBox widget. The ability to customize clipBehavior parameter allows setting it to Clip.none and allowing children to paint their content without limitations.

    opened by foxanna 2
  • Offset argument contained a NaN value.

    Offset argument contained a NaN value.

    description: when CarouselSlider contains more than 1 image, everything goes correctly. but when only contains 1 image, the container only shows half of the image, the other half is blank.

    issue details: Exception caught by rendering library The following assertion was thrown during paint(): Offset argument contained a NaN value. 'dart:ui/painting.dart': Failed assertion: line 43: ''

    The relevant error-causing widget was: CarouselSlider-[LabeledGlobalKey#04485] file:///D:/flutter/abangate/lib/gallery_page.dart:84:39 When the exception was thrown, this was the stack: #2 _offsetIsValid (dart:ui/painting.dart:43:10) #3 Canvas.drawCircle (dart:ui/painting.dart:3787:12) #4 CircularWaveIndicatorPainter.paint (package:flutter_carousel_slider/carousel_slider_indicators.dart:190:12) #5 RenderCustomPaint._paintWithPainter (package:flutter/src/rendering/custom_paint.dart:531:13) #6 RenderCustomPaint.paint (package:flutter/src/rendering/custom_paint.dart:572:7) ... The following RenderObject was being processed when the exception was fired: RenderCustomPaint#5f0dc ... parentData: (can use size) ... constraints: BoxConstraints(w=10.0, h=6.0) ... size: Size(10.0, 6.0) RenderObject: RenderCustomPaint#5f0dc parentData: (can use size) constraints: BoxConstraints(w=10.0, h=6.0) size: Size(10.0, 6.0)

    FlutterCarouselSlider Version: 1.0.2

    My code: Container( height: screenSize.height, width: screenSize.width, child: CarouselSlider.builder( key: _sliderKey, unlimitedMode: true, slideBuilder: (index) { return Container( color: Colors.black, alignment: Alignment.center, child: GestureDetector( child: Image.file( File(widget.myContents[widget.contentIndex].images[index]), ), onTap: () { showDetails = !showDetails; setState(() {}); }, ), ); }, slideTransform: ParallaxTransform(), slideIndicator: CircularWaveSlideIndicator( currentIndicatorColor: Colors.white38, indicatorBackgroundColor: Colors.white24, padding: EdgeInsets.only(bottom: 32), indicatorRadius: 3, itemSpacing: 10, ), itemCount: widget.myContents[widget.contentIndex].images.length), ),

    opened by BigSeanZzz 2
  • OnSlideStart and OnSlideEnd

    OnSlideStart and OnSlideEnd

    Captured Slide Start and Slide End events with Notification Listener. Therefore users will be able to pass a VoidCallback and take some action when the slide starts and when it ends.

    opened by erkecanbazoglu 0
  • CarouselSliderState - isn't a type so it can't be used as a type argument

    CarouselSliderState - isn't a type so it can't be used as a type argument

    With flutter 3.3. I get the following error in Visual Studio Code when trying to run the example:

    The name 'CarouselSliderState' isn't a type so it can't be used as a type argument.
    Try correcting the name to an existing type, or defining a type named 'CarouselSliderState'.
    

    for the line

    GlobalKey<CarouselSliderState> _sliderKey = GlobalKey();
    

    and when trying to execute the code with flutter run -d chrome

    lib/.../cube_slider.dart:319:13: Error: Type 'CarouselSliderState' not found.
      GlobalKey<CarouselSliderState> _sliderKey = GlobalKey();
    

    I imported the modules like

    import 'package:flutter/material.dart';
    import 'package:flutter_carousel_slider/carousel_slider.dart';
    import 'package:flutter_carousel_slider/carousel_slider_indicators.dart';
    import 'package:flutter_carousel_slider/carousel_slider_transforms.dart';
    
    opened by sambaPython24 3
  • Adding viewport fraction shows side containers.

    Adding viewport fraction shows side containers.

    When using viewport fraction, return slider content is shown in both sides flutter_carousel_slider

    Container( height: 400, child: CarouselSlider.builder( unlimitedMode: true, slideBuilder: (index) { return Container( alignment: Alignment.center, color: Colors.red, child: Text( letters[index], style: TextStyle(fontSize: 200, color: Colors.white), ), ); }, slideTransform: CubeTransform(), viewportFraction: 0.6, itemCount: itemCount??0), ),

    opened by Davete0302 0
Owner
Udara Wanasinghe
Udara Wanasinghe
Flutter custom carousel slider - A carousel slider widget,support custom decoration suitable for news and blog

flutter_custom_carousel_slider A carousel slider Flutter widget, supports custom

Emre 40 Dec 29, 2022
MindInventory 15 Sep 5, 2022
Card-slider-flutter - Implementation of swipeable image cards with dot indicators

card_slider A new Flutter project. Getting Started This project is a starting po

Ryan Egbejule-jalla 1 Sep 17, 2022
Flutter package to render html as widgets that supports hyperlink, image, audio, video, iframe and many other tags.

HtmlWidget monorepo This repo contains the source code for everything HtmlWidget-related. Name Link flutter_widget_from_html_core flutter_widget_from_

Đào Hoàng Sơn 445 Jan 6, 2023
Serialize almost everything you ever need! 📦 Supports serializing MaterialColor, Color, Size, Locale, IconData, UuidValue, DateTime, Directory, File, Duration, and many more.

osum_serializable The goal is to serialize almost everything you ever need! json_serializable is an amazing package to serialize classes but cannot se

Aswin Murali 2 Sep 23, 2022
A package of pre-built `TextInputFormatter` objects

text_formatters A package of pre-built TextInputFormatter objects to use with Flutter's TextField or TextFormField widgets. Formatters UppercaseInputF

CodeGrue 4 Jul 24, 2020
A customizable circular slider for Flutter.

flutter_circular_slider A customizable circular slider for Flutter. Getting Started Installation Basic Usage Constructor Use Cases Installation Add fl

David 193 Nov 14, 2022
This widget automatically scrolls the custom child widget to an infinite loop.

Scroll Loop Auto Scroll This widget automatically scrolls the custom child widget to an infinite loop. Example Features Infinite Auto Scroll Custom ch

Ashish Raturi 9 Dec 12, 2022
A radio button widget for flutter that supports custom builders and a variable number of animations.

custom_radio An animatable radio button that can be customized to the max. I found it strange that flutter only provides two radio widgets: Radio and

Conrad Heidebrecht 37 Dec 28, 2022
A draggable Flutter widget that makes implementing a Sliding up and fully-stretchable much easier.

Draggable Home A draggable Flutter widget that makes implementing a Sliding up and fully-stretchable much easier! Based on the Scaffold and Sliver. Us

Devs On Flutter 106 Dec 12, 2022
A Flutter widget for images sliding

Simple Image Slider Widget (https://pub.dartlang.org/packages/simple_slider) A flutter library to show images in a sliding widget, the library also pr

Eddy WM 53 Jul 20, 2022
Pre-defined setup to start developing flutter project with stacked architecture.

un_official A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

Aashish Jha 0 Dec 27, 2021
This is a template repository for starting flutter apps with some pre build codes.

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

Mazharul Sabbir 5 Nov 16, 2022
An rx stream builder widget that is able to pre-populate a flutter StreamBuilder with data from an rx stream if the stream is either a value or a replay observable.

An rx stream builder widget that is able to pre-populate a flutter StreamBuilder with data from an rx stream if the stream is either a value or a replay observable. For example the RX stream is a BehaviorSubject or a ReplaySubject.

Jon Samwell 8 Jan 22, 2022
Bottom navigation bar with sliding clip effect.

Sliding Clipped Nav Bar Design Credit Toolbar icons animation by Cuberto How to use? API reference barItems → List<BarItem> List of bar items that sho

Watery Desert 55 Dec 3, 2022
The Integration Test Helper has pre-configured methods that allow for faster test deployment for end to end (e2e) test coverage.

The Integration Test Helper has pre-configured methods that allow for faster test deployment for end to end (e2e) test coverage (using Android and iOS

The Mobile Applications Community 2 Apr 7, 2022
Practice building basic animations in apps along with managing app state by BLoC State Management, Flutter Slider.

Practice building basic animations in apps along with managing app state by BLoC State Management including: Cubit & Animation Widget, Flutter Slider.

TAD 1 Jun 8, 2022
Custom dropdown widget allows to add highly customizable widget in your projects with proper open and close animations and also comes with form required validation.

Custom Dropdown Custom Dropdown package lets you add customizable animated dropdown widget. Features Lots of properties to use and customize dropdown

Abdullah Chauhan 22 Dec 29, 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