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();
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();
}
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);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent