overlapped_carousel 1.0.2 copy "overlapped_carousel: ^1.0.2" to clipboard
overlapped_carousel: ^1.0.2 copied to clipboard

A Flutter package project that is a simple horizontal overlapped_carousel widget.

Overlapped Carousel #

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

Demo #

Demo 1 Demo 2
demo 1 demo 2

Installation #

Add overlapped_carousel: ^1.1.0 to your pubspec.yaml dependencies. And import it:

import 'package:overlapped_carousel/overlapped_carousel.dart';

How to use #

Simply add a OverlappedCarousel 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 carousel center of the screen
      body: Center(
        //Wrap the OverlappedCarousel widget with SizedBox to fix a height. No need to specify width.
        child: SizedBox(
          height: min(screenWidth / 3.3 * (16 / 9),screenHeight*.9),
          child: OverlappedCarousel(
            widgets: widgets, //List of widgets
            currentIndex: 2,
            onClicked: (index) {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text("You clicked at $index"),
                ),
              );
            },
            // To obscure or blur cards not in focus use the obscure parameter.
            obscure: 0.4,
            // To control skew angle
            skewAngle: 0.25,
          ),
        ),
      ),
    );
  }
56
likes
140
pub points
89%
popularity

Publisher

verified publisherdelwar.info

A Flutter package project that is a simple horizontal overlapped_carousel widget.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on overlapped_carousel