feat(tutorial): guide the first launch with spotlighted steps and gesture hands
Ajoute un didacticiel joué à la première utilisation : un voile sombre perce un trou de lumière autour de l'élément à découvrir, une main animée mime le geste attendu (tap, appui long, glisser, pincement à deux doigts pour zoomer) et une bulle explique l'étape avec sa progression. - visite d'accueil : nouvelle session, télémétrie, barre de navigation, réglages - visite de l'éditeur d'impacts : ajouter, déplacer, zoomer au pincement, valider - chaque visite n'est jouée qu'une fois (SharedPreferences) - Paramètres > Aide & didacticiel > Revoir le didacticiel : réinitialise tout et relance la visite au retour sur l'écran concerné Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
32143c5bb1
commit
32582aba3d
@@ -0,0 +1,76 @@
|
||||
/// Modèle d'une étape de didacticiel (visite guidée).
|
||||
///
|
||||
/// Une étape met en avant un élément de l'écran (le « spot ») grâce à une
|
||||
/// [GlobalKey] posée sur le widget concerné, et affiche une bulle explicative
|
||||
/// accompagnée, si besoin, d'une main animée qui mime le geste attendu
|
||||
/// (tap, appui long, pincement…) comme dans les applications mobiles.
|
||||
library;
|
||||
|
||||
import 'package:flutter/widgets.dart';
|
||||
|
||||
/// Geste mimé par la main animée pendant l'étape.
|
||||
enum TutorialGesture {
|
||||
/// Aucune main animée : simple explication.
|
||||
none,
|
||||
|
||||
/// Un appui simple.
|
||||
tap,
|
||||
|
||||
/// Deux appuis rapprochés.
|
||||
doubleTap,
|
||||
|
||||
/// Un appui maintenu.
|
||||
longPress,
|
||||
|
||||
/// Un appui maintenu suivi d'un déplacement du doigt.
|
||||
drag,
|
||||
|
||||
/// Deux doigts qui s'écartent puis se rapprochent (zoom).
|
||||
pinch,
|
||||
|
||||
/// Un doigt qui balaie l'écran vers le haut.
|
||||
swipeUp,
|
||||
|
||||
/// Un doigt qui balaie l'écran horizontalement.
|
||||
swipeHorizontal,
|
||||
}
|
||||
|
||||
/// Forme du trou de lumière découpé dans le voile sombre.
|
||||
enum TutorialHighlightShape { rounded, circle }
|
||||
|
||||
class TutorialStep {
|
||||
/// Clé posée sur le widget à mettre en avant.
|
||||
///
|
||||
/// `null` (ou clé non montée) => l'étape s'affiche comme une carte centrée,
|
||||
/// utile pour les messages d'accueil et de fin.
|
||||
final GlobalKey? targetKey;
|
||||
|
||||
final String title;
|
||||
final String description;
|
||||
|
||||
/// Geste mimé par la main animée.
|
||||
final TutorialGesture gesture;
|
||||
|
||||
final TutorialHighlightShape shape;
|
||||
|
||||
/// Marge ajoutée autour du widget mis en avant.
|
||||
final double spotPadding;
|
||||
|
||||
/// Icône affichée dans la bulle explicative.
|
||||
final IconData? icon;
|
||||
|
||||
/// Force la position de la bulle (`true` = au-dessus du spot).
|
||||
/// Par défaut, la bulle se place automatiquement du côté le plus dégagé.
|
||||
final bool? preferTooltipAbove;
|
||||
|
||||
const TutorialStep({
|
||||
this.targetKey,
|
||||
required this.title,
|
||||
required this.description,
|
||||
this.gesture = TutorialGesture.none,
|
||||
this.shape = TutorialHighlightShape.rounded,
|
||||
this.spotPadding = 8,
|
||||
this.icon,
|
||||
this.preferTooltipAbove,
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user