Tutoriel Flutter Partie 1: Créer une application Flutter à partir de zéro


Dans cette série de didacticiels, nous vous guiderons étape par étape sur la façon de créer une application mobile de commerce électronique à l’aide de flutter. L’application mobile serait une application open source pour le Plateforme Aviacommerce. Le didacticiel se concentrerait sur cette application pour introduire les concepts importants du framework flutter.

Ce didacticiel est la première partie de la série de didacticiels de flottement: –

  1. Comment créer une application Flutter à partir de zéro
  2. Comment mettre en page une application en flutter (Bientôt disponible)
  3. Comment organiser les données en flutter (Bientôt disponible)
  4. Liste des données dans flutter (Bientôt disponible)

Plus de mises à jour sur le contenu à mesure que nous progressons.

Le blog expliquera comment créer des mises en page et présentera l’état étape par étape. Pour plonger directement dans le code, l’ensemble du projet est disponible dans Github sous l’égide d’AviaCommerce. N’hésitez pas à le bifurquer et à jouer.

Nous, à AviaCommerce rechercher activement de nouveaux cadres qui redéfinissent le développement de logiciels. Notre équipe suit de près l’activité Battement depuis sa première version bêta.

Google a enfin annoncé Flutter 1.0, la première version stable de la boîte à outils de l’interface utilisateur pour créer de belles expériences natives pour iOS et Android à partir d’une base de code unique.

Flutter possède une documentation exceptionnelle pour la configuration de l’environnement de développement. Suivez ceci guide d’installation officiel pour y aller.

Une fois la configuration terminée, nous pouvons commencer avec un nouveau projet de test. Je préfère Android Studio car il offre une expérience IDE complète et intégrée pour Flutter. Android Studio nécessite un plugin éditeur pour Dart.

Lancez Android Studio. Vous pouvez voir une option pour initialiser un nouveau projet basé sur Flutter.

Choisir Application Flutter dans la liste des configurations.

Pensez à un nom de fantaisie pour votre premier Flutter app. Ou tout simplement aller avec un minuteur si vous êtes mal à nommer des trucs comme moi.

Une dernière étape du processus, la boîte de dialogue vous demandera le nom du package d’application.

Après cette étape, le SDK Flutter créera une structure de répertoires initiale pour l’application. Toute l’action va à l’intérieur lib dossier et main.dart est le point de départ de l’exécution de l’application.

Dans Flutter, tout est un widget. Les images, les icônes et le texte dans une application Flutter sont tous des widgets. Même les éléments de mise en page tels que les lignes, les colonnes et les grilles qui organisent, contraignent et alignent d’autres widgets sont eux-mêmes des widgets.

Le bon point est que Flutter SDK crée ici un widget interactif à la racine de l’application. Pour rendre les choses un peu plus faciles, supprimons cela et commençons par une conception minimale nue (Bonjour tout le monde!).

Votre main.dart le fichier devrait ressembler à ceci:

Le lancement de l’émulateur Android l’ouvre avec un widget texte saluant « Bonjour tout le monde! »

Remarquez le widget mis au point ici. Nous allons essayer de modifier le body de MaterialApp pour faire ressortir l’interface comme nous voulons qu’elle soit. La version originale est ce qui est montré ci-dessous.

Les éléments de mise en page (widgets) dans Flutter peuvent être classés en deux grands types selon qu’ils contiennent un seul widget ou sont capables de contenir un tableau de widgets. Container, Padding appartiennent à l’ancien tout Row, Column etc. relèvent de ce dernier.

Introduire un Row mise en page avec trois enfants de type Text widgets.

Avant de continuer et de styliser les composants, il est conseillé de créer un nouveau widget qui gérera le style afin que nous suivions le principe DRY.

Remplacez les trois enfants par un widget personnalisé défini ultérieurement dans le même fichier. Le fichier main.dart devient maintenant

La minuterie semble un peu fade en ce moment. Je ne suis pas très bon dans les interfaces utilisateur mais essayons de notre mieux. Emballez le widget Texte à l’intérieur d’un conteneur et décorez le conteneur avec une couleur d’arrière-plan et un rembourrage pour espacer les éléments.

Insérez également un bouton pour effectuer les actions du minuteur sous les trois widgets de texte de style. Le modifié le code ressemble à ceci.

Voici la partie la plus intégrante de l’état de l’application. L’État conservera la valeur actuelle de la minuterie et si la minuterie est active (en cours d’exécution) ou non. Je suis venu avec TimerState la classe qui est responsable du maintien de l’état et prend également en charge la construction de l’arborescence des widgets.

Appuyer sur le bouton bascule est une variable active.

Dart est livré avec un module élégant pour async opérations. Nous pouvons utiliser sa classe Timer pour nous aider à incrémenter les secondes. Le modifié TimerAppState est décrit ci-dessous. Remarquez que nous avons refactorisé Timer classe à TimerApp pour éviter toute ambiguïté avec Timer dans le module async.

L’application est désormais entièrement fonctionnelle. Le code main.dart complet peut être trouvé ici. J’espère que cela clarifie les bases du cadre Flutter.

Auteur de l’article : manuboss