flutter_carousel_intro 1.0.11 flutter_carousel_intro: ^1.0.11 copied to clipboard
The FlutterCarouselIntro is an amazing package that makes it easy to build and implement animated onboarding screens in Flutter applications.
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';
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"),
),
),
],
);
All SliderItem parameters #
String? title,
TextStyle? titleTextStyle,
TextAlign? titleTextAlign,
Widget? subtitle,
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"),
),
),
],
);
}
}
Gif #
Normal Example:
Animated Opacity
animatedOpacity: true
Animated Scale
scale: true
Animated Rotation on the X Axis
animatedRotateX: true
Animated Rotation on the Z Axis
animatedRotateZ: true
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.