tutorial

Description:

tutorial

Tutorial #



Use the tutorial package is easy.
First create the global keys and add for the components you want to present:
final keyMenu = GlobalKey();
final keyContainer = GlobalKey();
final keyChat = GlobalKey();
copied to clipboard
Then create a list of TutorialItens
List<TutorialItens> itens = [];
@override
void initState() {
itens.addAll({
TutorialItens(
globalKey: keyMenu,
touchScreen: true,
top: 200,
left: 50,
children: [
Text(
"Ali é nosso menu , você consegue ver varias coisas nele",
style: TextStyle(color: Colors.white, fontSize: 20),
),
SizedBox(
height: 100,
)
],
widgetNext: Text(
"Toque para continuar",
style: TextStyle(
color: Colors.purple,
fontWeight: FontWeight.bold,
),
),
shapeFocus: ShapeFocus.oval),
TutorialItens(
globalKey: keyChat,
touchScreen: true,
top: 200,
left: 50,
children: [
Text(
"Qualquer duvida que aparecer , entre no nosso chat , estamos prontos para ajudar",
style: TextStyle(color: Colors.white, fontSize: 20),
),
SizedBox(
height: 100,
)
],
widgetNext: Text(
"Toque para continuar",
style: TextStyle(
color: Colors.purple,
fontWeight: FontWeight.bold,
),
),
shapeFocus: ShapeFocus.oval,
),
TutorialItens(
globalKey: keyContainer,
touchScreen: true,
bottom: 50,
left: 50,
children: [
Text(
"Nessa sessão você vai ter acesso a todas as Rasteirinhas",
style: TextStyle(color: Colors.white, fontSize: 20),
),
SizedBox(
height: 10,
)
],
widgetNext: Text(
"Sair",
style: TextStyle(
color: Colors.purple,
fontWeight: FontWeight.bold,
),
),
shapeFocus: ShapeFocus.square,
),
});
super.initState();
}
copied to clipboard
In it we have TutorialItens, is where is the entire tutorial part of your application.
TutorialItens

globalKey - The Global Key of the component you want to focus on
touchScreen - Sets whether to move to the next tutorial items by clicking anywhere on the screen
children - List of widgets to compose the screen
widgetNext - A component to move to the next item, if touchScreen is equal to false, the click will be only on that component
shapeFocus -Focus shape can be chosen using shapeFocus.oval or ShapeFocus.square
Can be aligned on the screen as well as positioned using (top, bottom, left, right)

Tutorial.show(context,itens)
show() - the show () method, receives two parameters, the context and the list of TutorialItens you created
Now just run the Tutorial.show(context, itens)
Tutorial.showTutorial(context, itens);
copied to clipboard