Components · App
App Tour (coach-marks)
First-run tutorial that highlights each navigation tab.
App · Flutter · macromath_mobile
First-run tutorial. It dims the screen and "cuts out" a spotlight over the bottom-bar tab being explained, with a descriptive card. It steps through the tabs — Home → Diet → Pantry → MacroAI → Profile — switching the screen behind so the user sees each area. No external dependencies.
Steps
| Step | Tab | Spotlight |
|---|---|---|
| Welcome | Home | Centered card (no spotlight). |
| Home | Home | Spotlight on tab 0. |
| Diet | Diet | Spotlight on tab 1. |
| Pantry | Pantry | Spotlight on tab 2. |
| MacroAI | AI | Spotlight on tab 3. |
| Profile | Profile | Spotlight on tab 4. |
Properties
| Property | Type | Description |
|---|---|---|
onSwitchTab | ValueChanged<int> | Switches the tab behind during the tour. |
onFinish | VoidCallback | Called on finish or skip. |
Usage
Mounted on the MainShell, above the scaffold, on the first session:
Stack(
children: [
scaffold,
if (showTour)
AppTour(
onSwitchTab: switchTo,
onFinish: _finishTour,
),
],
);The user can skip the tour at any step. It is marked as done so it won't appear again.