CATALOGUE Code & Data Formation No Code Maîtriser FlutterFlow - De l'Idée à l'Application

Guide de Création d'une Page Web pour Nouvelle Histoire

Retour à la formation
Chapitre 5 Leçon 1
Précédent
Suivant

Apprenez à créer une page de création d'histoires avec une barre de navigation personnalisée utilisant Figma et Flutter.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous vous guiderons à travers la création d'une page de création d'histoires en utilisant Figma et Flutter. Tout d'abord, nous explorerons la conception de la maquette sur Figma, qui inclut une app bar intitulée Nouvelle Histoire avec un fond bleu. Ensuite, nous créerons cette page dans Flutter, en ajoutant les actions nécessaires pour naviguer entre les pages. Nous mettrons en place un conteneur principal avec d'autres conteneurs à l'intérieur pour gérer le texte et l'interface de type question-réponse que l'utilisateur utilisera pour configurer son histoire.

Nous ajusterons également la barre de navigation pour s'afficher uniquement sur certaines pages, en conservant les liens vers Mes Histoires et Mon Compte. Nous expliquerons également quelques astuces importantes, comme ne pas utiliser le style flutter défaut navbar, mais plutôt la google navbar ou la floating navbar pour que nos paramètres fonctionnent correctement.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :

  • Comprendre comment concevoir une page à partir d'une maquette Figma.
  • Apprendre à implémenter une barre de navigation personnalisée.
  • Savoir gérer les actions de navigation entre les pages.

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez avoir :

  • Des connaissances de base en Figma et Flutter.
  • Une compréhension des concepts essentiels de conception UI/UX.

Métiers concernés

Ce sujet est particulièrement utile pour :

  • Développeurs front-end.
  • Designers UI/UX.
  • Chefs de projet digital.

Alternatives et ressources

Les alternatives possibles incluent l'utilisation d'autres outils tels que :

  • Adobe XD pour la conception UI/UX.
  • React Native pour le développement d'applications mobiles.

Questions & Réponses

Il est important de ne pas utiliser le flutter défaut navbar parce qu'il ne permet pas à certains paramètres de la barre de navigation de fonctionner correctement. Utiliser la google navbar ou la floating navbar assure une compatibilité optimale.
Pour rendre une page accessible via un bouton de navigation, il faut créer une action Navigate to Nouvelle Histoire sur le bouton souhaité. Cela permet de naviguer directement vers la page Nouvelle Histoire.
Les paramètres configurables pour la barre de navigation incluent l'ajout ou la suppression de liens, l'affichage conditionnel de la barre sur certaines pages, ainsi que le choix du style comme la google navbar ou la floating navbar.