https://github.com/eliezerantonio/flutter_carousel_intro
https://github.com/eliezerantonio/flutter_carousel_intro
carousel carousel-slider dart flutter hacktoberfest onboarding onboarding-screen widget
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/eliezerantonio/flutter_carousel_intro
- Owner: eliezerantonio
- License: mit
- Created: 2022-11-13T17:07:40.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-30T07:54:02.000Z (over 1 year ago)
- Last Synced: 2024-04-22T21:13:35.850Z (about 1 year ago)
- Topics: carousel, carousel-slider, dart, flutter, hacktoberfest, onboarding, onboarding-screen, widget
- Language: Dart
- Homepage: https://pub.dev/packages/flutter_carousel_intro
- Size: 26.6 MB
- Stars: 27
- Watchers: 2
- Forks: 12
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[English](README.md) | [Português](resources/translation/pt_pt/README.md)
# flutter_carousel_intro
by: [Eliezer António](https://github.com/eliezerantonio/)
see in Flutter Gems:
Swipe the carousel to the current clicked indicator
## Current Features
- [X] Custom child widgets
- [X] Slide
- [X] Rotate transition
- [X] Auto play
- [X] Horizontal transition
- [X] Vertical transition
- [X] 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:
```dart
import 'package:flutter_carousel_intro/flutter_carousel_intro.dart';
```
## How to use
```dart
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
```dart
String? title,
TextStyle? titleTextStyle,
TextAlign? titleTextAlign,
Widget? subtitle,
```
## General Example
```dart
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
```dart
animatedOpacity: true
```
Animated Scale
```dart
scale: true
```
Animated Rotation on the X Axis
```dart
animatedRotateX: true
```
Animated Rotation on the Z Axis
```dart
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][issue].
If you fixed a bug or implemented a feature, please send a [pull request][pr].
[issue]: https://github.com/eliezerantonio/flutter_carousel_intro/issues
[pr]: https://github.com/eliezerantonio/flutter_carousel_intro/pulls
## My Packages
[Flutter Responsivity Widget](https://pub.dev/packages/flutter_responsivity_widget)