Ekran — Onboarding
Przegląd
Onboarding to 6-krokowy tutorial wyświetlany po pierwszym zalogowaniu dziecka. Uczy podstaw nawigacji po aplikacji: globus, lokacje, zadania, statek. Wyświetlany tylko raz — po ukończeniu serwer zapisuje status.
Routing (GoRouter)
dart
GoRoute(
path: '/onboarding',
builder: (_, __) => OnboardingScreen(),
redirect: (context, state) {
// Jeśli onboarding ukończony → przekieruj na /globe
final completed = ref.read(onboardingStatusProvider).value;
if (completed == true) return '/globe';
return null;
},
),Riverpod Providers
dart
// Status onboardingu z serwera
final onboardingStatusProvider = FutureProvider<bool>((ref) {
return ref.watch(onboardingRepositoryProvider).getStatus();
});
// Aktualny krok (0-5)
final onboardingStepProvider = StateProvider<int>((ref) => 0);
// Kontroler PageView
final onboardingPageControllerProvider = Provider.autoDispose<PageController>((ref) {
return PageController();
});ASCII Wireframe
┌──────────────────────────────────┐
│ │
│ │
│ ┌────────────────────────┐ │
│ │ │ │
│ │ (animowana │ │
│ │ ilustracja │ │
│ │ odpowiednia │ │
│ │ dla kroku) │ │
│ │ │ │
│ └────────────────────────┘ │
│ │
│ Tytuł kroku │
│ │
│ Opis kroku — 1-2 linijki │
│ tekstu wyjaśniającego │
│ │
│ │
│ ● ○ ○ ○ ○ ○ │
│ │
│ [ DALEJ ] │
│ │
│ Pomiń │
│ │
└──────────────────────────────────┘Kroki Onboardingu
Krok 1: Powitanie
┌──────────────────────────────────┐
│ │
│ ┌────────────────────────┐ │
│ │ (machająca postać │ │
│ │ + imię dziecka) │ │
│ └────────────────────────┘ │
│ │
│ Cześć, Kacper! │
│ │
│ Witaj na Wyspach Lumos! │
│ Razem odkryjemy niesamowite │
│ miejsca i nauczymy się │
│ nowych rzeczy. │
│ │
│ ● ○ ○ ○ ○ ○ │
│ [ DALEJ ] │
└──────────────────────────────────┘Krok 2: Globus
┌──────────────────────────────────┐
│ │
│ ┌────────────────────────┐ │
│ │ (obracający się │ │
│ │ globus z │ │
│ │ pinezkami) │ │
│ └────────────────────────┘ │
│ │
│ To jest Twój Globus! │
│ │
│ Obróć go palcem i wybierz │
│ kraj, który chcesz │
│ odkrywać. Każdy kraj │
│ ma swoje lokacje. │
│ │
│ ○ ● ○ ○ ○ ○ │
│ [ DALEJ ] │
└──────────────────────────────────┘Krok 3: Lokacje
┌──────────────────────────────────┐
│ │
│ ┌────────────────────────┐ │
│ │ (mapa z kolorowymi │ │
│ │ pinezkami, │ │
│ │ jedna się pulsuje) │ │
│ └────────────────────────┘ │
│ │
│ Lokacje to Twoje przystanki │
│ │
│ W każdym kraju znajdziesz │
│ lokacje pełne zadań. │
│ Kliknij pinezkę, żeby │
│ wejść do lokacji. │
│ │
│ ○ ○ ● ○ ○ ○ │
│ [ DALEJ ] │
└──────────────────────────────────┘Krok 4: Zadania
┌──────────────────────────────────┐
│ │
│ ┌────────────────────────┐ │
│ │ (kafelki zadań: │ │
│ │ video, quiz, │ │
│ │ podcast, gra) │ │
│ └────────────────────────┘ │
│ │
│ Różne typy zadań │
│ │
│ Oglądaj filmy, rozwiązuj │
│ quizy, słuchaj podcastów │
│ i graj w mini-gry. │
│ Za każde zadanie dostajesz │
│ XP! │
│ │
│ ○ ○ ○ ● ○ ○ │
│ [ DALEJ ] │
└──────────────────────────────────┘Krok 5: Statek
┌──────────────────────────────────┐
│ │
│ ┌────────────────────────┐ │
│ │ (statek kosmiczny │ │
│ │ z awatarem │ │
│ │ dziecka w środku) │ │
│ └────────────────────────┘ │
│ │
│ Twój Statek │
│ │
│ Tu jest Twoja baza! Sprawdź │
│ swoje zadania do zrobienia, │
│ zmień ubranie awatara │
│ i zbieraj odznaki. │
│ │
│ ○ ○ ○ ○ ● ○ │
│ [ DALEJ ] │
└──────────────────────────────────┘Krok 6: Gotowe!
┌──────────────────────────────────┐
│ │
│ ┌────────────────────────┐ │
│ │ (confetti + awatar │ │
│ │ dziecka unoszący │ │
│ │ się w rakiecie) │ │
│ └────────────────────────┘ │
│ │
│ Gotowe! │
│ │
│ Czas na przygodę, Kacper! │
│ Odkrywaj świat i zdobywaj │
│ punkty doświadczenia. │
│ │
│ ○ ○ ○ ○ ○ ● │
│ │
│ ╔══════════════════════════╗ │
│ ║ START! ║ │
│ ╚══════════════════════════╝ │
│ │
└──────────────────────────────────┘Komponenty
| Komponent | Opis |
|---|---|
OnboardingPageView | PageView z 6 stronami, gesture-based swipe |
OnboardingStep | Pojedynczy krok: ilustracja + tytuł + opis |
AnimatedIllustration | Animowana ilustracja (Lottie lub Rive) per krok |
DotsIndicator | 6 kropek wskazujących aktualny krok |
LumosButton | "DALEJ" (kroki 1-5), "START!" (krok 6, wyróżniony) |
SkipButton | Link "Pomiń" — pomija do ostatniego kroku |
ConfettiOverlay | Animacja confetti na kroku 6 |
Logika
- Przy wejściu na ekran — sprawdzenie
GET /app/onboarding/status - Jeśli
completed: true→ redirect na/globe - Swipe lub przycisk "DALEJ" → przejście do następnego kroku
- Przycisk "Pomiń" → przejście do kroku 6
- Krok 6 — przycisk "START!" →
POST /app/onboarding/complete→ nawigacja na/globe
Endpointy
| Metoda | Endpoint | Opis |
|---|---|---|
| GET | /app/onboarding/status | Sprawdza czy onboarding ukończony |
| POST | /app/onboarding/complete | Oznacza onboarding jako ukończony |
Status Response:
json
{
"data": {
"completed": false
}
}Complete Request:
json
{}Complete Response:
json
{
"data": {
"completed": true
}
}Animacje
| Krok | Typ animacji | Opis |
|---|---|---|
| 1. Powitanie | Lottie | Postać macha ręką, imię dziecka w chmurce |
| 2. Globus | Rive | Interaktywny mini-globus obracający się |
| 3. Lokacje | Lottie | Mapa z pojawiającymi się pinezkami |
| 4. Zadania | Lottie | Kafelki zadań wlatujące jeden po drugim |
| 5. Statek | Rive | Statek kosmiczny z dymem z silników |
| 6. Gotowe | Lottie + particles | Confetti + rakieta startująca |
Przejścia między krokami
- Swipe lewo/prawo (PageView physics)
- Animacja crossfade ilustracji (300ms)
- Dots indicator przesuwa się synchronicznie
- Tekst wchodzi z fade-in (200ms delay)