A horizontal overlapped carousel widget. The center widget will be at the top of the stack.
| Demo 1 | Demo 2 |
|---|---|
 |
 |
Add overlapped_carousel: ^1.1.0 to your pubspec.yaml dependencies. And import it:
import 'package:overlapped_carousel/overlapped_carousel.dart';
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,
),
),
),
);
}