flutter pub add flutter_carousel_intro根據套件公開資料產生的選型評估，僅供參考。
FlutterCarouselIntro 是一個 Flutter 套件，旨在簡化動畫引導螢幕的建立。它提供了一個乾淨、可自訂的輪播介面，透過順暢的過渡和吸引人的視覺效果，引導使用者了解應用程式功能。非常適合向新使用者介紹關鍵功能，支援多個平台，包括 Android、iOS、Web、macOS、Windows 和 Linux。該套件可透過 pub add 容易地整合，並提供內建動畫與滑動手勢，帶來互動體驗。
以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。
by: Eliezer António
see in Flutter Gems: https://fluttergems.dev/packages/flutter_carousel_intro
Swipe the carousel to the current clicked indicator
repeat) — works for both autoplay and manual swipeSkip, Next and Done, fully customizableAdd flutter_carousel_intro: ^1.0.13 to your pubspec.yaml dependencies. And import it:
import 'package:flutter_carousel_intro/flutter_carousel_intro.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"),
),
),
],
);
String? title,
TextStyle? titleTextStyle,
TextAlign? titleTextAlign,
Widget? subtitle,
repeat)Set repeat: true to turn the carousel into an infinite loop. It works
independently of autoPlay — the user can also swipe past the last slide
and wrap back to the first.
FlutterCarouselIntro(
autoPlay: true,
repeat: true,
slides: [...],
);
Under the hood the PageView becomes infinite and the indicator is
synchronized via modulo, so the dots always reflect the current slide.
For onboarding flows you no longer need to assemble the buttons by hand.
FlutterCarouselIntro ships with opt-in Skip, Next and Done buttons:
FlutterCarouselIntro(
showNextButton: true,
onSkip: () => Navigator.of(context).pushReplacementNamed('/home'),
onDone: () => Navigator.of(context).pushReplacementNamed('/home'),
skipLabel: const Text('Skip'),
nextLabel: const Text('Next'),
doneLabel: const Text('Done'),
slides: [...],
);
Behavior:
Skip is shown whenever onSkip != null.Next is shown when showNextButton: true; tapping it advances the page.Next is automatically replaced by Done (when
onDone is provided).repeat: true mode there is no last slide, so Next is always visible
and Done is never triggered.VoidCallback? onSkip;
VoidCallback? onDone;
bool showNextButton; // default: false
Widget? skipLabel; // default: Text('Skip')
Widget? nextLabel; // default: Text('Next')
Widget? doneLabel; // default: Text('Done')
ButtonStyle? navigationButtonStyle;
// Full overrides — replace the button widget entirely
NavigationButtonBuilder? skipButtonBuilder;
NavigationButtonBuilder? nextButtonBuilder;
NavigationButtonBuilder? doneButtonBuilder;
// Positioning
AlignmentGeometry skipButtonAlignment; // default: Alignment.topRight
AlignmentGeometry nextButtonAlignment; // default: Alignment.bottomRight
EdgeInsetsGeometry navigationButtonsPadding; // default: EdgeInsets.all(16)
NavigationButtonBuilder is
Widget Function(BuildContext context, VoidCallback onPressed), giving you
full control over the rendered widget while the package still wires the tap
handler (advance / skip / done) for you:
FlutterCarouselIntro(
showNextButton: true,
onDone: _finish,
nextButtonBuilder: (context, onPressed) => FilledButton.icon(
onPressed: onPressed,
icon: const Icon(Icons.arrow_forward),
label: const Text('Continue'),
),
doneButtonBuilder: (context, onPressed) => FilledButton(
onPressed: onPressed,
child: const Text("Let's go"),
),
slides: [...],
);
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,
repeat: 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,
showNextButton: true,
onSkip: () => debugPrint('Skip tapped'),
onDone: () => debugPrint('Done tapped'),
skipLabel: const Text('Skip'),
nextLabel: const Text('Next'),
doneLabel: const Text('Done'),
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"),
),
),
],
);
}
}
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
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.
依賴清單 1 項
^6.1.2暫無相關資料。