stun_slider 1.1.0 copy "stun_slider: ^1.1.0" to clipboard
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.

4
likes
0
points
47
downloads

Publisher

unverified uploader

Weekly Downloads

A custom Flutter slider widget with dynamic page sizes in both dimensions, enabling smooth and adaptable user interaction.

Homepage
Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

flutter

More

Packages that depend on stun_slider