Comment créer une application de connexion simple avec Flutter

Comment créer une application de connexion simple avec Flutter – Brilliansolution. Flutter est l’un des frameworks les plus populaires pour créer des applications mobiles et de bureau. Et de nombreuses entreprises l’utilisent aujourd’hui.

Cela est dû en partie à ses performances exceptionnelles, avec une référence de 60 images par seconde (FPS). Cela l’aide à surpasser les autres technologies multiplateformes, et il fonctionne mieux même par rapport aux langues natives.

Je suis un passionné de React Native. Mais après avoir entendu tous les avantages de Flutter, j’ai décidé de l’essayer. Je voudrais partager mon expérience d’apprentissage avec vous à travers ce tutoriel.

Dans cet article, nous allons apprendre à créer une application Flutter avec une disposition de connexion et quelques fonctionnalités.

Conditions préalables

Dans cet article, je ne couvrirai pas les étapes pour installer Flutter sur votre machine. Je pense que c’est mieux expliqué sur leur site de documentation officiel.

Je vous recommande fortement d’essayer ceci exercer offert par la communauté officielle Flutter. Cela vous donnera une compréhension rapide de Flutter afin que vous puissiez commencer.

Ne vous inquiétez pas si vous ne comprenez pas quelques concepts qui y sont mentionnés. Je vais écrire à leur sujet dans mes prochains tutoriels. J’ai utilisé cet exercice pour commencer mon propre voyage Flutter, et je me suis senti plus confiant après l’avoir terminé par moi-même.

Commençons à créer notre application !

Je crois au dicton : « Se fixer un objectif, c’est la moitié du travail accompli ». Donc, chaque fois que j’essaie de faire quelque chose, je me fixe un objectif pour voir où je veux être quand j’aurai fini. Alors, quel est l’objectif pour vous de lire ce tutoriel ?

Pour créer cette application, vous devez installer les éléments suivants sur votre ordinateur :

1. Visual Studio Code (l’un des IDE recommandés par Flutter)
2. Émulateur Android / Simulateur iOS / Appareil d’origine
3. Flutter installé (je recommanderais de suivre ce guide pour l’installer si vous ne l’avez pas déjà)
4. Plugin Flutter pour VS Code (Guide recommandé)

Comment créer le projet

Accédez au dossier dans lequel vous souhaitez créer votre application.

Ouvrez Visual Studio Code à partir de ce répertoire.

Ouvrez la palette de commandes en appuyant sur CTRL + SHIFT + P et tapez Flutter. Choisir Flutter: New Project parmi les options répertoriées.

Sélectionner Application de la liste suivante.

Il vous demandera de sélectionner le dossier cible pour créer le projet. Par défaut, ce sera dans le même dossier où vous avez ouvert VS Code. Tapez le nom de votre application dans la saisie de texte et appuyez sur Enter. je nomme le mien loginappmais vous pouvez saisir le nom de votre choix.

Dans les prochaines secondes, VS Code créera un nouveau projet Flutter et vous verrez un écran comme celui ci-dessous :

Par défaut, main.dart fichier sera ouvert. C’est là que Flutter commence à exécuter l’application. En bas, vous verrez une notification disant « Votre projet Flutter est prêt ! Appuyez sur F5 pour commencer à courir… ».

Comment faire tourner l’appareil

Pour exécuter votre application, vous devez disposer d’un appareil virtuel ou d’un appareil réel en cours d’exécution et connecté à votre machine.

J’utiliserai un émulateur Android pour exécuter notre application. Vous pouvez soit exécuter un appareil virtuel, soit connecter votre téléphone mobile à votre machine. Mais n’oubliez pas d’activer le “Débogage USB” si vous déboguez via un téléphone Android.

Une fois que vous êtes connecté ou lancez un appareil virtuel, regardez en bas à droite de VS Code et appuyez sur l’option de l’appareil.

Parfois, VS Code sélectionne l’appareil par défaut, mais pour la première fois, vous devez le sélectionner vous-même. Appuyez sur le texte “Aucun appareil” dans la capture d’écran ci-dessus ou quel que soit le nom de l’appareil qui vous est affiché.

La liste des appareils virtuels disponibles et connectés s’affichera. Cliquez sur l’appareil sur lequel vous souhaitez exécuter votre application.

Une fois que vous avez sélectionné votre appareil, le panneau inférieur affichera le nom de votre appareil sélectionné, similaire à la capture d’écran ci-dessous.

Comment exécuter l’application

Êtes-vous prêt pour le lancement de fusée ?

Presse F5 pour exécuter votre application. Cela prendra un certain temps. Il s’agira de compiler et de construire votre projet. Une fois prête, l’application s’exécutera sur votre appareil.

Vous verrez un type d’interface similaire. En bas, vous pouvez voir la notification disant “Exécution de la tâche Gradle ‘assembleDebug…'”.

Excité pour la sortie ? Voici:

N’apportez aucune modification au code maintenant. Vos modifications ne seront pas suivies car Git n’est pas initialisé pour ce dépôt.

C’est une partie que j’aime chez React Native. Chaque fois que vous créez une application React Native, elle effectue un commit initial. Vous pouvez simplement aller de l’avant et apporter vos modifications et vous pourrez voir toutes vos modifications en cours de suivi.

Ce n’est pas disponible dans Flutter pour le moment (mars 2023), mais j’espère que l’équipe Flutter pourra l’ajouter à l’avenir.

Faisons le commit par nous-mêmes.

Accédez à l’emplacement du projet dans le terminal :

cd 

Accédez à l’emplacement du projet à l’aide de cd commande

Initialiser Git en exécutant git init commande.

Comme c’est notre premier commit, nous allons faire git add . pour ajouter toutes les modifications à notre commit.

Faisons le commit initial :

git commit -m "Initial commit"

Commit initial pour le dépôt

Voici la capture d’écran du processus ci-dessus :

Vérifions si nos modifications sont validées en exécutant le git status commande:

Cela semble bon. Nos changements sont engagés. Continuons.

Je n’aime pas les commentaires dans mon code. J’aime écrire du code lisible. Supprimons tous les commentaires dans le main.dart déposer. Ne touchez pas aux autres fichiers.

Tous les fichiers Flutter résideront sous le lib/ répertoire et ils auront le .dart extension de fichier. Pour l’ensemble de ce didacticiel, nous ne travaillerons que sur le main.dart déposer.

Vous pouvez lire les commentaires et en tirer des idées. Ils vous donneront une compréhension claire du fonctionnement de l’application par défaut, ce qui peut être très utile pour les débutants.

Mais cela n’a aucun sens si vous construisez l’application pour la 2e ou la 3e fois. Il ne sert à rien de relire les mêmes commentaires encore et encore car vous aurez gagné en contexte lors de votre 1ère lecture.

Vous pouvez ignorer cette étape si vous souhaitez conserver les commentaires tels quels.

Mon code est devenu super simple maintenant. J’ai fait un commit ici (après avoir supprimé les commentaires). Si vous êtes arrivé jusqu’ici, après vous être engagé, assurez-vous simplement que votre application fonctionne correctement et qu’il n’y a eu aucun changement dans l’interface utilisateur.

Comment changer le nom

Modifions le nom de la barre de titre et les noms des classes internes. Sur le MyApp classe, à l’intérieur du build méthode, changez le titre dans le champ d’accueil de “Flutter Demo Home Page” à “Login App”.

class MyApp extends StatelessWidget 
  const MyApp(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Login App'),
    );
  

Changer le nom dans la barre de titre

Changeons le nom de notre classe de “MyHomePage” à “Login”. Placez le curseur sur le texte “MyHomePage” et appuyez sur F2. F2 est la touche de raccourci pour renommer et refactoriser dans VS Code. Cela signifie qu’il renomme à l’endroit actuel et remplace tous ses usages. Voici la capture d’écran de l’apparence lorsque vous appuyez sur F2 (sur le refactoring).

Validons nos changements.

Vous devriez pouvoir voir le titre “Login App” dans votre application.

Comment créer l’application

Construisons maintenant notre application. Copiez le code ci-dessous et remplacez-le par le _LoginState classe dans le main.dart déposer.

class _LoginState extends State 
  final _formKey = GlobalKey();
  TextEditingController emailController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Form(
        key: _formKey,
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
                child: TextFormField(
                  controller: emailController,
                  decoration: const InputDecoration(
                      border: OutlineInputBorder(), labelText: "Email"),
                  validator: (value) ,
                ),
              ),
              Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
                child: TextFormField(
                  controller: passwordController,
                  obscureText: true,
                  decoration: const InputDecoration(
                      border: OutlineInputBorder(), labelText: "Password"),
                  validator: (value)  value.isEmpty) 
                      return 'Please enter your password';
                    
                    return null;
                  ,
                ),
              ),
              Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 8, vertical: 16.0),
                child: Center(
                  child: ElevatedButton(
                    onPressed: () 
                      if (_formKey.currentState!.validate()) 
                        // Navigate the user to the Home page
                       else 
                        ScaffoldMessenger.of(context).showSnackBar(
                          const SnackBar(content: Text('Please fill input')),
                        );
                      
                    ,
                    child: const Text('Submit'),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  

voir brutmain.dart hébergé avec ❤ par GitHub

Immédiatement après avoir collé et enregistré le fichier, votre interface utilisateur changera comme par magie.

Démontons le code que vous avez copié en plusieurs parties et essayons de comprendre chaque bloc.

  final _formKey = GlobalKey();
  TextEditingController emailController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

3 premières lignes de code copié

La première ligne indique que vous créez une clé pour un formulaire. Dans notre contexte, il s’agit du formulaire de connexion. Vous le créez pour identifier le formulaire de manière unique. Il est réglé sur final, de sorte qu’il ne changera pas.

Les 2 lignes suivantes sont des définitions de contrôleurs. Un contrôleur dans notre contexte est utilisé pour lire les valeurs de l’entrée. À l’aide d’un contrôleur, vous pourrez contrôler son composant associé.

Démontons le build méthode. Vous utilisez le build méthode dans Flutter pour créer l’interface utilisateur. Il contient le code de conception. Le contenu renvoyé par cette méthode sera rendu sur l’interface utilisateur.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Form(
        key: _formKey,

build méthode

L’échafaudage est un widget dans Flutter utilisé pour implémenter la structure de mise en page visuelle de base de la conception matérielle. Supposons que le widget est un simple composant d’interface utilisateur.

Nous définissons le titre passé en paramètre à cette classe. Nous pouvons accéder aux paramètres à l’aide de l’objet widget. Donc, ça va comme widget.key_name.

Si vous voulez accéder à la propriété title, alors ce sera widget.title. Ceci est similaire au passage props dans Réagir.

body : Form( key : _formKey, enfant : Padding( padding : const EdgeInsets.symmetric(horizontal : 8, vertical : 16), enfant : Column( crossAxisAlignment : CrossAxisAlignment.center, children : [

body of the UI

The next section is body. As we’re building a simple login app, we need a form to be filled out by the user to authenticate. We’re setting the unique key which we created above to this form. The Form accepts a child. It can accept only one component.

We are creating a layout with horizontal padding of 8px and vertical padding of 16px. This Padding widget also accepts only one child.

Column is a widget in Flutter that is used to display its children in a vertical array. We set crossAxisAlignment to horizontally center the contents of the Column widget.

As we saw, the Column widget displays its children in a vertical array. We can pass multiple widgets in its children property.

Padding(
  padding:
      const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
      child: TextFormField(
        controller: emailController,
        decoration: const InputDecoration(
          border: OutlineInputBorder(), labelText: "Email"),
        validator: (value) 
          if (value == null ,
     ),
  ),

Email field in the form

The first item we want to display in the UI is an input box to get the email address of a user. So, we used the TextFormField widget and set the controller to emailController.

In order to get the floating text, we need to use the decoration option which asks for the type of border and the labelText of the input.

We can add any default validation to be applied when this form is submitted in the validator field. We’re validating if it’s either a null or empty value and we return an error if any of them match. If it has some value, then we’re not throwing any errors and returning null.

Padding(
  padding:
  const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
    child: TextFormField(
      controller: passwordController,
      obscureText: true,
      decoration: const InputDecoration(
        border: OutlineInputBorder(), labelText: "Password"),
      validator: (value)  value.isEmpty) 
          return 'Please enter your password';
        
        return null;
      ,
   ),
),

Password field in the form

The second item is the input box to get the Password from the user. This is similar to the email field except for one thing: we should hide the password in the input field and display a dot for each typed character.

To do that, we have to pass an obscureText property to the TextFormField widget and set it to true. The decoration, validation, and other items remain the same as that of Email.

Padding(
  padding:
    const EdgeInsets.symmetric(horizontal: 8, vertical: 16.0),
      child: Center(
        child: ElevatedButton(
          onPressed: () 
            if (_formKey.currentState!.validate()) 
              // Navigate the user to the Home page
             else 
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text('Please fill input')),
              );
            
          ,
        child: const Text('Submit'),
      ),
    ),
),

Submit the form

This is the final piece of our form, which is a submit button. We’re using a ElevatedButton widget and passing the button text in the child property of the button. We define the action that should be followed when pressing this button in the onPressed property.

In our case, we’re validating the input fields (remember the validator property we defined for the email and the password input box). If the validation passes, we should navigate the user to the next screen (which we’ll be adding later). If not, we show a message asking the user to fill in the inputs (“Please fill input”).

It’s time to verify if our code is working properly. Check your app. Try to submit without entering any input and you should notice the Snackbar at the bottom with the text “Please fill input”. Fill in the input boxes with some random values and try to submit and you should not be seeing the error now.

If you’re facing any errors in viewing the UI, most of the time (almost 90%) it’ll be with brackets. We’ll be using a lot of brackets in Flutter which is often confusing for beginners. Make sure you have the proper opening and closing brackets. The Flutter app may terminate in the middle in case of any errors. In these cases, after applying the fix, press F5 to restart the app.

Navigate on Login

Let’s navigate the user to the Home page on successful login and show the email address they entered on the Login page. Something similar to the below screenshot:

Go to the last line of the main.dart file and copy and paste the below content:

class HomePage extends StatelessWidget 
  const HomePage(super.key, required this.email);

  final String email;

  @override
  Widget build(BuildContext context) 
    return Scaffold(
        appBar: AppBar(
          title: const Text('Home Page'),
        ),
        body: Column(
          children: [
            Text(email),
            Center(
              child: ElevatedButton(
                onPressed: () 
                  Navigator.pop(context);
                ,
                child: const Text("Go back!"),
              ),
            ),
          ], ));   

voir brutmain.dart hébergé avec ❤ par GitHub

Dans ce code, nous créons une nouvelle classe appelée “HomePage” et l’étendons à partir de “StatelessWidget”. Nous recevons un e-mail de la page précédente.

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Home Page'),
        ),
        body: Column(
          children: [
            Text(email),
            Center(
              child: ElevatedButton(
                onPressed: () 
                  Navigator.pop(context);
                ,
                child: const Text("Go back!"),
              ),
            ),
          ],
        ));

Interface utilisateur pour la page d’accueil

Sur le build méthode, nous définissons le titre de la page comme étant “Page d’accueil” et son corps contient un Text et ElevatedButton widget. Le Text widget affichera l’adresse e-mail transmise depuis l’écran précédent. Le ElevatedButton widget guidera l’utilisateur vers l’écran précédent chaque fois qu’il est pressé. Nous utilisons Navigator.pop(context); pour revenir à l’écran précédent.

Voyons comment naviguer depuis le Login page à la Home page.

Supprimer le commentaire que nous avons fait sur validation condition (“Naviguez l’utilisateur vers la page d’accueil”) comme indiqué dans la capture d’écran ci-dessus et remplacez-la par le contenu ci-dessous.

if (emailController.text == "arun@gogosoon.com" && passwordController.text == "qazxswedcvfr") 
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => HomePage(
        email: emailController.text,
    )),
  );
 else 
  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(
      content: Text('Invalid Credentials')),
    );

