Skip to main content

File Structure

Dans cet article, nous allons decouvrir comment est structurer Comup. Cette application que nous avons décidé de construire avec Flutter.

Les Assets​

Tout d’abord, nous avons créer un dossier d’Assets à la racine du projet que nous utiliserons pour stocker des images, des fichiers de traduction, des fichiers de polices personnalisés, des fichiers d'LottieFiles...

Le dossier Assets contient les dossiers suivants :

  • Fonts: Ce dossier doit contenir tous les fichiers de polices d'écriture, c’est-à-dire les polices personnalisées utilisées dans l’application (fichiers .ttf)

  • Images: C’est le dossier le plus important où nous stockons toutes nos images.

  • i18n: Notre application prend en charge l’internationalisation, nous avons donc ajouter des fichiers .json pour toutes les différentes langues pris en charge, c’est-à-dire que nous devons prendre en charge l’anglais et Français, nous avons donc ajouter en.json et fr.json dans ce dossier. nous pouvons trouver plus d’informations sur ce lien internationaliser flutter en utilisant des fichiers JSON

  • Lottie Files: Lottie est un format de fichier d’animation open-source minuscule, de haute qualité, scriptable, interactif et pouvant être manipulé au moment de l’exécution. Ce type de fichier est important pour apporter de la fluidité à l'application.

Voici à quoi ressemble le dossier assets :

Assets Files Structure

Configs​

Le dossier config contient les dossiers suivants :

  • Themes: Notre application prend en charge les thèmes clairs et sombres. Ces thèmes sont des thèmes personnalisés, nous avons créer deux fichiers light_theme.dart, dark_theme.dart où nous ajouterons toutes les couleurs nécessaires pour chaque type de widget.

  • Themes: Notre application prend en charge les thèmes clairs et sombres. Ces thèmes sont des thèmes personnalisés, nous avons créer deux fichiers light_theme.dart, dark_theme.dart où nous ajouterons toutes les couleurs nécessaires pour chaque type de widget.

Les Constants​

Voici les constantes suivantes qui sont statiques dans toutes les applications

  • app_constants.dart: C’est là que toutes nos constantes d’application seront présentes.

Constants Files Structure

Les Widgets​

Dans une application à grande échelle comme Comup, nous devons créer des widgets plus personnalisés plutôt que des widgets par défaut. Supposons que nous ayons besoin d’utiliser notre propre TextField, FlatButton, OutlineButton, Divider, CircularLoader, etc. personnalisé que nous pouvons utiliser dans toute notre application. Nous pouvons ajouter ce type de widgets de personnalisation à l’intérieur du dossier widgets. (CustomTextField.dart - CustomButton.dart)

Voici à quoi ressemble le dossier widgets :

Constants Files Structure

Les Utils​

Le dossier Utils contient les assistants, les services, les utilitaires de l’interface utilisateur, les mixins qui sont utilisés dans toute l’application

Dans de nombreux scénarios, nous devons écrire du code plusieurs fois pour la même chose, comme convertir les premiers caractères de chaque mot en majuscules généralement utilisés pour afficher les titres de tout autre widget, etc. Ce type de code peut être rendu commun pour réduire la redondance et ajouter ce code dans les fichiers d’assistance qui sont présents dans lib/utils/

Le dossier Utils contient les fichiers suivants :

  • page_transition: Ce dossier contient les animation de transition des pages, nous utilisons ces animation pour ajouter de la fluiditée a la navigation.

  • config.dart: C’est le fichiers executer l'orsqu'on lance l'application. Dans ce fichier nous initialisons les packages comme firebase

  • file_utils.dart: Notre application contient énormement d'images, ce fichier sert contient donc des fontion pour connaitre le poids des images, son extenssion (.png, .jpg, .svg)

  • firebase.dart: C’est là que toutes nos chemin vers firebase sont présents. Ils nous permettent de nous retouver facilement a travers la base de donnés.

    lib\utils\firebase.dart

    CollectionReference usersRef = firestore.collection('users');
    CollectionReference commentRef = firestore.collection('events');
    CollectionReference notificationRef = firestore.collection('notifications');
    CollectionReference followersRef = firestore.collection('followers');
    CollectionReference followingRef = firestore.collection('following');

  • utils.dart: Ce fichier contien les fontion est variable que nous utilisons dans toute l'application

    La fonction showsnacbar nous permet de faire apparaitre une snackbar le plus facilement possible en appelant cette fonction

    lib\utils\utils.dart

    void showSnackbar(String message)

  • validators.dart: C'est la que la verification des différents inputs sont faite.

    Ce fichier contient plusieur fonction retournant un String indiquant l'ereur

    lib\utils\utils.dart

    validateUsername(String? value)
    validateEmail(String? value)
    validatePassword(String? value)

Voici à quoi ressemble le dossier utils :

Constants Files Structure

Les Models​

Les models sont des class, la structure des données d'un utlisateur, événement, commentaire... Il est très important de bien organiser toutes les données.

Les Services​

Ce dossier réunit toutes les fonctionnalités de l'application. Il contient par exemple un fichier permettant d'upload des images de la galerie d'un utilisateur.