infinity_slider 1.0.0
infinity_slider: ^1.0.0

Flutter Android iOS web

A slider widget, support infinite scroll and slider nesting .

infinity_slider #

A infinity slider widget, support infinite scroll and slider nesting .

Installation #

Add infinity_slider: ^1.0.0 in your pubspec.yaml dependencies. And import it:

import 'package:infinity_slider/infinity_slider.dart';

How to use #

Simply create a InifitySlider widget, and pass the required params:

InfinitySlider(
  items: [1,2,3,4,5].map((i) {
    return new Builder(
      builder: (BuildContext context) {
        return new Container(
          width: MediaQuery.of(context).size.width,
          margin: new EdgeInsets.symmetric(horizontal: 5.0),
          decoration: new BoxDecoration(
            color: Colors.amber
          ),
          child: new Text('text $i', style: new TextStyle(fontSize: 16.0),)
        );
      },
    );
  }).toList(),
  height: 400.0,
  autoPlay: true
)

You can pass the above params to the class. If you pass the height params, the aspectRatio param will be ignore.

Instance methods #

You can use the instance methods to programmatically take control of the pageView's position.

.nextPage({Duration duration, Curve curve}) #

Animate to the next page

.previousPage({Duration duration, Curve curve}) #

Animate to the previous page

.animateToPage(int page, {Duration duration, Curve curve}) #

Animate to the other page

.jumpToPage(int page) #

jump to the other page

Faq #

Can I nest both sliders? #

Yes, you can.

InfinitySlider(
    items: [1,2,3].map((int outIndex) {
      return Builder(
        builder: (BuildContext context) {
          return InfinitySlider(
            items: [4,5].map((int innerIndex) {
              return Builder(
                builder: (BuildContext context) {
                  return Container(
                    color: Colors.amber,
                    child: Text("$outIndex-$innerIndex"),
                  );
                },
              );
            }).toList(),
            loop: false,
          );
        },
      );
    }).toList(),
    loop: false,
)

Can I display a dotted indicator for the slider? #

Yes, you can.

class InfinityWithIndicator extends StatefulWidget {
  @override
  _InfinityWithIndicatorState createState() => _InfinityWithIndicatorState();
}

class _InfinityWithIndicatorState extends State<InfinityWithIndicator> {
  int _current = 0;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        InfinitySlider(
          items: child,
          autoPlay: true,
          updateCallback: (index) {
            setState(() {
              _current = index;
            });
          },
        ),
        Positioned(
          top: 0.0,
          left: 0.0,
          right: 0.0,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: map<Widget>(imgList, (index, url) {
              return Container(
                width: 8.0,
                height: 8.0,
                margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: _current == index ? Color.fromRGBO(0, 0, 0, 0.9) : Color.fromRGBO(0, 0, 0, 0.4)
                ),
              );
            }),
          )
        )
      ]
    );
  }
}

0
likes
90
pub points
26%
popularity

A slider widget, support infinite scroll and slider nesting .

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

xherghost@gmail.com

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on infinity_slider