Voici le code final pour le bouton Soumettre.

Padding(
  padding:
    const EdgeInsets.symmetric(horizontal: 8, vertical: 16.0),
      child: Center(
        child: ElevatedButton(
          onPressed: () 
            if (_formKey.currentState!.validate()) 
              if (emailController.text == "arun@gogosoon.com" &&
                            passwordController.text == "qazxswedcvfr") 
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => HomePage(
                      email: emailController.text,
                    )),
                );
               else 
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text('Invalid Credentials')),
                  );
              
             else 
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text('Please fill input')),
              );
            
          ,
        child: const Text('Submit'),
      ),
    ),
),

Envoyer le code du bouton

Essayons de comprendre ce code.

En plus de la validation du formulaire, nous ajoutons une autre couche de validation qui vérifie si l’utilisateur a tapé l’adresse e-mail comme “arun@gogosoon.com”, (qui est mon adresse e-mail, vous pouvez la remplacer par ce que vous voulez) et le mot de passe en tant que “qazxswedcvfr”. Nous dirigeons l’utilisateur vers la page d’accueil si les informations d’identification saisies correspondent, et affichons « Identifiants non valides » dans la barre de collations dans le cas contraire.

C’est ça. Nous avons couvert une validation de connexion très basique. Essayez d’exécuter l’application et vérifiez si votre application fonctionne comme prévu.

Conclusion

Dans cet article, vous avez appris à créer une version de base d’une application de connexion à l’aide de Flutter. J’espère que vous êtes clair sur le déroulement de la création de l’application Flutter.

Si vous êtes curieux d’en savoir plus sur Flutter, essayez l’exercice que j’ajoute ci-dessous. Rechercher, appliquer le code et obtenir le résultat par vous-même vous rendra plus confiant dans le développement d’applications Flutter.

1. Essayez d’ajouter une icône en forme d’œil à la fin du champ de saisie “Mot de passe”. Cliquer dessus devrait basculer l’affichage du mot de passe en texte brut et en texte masqué
2. Effacez les champs de saisie E-mail et Mot de passe avant d’accéder à la page d’accueil
3. Ajouter une validation regex supplémentaire pour la saisie d’e-mails
4. Ajouter une validation au champ du mot de passe si l’utilisateur a saisi au moins un chiffre, une lettre et un symbole
5. Ajoutez un bouton “Inscription” sous le bouton “Soumettre” qui devrait diriger l’utilisateur vers une nouvelle page “Inscription”

En rapport