eliezerantonio / 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';

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.

My Packages

Flutter Responsivity Widget

flutter_carousel_intro's Issues

Looking up a deactivated widget's ancestor is unsafe.

To safely refer to a widget's ancestor in its dispose() method, save a reference to the ancestor by calling dependOnInheritedWidgetOfExactType() in the widget's didChangeDependencies() method.

line 379

Slides direction

Hi @eliezerantonio
once again, you have done a nice work. However, I was wondering if it would not be good if we could have vertical and horizontal slides.

custom indicators when?

It should also be good if we could add our own indicators instead of using dots all the time.

The default primaryColor should match the the appTheme

Hi @eliezerantonio, nice work.
It would be better to automatically use the Theme.of(context).primaryColor instead of using this.primaryColor = Colors.blue in the constructor.

SafeArea is a low level configuration.

I do not think you should use SafeArea in FlutterCarouselIntro as the child of ChangeNotifierProvider.
E.g, I want my slides to occupy the full screen, but I can not because the FlutterCarouselIntro is preventing the slides to occupy the whole screen.

Erro na documentação, quero tirar uma falha no README, não é muita coisa, são só duas linhas...

Portuguese documentation

update Portuguese doc

Swipe the carousel to the current clicked indicator

Currently is only possible to slide the carousel by swipe the page, it brings a limitation: we cannot jump from last item to first one or first to third. We have a linear behaviour
Would be nice to also Swipe the carousel by click on indicators, this way we overcome this limitation

This way we would have two behaviour:

1. Change the carousel position by Swiping
2. Change the carousel position by click on indicators

Add Skip Button

Add a Skipp button on top left for go straight to the last slide.

toggle Indicators, Hide or Show

now for show the indicators should be optional, but by default should show the indicators

the property name: showsIndicators

Auto Play

An autoplay functionality would be good enough for an extra experience.

It could has a boolean option, so it would be up to user enable it or no.

pointsAbove is not a good parameter name to refer to the position of the indicators

I know points might come from Portuguese, which literally means dots, but here it gives the feeling that we want to point something above something.

I think a good name for this parameter should be

• indicatorsAlignment
• indicatorsTop

and more, what if instead of bool use enum to indicate the direction/Alignment of the indicators?
Something like
enum DotsPosition { top, bottom }
or IndicatorsPostion { top, bottom }

Add a better description

Hi @eliezerantonio

You have done such an amazing package, congrats for making it.

It would be nice to have more details about the package here on Github and on pub.dev!

Wishing you all the best!

Error: Could not find the correct Provider<SliderModel> above this FlutterCarouselIntro Widget

Currently there's an issue where is necessary add ChangeNotifierProvider to the example project to be able to run the package locally while in development process.

I suggest to change Provider to Riverpod to avoid those kind of Provider not foundexceptions

How to reproduce:

1. Go to pubspec.yaml
2. Change flutter_carousel_intro to be loaded from local instead of pub.dev
3. Run the project

deslizar pra baixo com gesto do dedo.

Ótimo se for implementado também de deslizar o svg cair pra baixo em funçao do dedo quando o mesmo desliza pra baixo também.

add controller to FlutterCarouselIntro so that the users have more control of the widget

If the user could use a controller, it would be easier to have controller of the FlutterCarouselIntro, e.g add navigation buttons to manually switch among slides.

Repetir continuamente após atingir o último slide.