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.

[general_usage_demo]

[nested_usage_demo]

[nested_usage_demo]

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
  • ✅ Windows
  • ✅ macOS
  • ✅ Android
  • ✅ iOS
  • ✅ Linux
  • ✅ Web

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 #

[genera_usage_1]

[genera_usage_2]

[genera_usage_3]

[genera_usage_4]

[genera_usage_5]

[genera_usage_6]

[genera_usage_7]

[genera_usage_8]

[genera_usage_9]

[genera_usage_10]

[genera_usage_11]

[genera_usage_12]

[genera_usage_13]

Nested Usage #

You can define multiple [Intro] widgets and each one uses a separate [IntroController].

Note:

1. The same target widget may be used in different presentation processes.
2. The same target widget can define different introduction card in different presentation flows.
3. Each presentation flow is controlled through its own [IntroController].

Advanced Usage #

To see the full demonstration or more advanced features, read the example code please.