partial_tutorial

Description:

partial tutorial

Partial Tutorial #
Add component-based tutorials for your complicated screens
🎮 Examples #
Demo #

📒 Documentation #
Installation #
Add partial_tutorial to your pubspec.yaml:
dependencies:
flutter:
sdk: flutter

# added below
partial_tutorial: <latest version>
copied to clipboard
Adding to your app #
The PartialTutorialProvider has to be wrapped around the whole page including
Scaffold.
return PartialTutorialProvider(
isTutorialActive: isTutorialActive,
controllers: MyHomePageTutorial.controllers,
child: Scaffold( appBar: ... body: ... ),
);
copied to clipboard
Then, wrap every widget that you want to show a partial tutorial with PartialTutorialItem and give it a PartialTutorialtemController which holds informations about the tutorial text and etc.

PartialTutorialItemController counterLabelController =
PartialTutorialItemController(
information: "This label shows the value of the counter.",
);

return PartialTutorialItem(
controller: counterLabelController ,
child: ElevatedButton(
onPressed: () {
//...
},
child: const Text("Reset Counter"),
),
);
copied to clipboard
Finally, give the list of PartialTutorialItemController to the PartialTutorialProvider with the same order that you want to show your tutorial widgets.
return PartialTutorialProvider(
isTutorialActive: isTutorialActive,
controllers: [
counterLabelController,
incrementButtonController,
],
child: Scaffold( appBar: ... body: ... ),
);
copied to clipboard
It is recommended to create a new file for every tutorial page which holds the controllers in it to increase the clearity of the code and seperate the tutorial codes from the original screen logic. You can find the implementation in the example project.
Author #
Serhat Merak