intro 1.0.3 intro: ^1.0.3 copied to clipboard
A package of Flutter that provides application wizard functionality.
intro #
An application wizard package.
With this package, you can implement a step-by-step guide to help you demonstrate your software or introduce your product.
Features #
- Step by step demonstration
- Control the presentation process
- Highlight the target widget
- Automatically calculates the card display position and alignment
- Customizable style and behavior
- Supports nesting of multiple presentation processes
- Link between different pages or dialogs
- Full platform support
Demo #
Getting started #
Add this package to your project.
flutter pub add intro
Import it in your code.
import 'package:intro/intro.dart';
Register the Intro
widget at the earliest possible widget tree node.
Provide a IntroController
that has specified the stepCount
. The stepCount
refers to the total number of steps in the presentation process.
runApp(Intro(
controller: IntroController(stepCount: 5),
child: MaterialApp(
home: HomePage(),
),
));
Wrap the IntroStepTarget
widget around each of your target widgets that you need to introduce.
IntroStepTarget(
step: step,
controller: Intro.of(context).controller,
cardContents: TextSpan(
text: "The introductory text of this step.",
),
child: targetWidget,
);
Start the presentation process at the right time.
Intro.of(context).controller.start(context);
General Usage #
Decoration of an introductory card.
Provided in the cardDecoration
field of the IntroStepTarget
widget (targeted) or the Intro
widget (global).
IntroCardDecoration(
align: IntroCardAlign.insideTopLeft,
size: Size(420, 280),
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(20),
border: Border.all(color: Colors.black),
radius: BorderRadius.circular(10),
backgroundColor: Colors.teal,
showPreviousButton: true,
showNextButton: true,
showCloseButton: true,
autoHideDisabledButton: false,
previousButtonLabel: "Previous",
nextButtonLabel: "Next",
nextButtonFinishLabel: "Finish",
closeButtonLabel: "Close",
previousButtonStyle: ButtonStyle(...),
nextButtonStyle: ButtonStyle(...),
closeButtonStyle: ButtonStyle(...),
)
Decoration of a highlight area.
Provided in the highlightDecoration
field of the IntroStepTarget
widget (targeted) or the Intro
widget (global).
IntroHighlightDecoration(
padding: EdgeInsets.all(10),
border: Border.all(color: Colors.white),
radius: BorderRadius.circular(5),
cursor: SystemMouseCursors.click,
)
Provided in the cardContens
field of the IntroStepTarget
widget.
IntroStepTarget(
cardContens: TextSpan(
children: [
TextSpan(text: "paragraph 1\n"),
TextSpan(text: "paragraph 2\n"),
],
),
);
Event handling:
IntroStepTarget(
onTargetLoad: () {
// TODO:
},
onTargetDispose: () {
// TODO:
},
onTargetTap: () {
// TODO:
},
onStepWillActivate: (fromStep) {
// TODO:
},
onStepWillDeactivate: (willToStep) {
// TODO:
},
);
Customize the introduction card.
IntroStepTarget.custom(
step: step,
controller: controller,
cardBuilder: (BuildContext context, IntroParams params, IntroCardDecoration decoration) {
return Container(...);
},
child: child,
);
IntroController
to control the presentation flow.
final controller = Intro.of(context).controller;
final stepCount = controller.stepCount;
final isOpened = controller.isOpened;
controller.start(context, initStep: 3);
controller.next();
controller.previous();
controller.jumpTo(5);
controller.close();
controller.refresh();
controller.dispose();
To see the full demonstration, read the example code please.
Nested Usage #
You can define multiple [Intro] widgets and each one uses a separate [IntroController].
- The same target widget may be used in different presentation processes.
- The same target widget can define different introduction card in different presentation flows.
- Each presentation flow is controlled through its own [IntroController].
To see the full demonstration, read the example code please.
Advanced Usage #
To see the full demonstration or more advanced features, read the example code please.