Une introduction simplifiée à Dart et Flutter

Un peu de contexte

Tout a commencé en 2011: Xamarin, maintenant une société appartenant à Microsoft, a proposé une solution pour les applications mobiles hybrides via son produit signature, Xamarin SDK with C #. C'est ainsi qu'a commencé la révolution des applications mobiles hybrides, la facilité d'écriture d'une base de code pour de nombreuses plates-formes.

Ionic a vu le jour en 2013 avec sa première version par Drifty Co. Ionic a aidé les développeurs Web à utiliser leurs compétences existantes dans le secteur en pleine croissance des applications mobiles. En 2015, Facebook a utilisé React.js pour le réinventer pour les développeurs d'applications mobiles. Ils nous ont donné React Native, une base de code entièrement JavaScript reposant sur des SDK natifs.

Et ce ne sont pas les seuls, mais quelques-uns des nombreux frameworks mobiles hybrides. Plus d'informations peuvent être trouvées ici.

Maintenant, nous pouvons regarder le tour de Google à mettre ses doigts dans le gâteau avec Flutter.

Qu'est-ce que Dart?

Google a sorti sa toute première version de Flutter 1.0 en décembre dernier, après l'avoir mis en mode bêta pendant plus de 18 mois. Dart est le langage de programmation utilisé pour coder les applications Flutter. Dart est un autre produit de Google et a publié la version 2.1, avant Flutter, en novembre. Au début, la communauté Flutter n'est pas aussi étendue que ReactNative, Ionic ou Xamarin.

Il y a quelque temps, j'ai découvert un penchant pour JavaScript. J'étais ravi de travailler sur une application mobile ReactNative pour mon stage. J'aime aussi coder des applications mobiles hybrides, alors je voulais essayer Flutter, comme je l'avais fait Xamarin l'année dernière.

À mon premier coup d'œil sur Flutter (et Dart), je me sentais perplexe et ne semblais pas comprendre quoi que ce soit. Ils avaient même une section sur leurs documents pour les développeurs quittant React Native. Donc, j'ai commencé à creuser plus profondément sur tout ce qui concerne Dart.

Dart ressemble un peu à C et est un langage de programmation orienté objet. Donc, si vous préférez les langages C ou Java, Dart est fait pour vous, et vous en serez probablement compétent.

Dart n'est pas seulement utilisé pour le développement d'applications mobiles, mais est un langage de programmation. Approuvé comme standard par Ecma (ECMA-408), il est utilisé pour construire à peu près tout sur le Web, les serveurs, le bureau et bien sûr, les applications mobiles (Oui, les mêmes personnes qui ont standardisé nos favoris ES5 et ES6.)

Dart, lorsqu'il est utilisé dans des applications Web, est transpilé en JavaScript afin de fonctionner sur tous les navigateurs Web. L'installation de Dart est également fournie avec une machine virtuelle pour exécuter les fichiers .dart à partir d'une interface de ligne de commande. Les fichiers Dart utilisés dans les applications Flutter sont compilés et emballés dans un fichier binaire (.apk ou .ipa) et téléchargés vers les magasins d'applications.

À quoi ressemble le codage dans Dart?

