stun_slider 1.1.0 stun_slider: ^1.1.0 copied to clipboard
A custom Flutter slider widget with dynamic page sizes in both dimensions, enabling smooth and adaptable user interaction.
Stun Slider #
The StunSlider
widget automatically adjusts its height to match the currently displayed page.
It supports the same parameters as the classic PageView
.
The package includes helper widgets for controlling the slider and displaying pagination.
Localization #
С документацией на русском языке можно ознакомиться по этой ссылке: [https://github.com/STUN-Apps-Dev/stun_slider/blob/master/README_RU.md].
Getting Started #
Add the following line to the dependencies
section of your pubspec.yaml
:
dependencies:
stun_slider: <latest-version>
Then run the command:
flutter pub get
Import the library:
import 'package:stun_slider/stun_slider.dart';
Usage Examples #
Fixed StunSlider #
To create a fixed StunSlider
, pass a list of widgets to the children
parameter:
StunSlider(
children: [
Container(
height: 200,
width: 200,
color: Colors.green,
),
Container(
height: 200,
width: 200,
color: Colors.green,
),
Container(
height: 200,
width: 200,
color: Colors.green,
),
],
),
Dynamically Built StunSlider #
If you have many pages and want to create them dynamically while scrolling, use the .builder
constructor, passing the itemCount
and itemBuilder
parameters:
StunSlider.builder(
itemCount: 3,
itemBuilder: (context, index) {
return Container(
height: 200,
width: 200,
color: Colors.green,
);
},
),
Controller for Slider Management #
The StunSliderController
provides methods for switching slider pages:
final _controller = StunSliderController();
If you want to define your custom PageController
, you need to pass its instance in the constructor:
final pageController = PageController();
final _controller = StunSliderController(pageController);
Usage examples:
_controller.previousPage();
_controller.nextPage();
_controller.jumpToIndex(1);
Additional Components #
Additional UI components allow you to create custom control elements for the slider.
To work in conjunction with the slider, all components need to be unified with a common controller.
Buttons for Back/Forward Navigation
Back
StunSliderNavButton.prev(
itemCount: _items.length,
controller: _controller,
child: const Icon(Icons.arrow_back), // Use your own widget
)
Forward
StunSliderNavButton.next(
itemCount: 3,
controller: _controller,
child: const Icon(Icons.arrow_forward), // Use your own widget
)
Pagination Element
StunSliderPagination
allows you to create a custom pagination element.
StunSliderPagination(
controller: _controller,
itemCount: 3,
itemBuilder: (context, index, isActive) {
return Container(
height: 40,
width: 40,
color: isActive ? Colors.amber : Colors.grey,
child: Center(child: Text('$index')),
);
},
),
Example #
A full usage example is available in the example/ directory.