Aller au contenu principal

Atelier 3 : Navigation et Deep Links en Flutter

Objectifs​

  • Implémenter la navigation basique avec Navigator.push() et Navigator.pop()
  • Créer une application avec routes nommées
  • Implémenter les deep links (liens vers l'application avec paramètres)
  • Passer des données entre écrans via routes paramétrées
  • Gérer la navigation dans une application multi-écrans

Partie 1 : Navigation Interne avec Routes Nommées​

Contexte​

Vous allez créer une application de gestion de contacts avec plusieurs écrans :

  • Accueil : Liste de contacts avec liens internes
  • Détails du contact : Affiche les détails d'un contact sélectionné
  • À propos : Page d'information sur l'application
  • Paramètres : Page de paramètres

Spécifications​

Structure de l'application :

main.dart
  └─ MyApp (MaterialApp)
     ├─ HomeScreen (route '/')
     ├─ ContactDetailsScreen (route '/contact/:id')
     ├─ AboutScreen (route '/about')
     └─ SettingsScreen (route '/settings')

À faire​

1. Créer une classe Contact​

Créez une classe pour représenter un contact avec :

  • String id - Identifiant unique
  • String name - Nom du contact
  • String email - Email
  • String phone - Numéro de téléphone
  • String profileImageUrl - URL de la photo de profil (optionnel)

2. Créer MyApp avec routes nommées​

Configurez MaterialApp avec :

  • initialRoute: '/'
  • Un dictionnaire routes contenant les écrans statiques
  • Utilisez onGenerateRoute pour les routes dynamiques avec paramètres (ex: /contact/:id)
  • Theme Material approprié

3. Créer HomeScreen​

Affiche :

  • Un AppBar avec le titre "Contacts"
  • Une liste de contacts (ListView avec ListTile)
  • Chaque contact est un bouton qui navigate vers /contact/[ID]
  • Un menu avec liens vers "À propos" et "Paramètres"

Indice : Utilisez Navigator.pushNamed(context, '/contact/${contact.id}')

4. Créer ContactDetailsScreen​

Affiche :

  • Un AppBar avec le nom du contact
  • Photo du contact
  • Email (avec bouton pour copier)
  • Téléphone (avec bouton pour copier)
  • Bouton "Retour" (utiliser Navigator.pop())

Important : Récupérer l'ID du contact depuis la route et charger les données

5. Créer AboutScreen​

Affiche :

  • Information sur l'application
  • Bouton "Retour"

6. Créer SettingsScreen​

Affiche :

  • Quelques paramètres simples
  • Bouton "Retour"

Partie 2 : Deep Links (Liens vers l'Application avec Paramètres)​

Concept​

Les deep links permettent à d'autres applications (ou un navigateur) d'ouvrir votre application directement à une page spécifique avec des paramètres.

Exemples de deep links :

  • app://contact/123 → Ouvre le contact avec ID 123
  • app://about → Ouvre la page "À propos"
  • https://example.com/contact/456 → Ouvre le contact 456 si configuré

À faire​

1. Configurer les routes dynamiques avec onGenerateRoute​

Dans MyApp, implémentez onGenerateRoute pour gérer les routes avec paramètres :

onGenerateRoute: (settings) {
  if (settings.name?.startsWith('/contact/') == true) {
    final id = settings.name!.split('/')[2];
    return MaterialPageRoute(
      builder: (context) => ContactDetailsScreen(contactId: id),
    );
  }
  // ... gérer les autres routes
},

2. Créer une liste de contacts de test​

Dans HomeScreen, définissez une liste statique de contacts pour tester :

static final List<Contact> contacts = [
  Contact(id: '1', name: 'Alice', email: 'alice@example.com', phone: '555-0001'),
  Contact(id: '2', name: 'Bob', email: 'bob@example.com', phone: '555-0002'),
  Contact(id: '3', name: 'Charlie', email: 'charlie@example.com', phone: '555-0003'),
];

3. Ajouter des liens internes qui utilisent les IDs​

Dans HomeScreen, quand on clique sur un contact :

Navigator.pushNamed(context, '/contact/${contact.id}');

Créez un test manuel où vous tapez manuellement une URL comme /contact/2 dans la barre de navigation pour vérifier que ça fonctionne.

Dans HomeScreen, ajoutez un bouton qui ouvre une boîte de dialogue permettant de saisir un ID de contact et de naviguer vers celui-ci :

ElevatedButton(
  onPressed: () {
    // Ouvrir un dialog pour saisir un ID
    // Puis naviguer vers /contact/[ID saisi]
  },
  child: const Text('Ouvrir un contact par ID'),
)

Structure attendue​

lib/
├── main.dart
├── screens/
│   ├── home_screen.dart
│   ├── contact_details_screen.dart
│   ├── about_screen.dart
│   └── settings_screen.dart
└── models/
    └── contact.dart

Points importants​

  • Utilisez MaterialApp avec routes nommées pour les routes statiques
  • Utilisez onGenerateRoute pour les routes dynamiques avec paramètres (ex: /contact/:id)
  • Extrayez les paramètres de la route dans les widgets concernés
  • Testez la navigation en "simulant" des appels de deep links
  • Assurez-vous que les IDs sont correctement passés et utilisés