A customizable carousel slider for flutter

flutter carousel slider

a customizable carousel slider for flutter.

screenshots

installing

dependencies:
  flutter_carousel_slider: ^1.0.2

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