stun_slider 1.2.0

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.

Horizontal	Vertical

Localization

С документацией на русском языке можно ознакомиться по этой ссылке.

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.