circular_carousel_slider 0.0.2

A circular carousel slider is a widget that displays content in a circular motion, allowing for continuous scrolling through the items.

Circular Carousel Slider

A Flutter package for creating a circular carousel slider.

Usage

As simple as using any flutter Widget.

Example: Add the module to your project pubspec.yaml:

...
dependencies:
 ...
 circular_carousel_slider: ^0.0.1
...

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

Simple

import 'package:circular_carousel_slider/circular_carousel_slider.dart';

//...
@override
Widget build(BuildContext context) {
  return CircularCarouselSlider(
    children: [],
  );
}

With Controller

To control the carousel, we can use CircularCarouselController and pass it to the controller variable. Controller have some methods to control the carousel like nextPage and previousPage. Methods will not work without setting itemsLength variable in the controller.

import 'package:circular_carousel_slider/circular_carousel_slider.dart';

CircularCarouselController? _controller;

@override
void initState() {
  super.initState();
  _controller = CircularCarouselController(
    itemsLength: _widgetList.length,
  );
}

//...
@override
Widget build(BuildContext context) {
  return CircularCarouselSlider(
    controller: _controller,
    children: [],
  );
}

//...

ElevatedButton(
   onPressed: () => _controller?.nextPage(
     duration: const Duration(milliseconds: 300),
     curve: Curves.fastOutSlowIn,
   ),
   child: const Text('Next'),
 ),

Aspect Ratio

Default aspect ratio is 1.0. We can change it by setting aspectRatio variable.

import 'package:circular_carousel_slider/circular_carousel_slider.dart';

//...
@override
Widget build(BuildContext context) {
  return CircularCarouselSlider(
    aspectRatio: 21 / 9,
    children: [],
  );
}

Current page

To get the current page index, we can use onPageChanged callback.

import 'package:circular_carousel_slider/circular_carousel_slider.dart';

//...
@override
Widget build(BuildContext context) {
  return CircularCarouselSlider(
    onPageChanged: (index) {
      //logic to handle page change 
    },
    children: [],
  );
}

Credits

Developed by Damian "Damrad" Radecki

Contributing

Feel free to help!