Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/herghost000/flutter_infinity_slider
A flutter infinity widget, support infinite scroll, and slider nesting.
https://github.com/herghost000/flutter_infinity_slider
flutter infinite-scroll widget
Last synced: 4 days ago
JSON representation
A flutter infinity widget, support infinite scroll, and slider nesting.
- Host: GitHub
- URL: https://github.com/herghost000/flutter_infinity_slider
- Owner: herghost000
- License: mit
- Created: 2019-02-13T09:25:41.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-09-02T03:06:13.000Z (about 5 years ago)
- Last Synced: 2024-08-22T23:39:59.765Z (3 months ago)
- Topics: flutter, infinite-scroll, widget
- Language: Dart
- Homepage:
- Size: 60.5 KB
- Stars: 10
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```dart
import 'package:infinity_slider/infinity_slider.dart';
```
## How to use
Simply create a `InifitySlider` widget, and pass the required params:
```dart
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.
```dart
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.
```dart
class InfinityWithIndicator extends StatefulWidget {
@override
_InfinityWithIndicatorState createState() => _InfinityWithIndicatorState();
}
class _InfinityWithIndicatorState extends State {
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(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)
),
);
}),
)
)
]
);
}
}
```