Comme la plupart des langages ALGOL (comme C # ou Java):

  1. Le point d'entrée d'une classe Dart est la main()méthode. Cette méthode sert également de point de départ pour les applications Flutter.
  2. La valeur par défaut de la plupart des types de données est null.
  3. Les classes Dart ne prennent en charge que l'héritage unique. Il ne peut y avoir qu'une seule superclasse pour une classe particulière, mais elle peut avoir plusieurs implémentations d'interfaces.
  4. Le contrôle de flux de certaines instructions, comme les conditions if, les boucles (for, while et do-while), les instructions switch-case, break et continue sont les mêmes.
  5. L'abstraction fonctionne de la même manière, permettant des classes et des interfaces abstraites.

Contrairement à eux (et parfois un peu comme JavaScript):

  1. Dart a une inférence de type. Le type de données d'une variable n'a pas besoin d'être explicitement déclaré, car Dart «en inférera». En Java, une variable doit avoir son type explicitement donné lors de la déclaration. Par exemple String something;,. Mais dans Dart, le mot-clé est utilisé à la place comme ceci var something;,. Le code traite la variable en fonction de ce qu'elle contient, que ce soit un nombre, une chaîne, un booléen ou un objet.
  2. Tous les types de données sont des objets, y compris des nombres. Ainsi, si elles ne sont pas initialisées, leur valeur par défaut n'est pas 0 mais est à la place nulle.
  3. Un type de retour d'une méthode n'est pas requis dans la signature de méthode.
  4. Le type numdéclare tout élément numérique, réel et entier.
  5. L' super()appel de méthode est uniquement à la fin du constructeur d'une sous-classe.
  6. Le mot clé newutilisé avant le constructeur pour la création d'objet est facultatif.
  7. Les signatures de méthode peuvent inclure une valeur par défaut pour les paramètres passés. Ainsi, si l'un d'entre eux n'est pas inclus dans l'appel de méthode, la méthode utilise à la place les valeurs par défaut.
  8. Il a un nouveau type de données intégré appelé Runes, qui traite des points de code UTF-32 dans une chaîne. Pour un exemple simple, voir les émojis et icônes similaires.

Et toutes ces différences ne sont que quelques-unes des nombreuses que vous pouvez trouver dans la visite guidée de Dart Language, que vous pouvez consulter ici.

Dart a également des bibliothèques intégrées installées dans le SDK Dart, les plus couramment utilisées étant:

  1. dart: noyau pour les fonctionnalités de base; il est importé dans tous les fichiers de fléchettes.
  2. dart: asynchrone pour la programmation asynchrone.
  3. dart: mathématiques pour les fonctions mathématiques et les constantes.
  4. dart: convertir pour la conversion entre différentes représentations de données, comme JSON en UTF-8.

Vous pouvez trouver plus d'informations sur les bibliothèques Dart ici.

Utiliser Dart dans Flutter

Flutter a plus de bibliothèques spécifiques aux applications, plus souvent sur des éléments d'interface utilisateur tels que:

  1. Widget: éléments d'application courants, tels que Text ou ListView.
  2. Material: contenant des éléments suivant la conception de Material, comme FloatingActionButton.
  3. Cupertino: contenant des éléments suivant les conceptions iOS actuelles, comme CupertinoButton.

Vous pouvez trouver des bibliothèques spécifiques à Flutter ici.

Configurer Flutter

Donc, pour mettre cette chose en marche, suivez la documentation Flutter. Il donne des détails sur l'installation du SDK Flutter et la configuration de votre IDE préféré; le mien serait du code VS. La configuration du code VS avec l'extension Flutter est utile. Il est livré avec des commandes intégrées, par opposition à l'utilisation du terminal.

Suivez à nouveau les documents pour créer votre première application. Dans mon cas, exécutez la commande d'extension Flutter: New Project. Ensuite, tapez le nom du projet et choisissez le dossier de destination.

If you prefer using the terminal, move to the destination folder of the app. Then use the command flutter create me> to create the app folder. This generates the entire app folder, including the Android and iOS project folder. To open these folders, use Android Studio and XCode, for building the app.

In the root of the project, you find pubspec.yaml. This file contains the app's dependencies. This includes both external libraries/modules and assets like images and config files. It works like a package.json, containing all external modules of the app. To install these packages, enter the package name and version under the dependencies: section of the pubspec.yaml. Run the command flutter packages get. Include the assets of the app inside the flutter: section of the same file.

The entry point of the app is main.dart, found inside the lib folder. This folder also contains all Dart classes (app pages or reusable components). On creation of the app, the main.dart file comes with a simple pre-written code. Before running this code, a device is either connected to the PC, with USB debugging enabled. Afterward, run the command flutter run on the terminal.

A First Look at the Flutter App

The app currently looks like this now:

Original text


Building the user interface of a Flutter app makes use of Widgets.

Widgets work in a similar way to React. A widget uses different components to describe what the UI should look like. They can be either Stateful or Stateless. In Stateful components, the widget rebuilds due to state changes, to accommodate the new state.

When we look at the current code for the Home page, we see that it’s a Stateful page. If the counter variable increases, the framework tries to find the least expensive way to re-render the page. In this case, find the minimal difference between the current widget description and the future one. It takes into account the changed state.

The Scaffold class is a material design layout structure and is the main container for the Home page. The AppBar, also a material design element is the title bar found at the top of the page. All other components, like the floating button and two text tags, fall under the body of the page. The Center class is a layout class that centers its child components vertically and horizontally.

The Column class, another layout widget, lists each child element vertically. Each of its child elements is added to an array and put underneath the children: section.

The two texts speak for themselves. The first displays the text ‘You have pushed.’ The second one displays the current value in the _counter variable.

The FloatingActionButton is part of the Material design widgets. It displays a + icon and triggers the increment of the _counter variable.

Hot Reloading

Another plus point of using Flutter is the hot reloading feature. It lets you see changes made to the code in real time, without restarting the build process. Type ‘r’ on the same console that you ran the flutter run command.

Altering the current code

As we can see, when you click the button, the _counter variable value increases. This re-renders the page and the new value is displayed on the body of the page.

I’m going to change that up a bit. For every button click, we will display a custom Card component with the item number.

Creating the Custom Card Component

So, to start off, we make a new .dart file inside the lib folder. I created mine in a subfolder commonComponents and named it customCard.dart.

import 'package:flutter/material.dart'; class CustomCard extends StatelessWidget { CustomCard({@required this.index}); final index; @override Widget build(BuildContext context) { return Card( child: Column( children: [Text('Card $index')], ) ); } }

This component will be a stateless widget and will only display the value that we send to it, in the Text widget.

Displaying a List of Custom Cards

Import the above component to the main.dart like so:

import 'commonComponents/customCard.dart';

I then replace the code of the home page body, from the one above to this:

body: Center( child: Container( child: ListView.builder( itemCount: _counter, itemBuilder: (context, int index) { return CustomCard( index: ++index, ); }, ) ), ),

It now displays a List of CustomCard elements, up to the number of times the button is clicked. The itemCount is used to define the number of elements the ListView must display. The itemBuilder returns the actual item that is displayed.

And that’s a simple example of using Flutter.

In conclusion…

Before my interest turned to JavaScript, I worked with Java. If I had encountered Dart around that time, I might have been able to understand it easier than I did now. All in all, It wasn’t too difficult but took a bit of time to get the hang of it. I could see myself using it in time.

Find the code repo, here.

Find the commit for this post, here.