overlapped_slider 1.0.0

A horizontal overlapped slider widget. The center widget will be at the top of the stack.

Overlapped Slider

A horizontal overlapped slider widget. The center widget will be at the top of the stack.

Demo

Installation

Add overlapped_slider: ^1.0.0 to your pubspec.yaml dependecies. And import it:

import 'package:overlapped_slider/overlapped_slider.dart';

How to use

Simply add a Overlapped_slider widget with required params.

  @override
  Widget build(BuildContext context) {
    var screenWidth = MediaQuery.of(context).size.width;
    var screenHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      backgroundColor: Colors.blue,
      //Wrap with Center to place the Slider center of the screen
      body: Center(
        //Wrap the OverlappedSlider widget with SizedBox to fix a height. No need to specify width.
        child: SizedBox(
          height: min(screenWidth / 3.3 * (16 / 9), screenHeight * .9),
            child: OverlappedSlider(
              widgets: widgets1, //List of widgets
              currentIndex: 2,
              onClicked: (index) {},
            ),
          ),
        ),
      ),
    );
  }