/
main.dart
190 lines (170 loc) · 6.22 KB
/
main.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
import 'package:flutter/material.dart';
import 'package:partial_tutorial/partial_tutorial.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(title: 'Partial Tutorial Example'),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
///If we want to let users open whenever they pressed to some button,
///we should control this with a bool variable.
///We should set this variable to true when that button is pressed.
///And we should register to onTutorialFinished field of [PartialTutorialProvider]
///and inside of this method, we should set this variable to false;
bool isTutorialActive = false;
@override
Widget build(BuildContext context) {
/// [PartialTutorialProvider] widget should be wrapped all around the screen including scaffold
return PartialTutorialProvider(
isTutorialActive: isTutorialActive,
///Controllers are taken from the [MyHomePageTutorial] that we write for every tutorial page.
controllers: MyHomePageTutorial.controllers,
///To close the tutorial.
///
/// If we don't give onTutorialFinished, it will be automatically closed.
/// However, it won't be possible to reopen it again.
onTutorialFinished: () {
setState(() {
isTutorialActive = false;
});
},
backgroundColor: Colors.black54.withOpacity(0.8),
informationBackgroundColor: Colors.black54.withOpacity(0.4),
showBorder: true,
child: Scaffold(
appBar: AppBar(
title: Text(widget.title),
actions: [
InkWell(
onTap: () {
setState(() {
isTutorialActive = true;
});
},
child: Container(
margin: const EdgeInsets.all(16),
///Every widget that we want to show its tutorial should be wrapped with [PartialTutorialItem
child: PartialTutorialItem(
controller: MyHomePageTutorial.infoButtonController,
child: const Icon(Icons.info),
),
),
)
],
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
///Every widget that we want to show its tutorial should be wrapped with [PartialTutorialItem]
PartialTutorialItem(
///The controller is taken from the [MyHomePageTutorial]
controller: MyHomePageTutorial.counterLabelController,
child: Container(
padding:
const EdgeInsets.symmetric(vertical: 8, horizontal: 24),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
),
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
),
),
const SizedBox.square(dimension: 50),
///Every widget that we want to show its tutorial should be wrapped with [PartialTutorialItem]
PartialTutorialItem(
controller: MyHomePageTutorial.resetButtonController,
child: ElevatedButton(
onPressed: () {
setState(() {
_counter = 0;
});
},
child: const Text("Reset Counter")),
)
],
),
),
///Every widget that we want to show its tutorial should be wrapped with [PartialTutorialItem]
floatingActionButton: PartialTutorialItem(
controller: MyHomePageTutorial.incrementButtonController,
child: FloatingActionButton(
onPressed: () {
setState(() {
_counter++;
});
},
tooltip: 'Increment',
child: const Icon(Icons.add),
),
),
),
);
}
}
/// The Tutorial class that holds every [PartialTutorialItemController] with their data
///
/// It is recommended to create a tutorial class for every screen that you want to show
/// tutorial to keep code clean and separate the tutorial page codes with the page itself.
class MyHomePageTutorial {
///Tutorial controller for counter label
static PartialTutorialItemController counterLabelController =
PartialTutorialItemController(
information: "This label shows the value of the counter.",
);
///Tutorial controller for reset button
static PartialTutorialItemController resetButtonController =
PartialTutorialItemController(
information: "This button decreases the value of the counter to zero.",
);
///Tutorial controller for increment button
static PartialTutorialItemController incrementButtonController =
PartialTutorialItemController(
information: "This button increases the counter by one.",
);
///Tutorial controller for info button
static PartialTutorialItemController infoButtonController =
PartialTutorialItemController(
information:
"You can open this tutorial page by pressing the information button.",
);
///List of the controller with the correct order.
static List<PartialTutorialItemController> get controllers => [
counterLabelController,
resetButtonController,
incrementButtonController,
infoButtonController,
];
}
/*
return PartialTutorialProvider(
isTutorialActive: isTutorialActive,
controllers: MyHomePageTutorial.controllers,
child: Scaffold(
appBar: ...
body: ...
),
);
}
*/