flutter_carousel_intro

Description:

flutter carousel intro

English | Português
flutter_carousel_intro #
by: Eliezer António
see in Flutter Gems: https://fluttergems.dev/packages/flutter_carousel_intro

Swipe the carousel to the current clicked indicator

Current Features #

✅ Custom child widgets
✅ Slide
✅ Rotate transition
✅ Auto play
✅ Horizontal transition
✅ Vertical transition
✅ Swipe the carousel to the current clicked indicator

Features to be implemented #

❌ Repeat
❌ Forward button & Back button (isn't very important)

Supported Platforms #

Flutter Android
Flutter iOS
Flutter web
Flutter desktop

Preview #
Installation #
Add flutter_carousel_intro: ^1.0.11 to your pubspec.yaml dependencies. And import it:
import 'package:flutter_carousel_intro/flutter_carousel_intro.dart';
copied to clipboard
How to use #
FlutterCarouselIntro(
slides: [
SliderItem(
title: 'Title 1',
subtitle: const Text('Lorem Ipsum is simply dummy text'),
widget: SvgPicture.asset("assets/slide-1.svg"),
),
SliderItem(
title: 'Title 2',
subtitle: const Text('Lorem Ipsum is simply dummy text'),
widget: SvgPicture.asset("assets/slide-2.svg"),
),
SliderItem(
title: 'Title 3',
subtitle: const Text('Lorem Ipsum is simply dummy text'),
widget: SvgPicture.asset("assets/slide-3.svg"),
),
SliderItem(
title: 'Title 4',
subtitle: const Text('Lorem Ipsum is simply dummy text'),
widget: SvgPicture.asset("assets/slide-4.svg"),
),
SliderItem(
title: 'Title 5',
subtitle: const Text('Lorem Ipsum is simply dummy text'),
widget: SvgPicture.asset("assets/slide-5.svg"),
),
SliderItem(
title: 'Title 5',
widget: SvgPicture.asset("assets/slide-6.svg"),
subtitle: ElevatedButton(
onPressed: () {},
child: const Text("skip"),
),
),
],
);
copied to clipboard
All SliderItem parameters #

String? title,
TextStyle? titleTextStyle,
TextAlign? titleTextAlign,
Widget? subtitle,

copied to clipboard
General Example #
class MySlideShow extends StatelessWidget {
const MySlideShow({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return FlutterCarouselIntro(
animatedRotateX: false,
animatedRotateZ: true,
scale: true,
autoPlay: true,
animatedOpacity: false,
autoPlaySlideDuration: const Duration(seconds: 2),
autoPlaySlideDurationTransition: const Duration(milliseconds: 1100),
primaryColor: Colors.pink,
secondaryColor: Colors.grey,
scrollDirection: Axis.horizontal,
indicatorAlign: IndicatorAlign.bottom,
indicatorEffect: IndicatorEffects.jumping,
showIndicators: true,
slides: [
SliderItem(
title: 'Title 1',
subtitle: const Text('Lorem Ipsum is simply dummy text'),
widget: SvgPicture.asset("assets/slide-1.svg"),
),
SliderItem(
title: 'Title 2',
subtitle: const Text('Lorem Ipsum is simply dummy text'),
widget: SvgPicture.asset("assets/slide-2.svg"),
),
SliderItem(
title: 'Title 3',
subtitle: const Text('Lorem Ipsum is simply dummy text'),
widget: SvgPicture.asset("assets/slide-3.svg"),
),
SliderItem(
title: 'Title 4',
subtitle: const Text('Lorem Ipsum is simply dummy text'),
widget: SvgPicture.asset("assets/slide-4.svg"),
),
SliderItem(
title: 'Title 5',
subtitle: const Text('Lorem Ipsum is simply dummy text'),
widget: SvgPicture.asset("assets/slide-5.svg"),
),
SliderItem(
title: 'Title 5',
widget: SvgPicture.asset("assets/slide-6.svg"),
subtitle: ElevatedButton(
onPressed: () {},
child: const Text("skip"),
),
),
],
);
}
}
copied to clipboard
Gif #
Normal Example:

Animated Opacity


animatedOpacity: true
copied to clipboard
Animated Scale

scale: true
copied to clipboard
Animated Rotation on the X Axis

animatedRotateX: true
copied to clipboard
Animated Rotation on the Z Axis

animatedRotateZ: true
copied to clipboard
Contributions #
Feel free to contribute to this project.
If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.
If you fixed a bug or implemented a feature, please send a pull request.
My Packages #
Flutter Responsivity Widget