marvelous_carousel 0.0.14 marvelous_carousel: ^0.0.14 copied to clipboard
Marvelous Carousel enables you to craft impressive sliders, carousels, and walkthrough sliders.
import 'package:flutter/material.dart';
import 'package:marvelous_carousel/marvelous_carousel.dart';
import 'arc_banner.dart';
void main() => runApp(const EntryWidget());
class EntryWidget extends StatelessWidget {
const EntryWidget({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Finite Coverflow Example',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
brightness: Brightness.dark,
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
),
home: const MyApp(),
);
}
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
late final List<Widget> _widgets = [];
late final List<String> _widgetsTiles = [
"Simple Carousel",
"Simple Reverse Carousel",
"Carousel With Rotation",
"Scale Items On Change",
"Opacity Animation On Change",
"Stack Carousel",
"Overscroll Stack Carousel",
"Mixed Animation",
];
late final List<String> _widgetsTilesSubt = [
"This is just simple carousel. Just attach children and set direction.",
"Simple Carousel with reverse option. Just Play accordingly.",
"You can set rotation of carousel items. Visible on page change.",
"You can set scale of carousel items. Visible on page change.",
"Opacity Animation of carousel items. It's also visible on change",
"Stack Carousel animation, Visible on page change.",
"Overscroll Animation visible on page change",
"Mixed Animation according to all properties",
];
@override
void initState() {
super.initState();
_widgets.addAll([
SimpleCarousel(
isReverse: false,
),
SimpleCarousel(
isReverse: true,
),
const CarouselWithRotation(),
const ScaleItemsOnChange(),
const OpacityAnimationOnChange(),
const StackCarousel(),
const OverscrollStackCarousel(),
const MixedAnimation(),
]);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
physics: const ClampingScrollPhysics(),
child: Column(
children: [
MovieDetailHeader(testMovie),
Card(
margin: const EdgeInsets.only(
left: 15, right: 15, top: 30, bottom: 100),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
child: ListView.separated(
separatorBuilder: (context, index) => const Divider(
height: 5,
),
shrinkWrap: true,
itemCount: _widgets.length,
itemBuilder: (context, index) => ListTile(
contentPadding:
const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
title: Text(
_widgetsTiles[index],
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
trailing: const Icon(Icons.arrow_forward),
subtitle: Text(
_widgetsTilesSubt[index],
style: const TextStyle(height: 1.5),
),
horizontalTitleGap: 20,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return _widgets[index];
},
),
);
},
),
padding: EdgeInsets.zero,
physics: const NeverScrollableScrollPhysics(),
),
),
],
),
),
);
}
}
class MixedAnimation extends StatelessWidget {
const MixedAnimation({
super.key,
});
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: const SizedBox(
height: 90,
child: Card(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(height: 40),
],
),
),
),
appBar: AppBar(
title: const Text("Mixed Animation"),
),
body: Center(
child: SizedBox(
height: 566,
child: MarvelousCarousel(
opacity: 0.2,
scaleX: 0.5,
scaleY: 0.5,
overscroll: 0,
margin: 10,
reverse: true,
pagerType: PagerType.stack,
scrollDirection: Axis.horizontal,
children: [1, 2, 3, 4, 5]
.map(
(e) => Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(15),
child: SizedBox(
height: 566,
width: 382,
child: Image.asset(
"images/marvel$e.jpeg",
fit: BoxFit.cover,
),
),
),
),
)
.toList(),
),
),
),
);
}
}
class OverscrollStackCarousel extends StatelessWidget {
const OverscrollStackCarousel({
super.key,
});
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: const SizedBox(
height: 90,
child: Card(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(height: 40),
],
),
),
),
appBar: AppBar(
title: const Text("Overscroll Stack Animation"),
),
body: Center(
child: SizedBox(
height: 566,
child: MarvelousCarousel(
overscroll: -300,
opacity: 0,
margin: 20,
pagerType: PagerType.stack,
dotsVisible: true,
scrollDirection: Axis.horizontal,
children: [1, 2, 3, 4, 5]
.map(
(e) => Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(15),
child: SizedBox(
height: 566,
width: 382,
child: Image.asset(
"images/marvel$e.jpeg",
fit: BoxFit.cover,
),
),
),
),
)
.toList(),
),
),
),
);
}
}
class StackCarousel extends StatefulWidget {
const StackCarousel({
super.key,
});
@override
State<StackCarousel> createState() => _StackCarouselState();
}
class _StackCarouselState extends State<StackCarousel> {
bool _isVertical = true;
bool _isReverse = false;
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: SizedBox(
height: 90,
child: Card(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
"Vertical",
style: TextStyle(fontWeight: FontWeight.w700, fontSize: 15),
),
Switch(
value: _isVertical,
thumbColor: const MaterialStatePropertyAll<Color>(Colors.black),
onChanged: (bool value) {
setState(() {
_isVertical = value;
});
},
),
Container(
color: Colors.grey,
width: 1,
height: 30,
),
const SizedBox(
width: 10,
),
const Text(
"Reverse",
style: TextStyle(fontWeight: FontWeight.w700, fontSize: 15),
),
Switch(
value: _isReverse,
thumbColor: const MaterialStatePropertyAll<Color>(Colors.black),
onChanged: (bool value) {
setState(() {
_isReverse = value;
});
},
),
],
),
),
),
appBar: AppBar(
title: const Text("Stack Carousel"),
),
body: Center(
child: SizedBox(
height: 566,
child: MarvelousCarousel(
pagerType: PagerType.stack,
margin: 15,
reverse: _isReverse,
scrollDirection: _isVertical ? Axis.vertical : Axis.horizontal,
children: [1, 2, 3, 4, 5]
.map(
(e) => Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(15),
child: SizedBox(
height: 566,
width: 382,
child: Image.asset(
"images/marvel$e.jpeg",
fit: BoxFit.cover,
),
),
),
),
)
.toList(),
),
),
),
);
}
}
class OpacityAnimationOnChange extends StatelessWidget {
const OpacityAnimationOnChange({
super.key,
});
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: const SizedBox(
height: 90,
child: Card(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(height: 40),
],
),
),
),
appBar: AppBar(
title: const Text("Opacity Animation On Change"),
),
body: Center(
child: SizedBox(
height: 566,
child: MarvelousCarousel(
opacity: 0.25,
margin: 10,
scrollDirection: Axis.horizontal,
children: [1, 2, 3, 4, 5]
.map(
(e) => Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(15),
child: SizedBox(
height: 566,
width: 382,
child: Image.asset(
"images/marvel$e.jpeg",
fit: BoxFit.cover,
),
),
),
),
)
.toList(),
),
),
),
);
}
}
class ScaleItemsOnChange extends StatelessWidget {
const ScaleItemsOnChange({
super.key,
});
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: const SizedBox(
height: 90,
child: Card(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(height: 40),
],
),
),
),
appBar: AppBar(
title: const Text("Scale Items On Change"),
),
body: Center(
child: SizedBox(
height: 566,
child: MarvelousCarousel(
scaleX: 0.8,
scaleY: 0.4,
margin: 10,
scrollDirection: Axis.horizontal,
children: [1, 2, 3, 4, 5]
.map(
(e) => Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(15),
child: SizedBox(
height: 566,
width: 382,
child: Image.asset(
"images/marvel$e.jpeg",
fit: BoxFit.cover,
),
),
),
),
)
.toList(),
),
),
),
);
}
}
class CarouselWithRotation extends StatelessWidget {
const CarouselWithRotation({
super.key,
});
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: const SizedBox(
height: 90,
child: Card(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(height: 40),
],
),
),
),
appBar: AppBar(
title: const Text("Carousel With Rotation"),
),
body: Center(
child: SizedBox(
height: 566,
child: MarvelousCarousel(
rotationY: 60,
margin: 0,
scrollDirection: Axis.horizontal,
children: [1, 2, 3, 4, 5]
.map(
(e) => Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(15),
child: SizedBox(
height: 566,
width: 382,
child: Image.asset(
"images/marvel$e.jpeg",
fit: BoxFit.cover,
),
),
),
),
)
.toList(),
),
),
),
);
}
}
class SimpleCarousel extends StatefulWidget {
bool isReverse;
SimpleCarousel({
super.key,
required this.isReverse,
});
@override
State<SimpleCarousel> createState() => _SimpleCarouselState();
}
class _SimpleCarouselState extends State<SimpleCarousel> {
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: SizedBox(
height: 90,
child: Card(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
"Reverse",
style: TextStyle(fontWeight: FontWeight.w700, fontSize: 15),
),
Switch(
value: widget.isReverse,
thumbColor: const MaterialStatePropertyAll<Color>(Colors.black),
onChanged: (bool value) {
setState(() {
widget.isReverse = value;
});
},
),
const SizedBox(height: 40),
],
),
),
),
appBar: AppBar(
title: Text("Simple${widget.isReverse ? " Reverse " : " "}Carousel"),
),
body: Center(
child: SizedBox(
height: 566,
child: MarvelousCarousel(
scrollDirection: Axis.horizontal,
reverse: widget.isReverse,
margin: 10,
children: [1, 2, 3, 4, 5]
.map(
(e) => Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(15),
child: SizedBox(
height: 566,
width: 382,
child: Image.asset(
"images/marvel$e.jpeg",
fit: BoxFit.cover,
),
),
),
),
)
.toList(),
),
),
),
);
}
}
final Movie testMovie = Movie(
bannerUrl: 'images/banner.webp',
posterUrl: 'images/bannerprofile.jpeg',
title: 'Marvelous Carousel',
categories: ['Simple', 'Easy', 'Ready to Use'],
);