fbpx

7. Les packages Flutter (suite)

Les packages Flutter sont très utiles voir indispensables lors du développement de nos applications mobiles.

Flutter met à notre disposition des milliers de packages (Dart et Flutter) qui nous permettent d’accéder à des fonctionnalités très facilement.

Nous allons voir comment prendre en main les packages Flutter, les installer et les configurer pour nous en servir.

1. Installer un package Flutter

Pour découvrir en premier lieu tous les packages Flutter, je vous invite à vous rendre sur le site suivant: https://pub.dev/

C'est sur ce ce site de Google que vous allez retrouver tous les packages Dart et Flutter, avec certains classements des plus récents ou populaires.

Pub est le gestionnaire des paquets de Dart et Flutter, c'est l'équivalent de NPM pour le JavaScript.

Depuis le site pub.dev vous retrouverez tous les packages Flutter avec des exemples d'utilisation et les étapes d'installation.

Pour installer un nouveau package, nous passerons directement par le fichier pubspec.yaml qui nous permet de gérer les packages et leur dépendance:

pubspec.yaml

On parle alors de métadonnées qui sont stockées dans ce fichier de type YAML qui est un format de représentation de données.

Par exemple pour ajouter le package english_words donné comme exemple dans la documentation de Flutter, je commence par me rendre sur sa page pub.dev: https://pub.dev/packages/english_words

Je repère la dernière version du package Flutter et j'utilise la même syntaxe:

english_words: ^4.0.0

Vous devez notamment ajouter cette ligne de code à la suite des autres dépendances de votre application:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.3
  english_words: ^4.0.0 # ma nouvelle dépendance

Une fois que vous avez ajouté votre nouvelle dépendance, c'est-à-dire le package souhaité, il vous reste à le télécharger.

vous pouvez entrer la commande suivante pour l'installer dans votre application:

flutter pub get

Visual Studio Code devrait même automatiquement vous exécuter cette commande une fois que vous enregistrez votre fichier pubspec.yaml.

Sinon il s'agit simplement d'une commande flutter qui vient récupérer les packages pub indiqué dans votre fichier et télécharger ceux qui manquent.

Maintenant que votre package est installé, vous allez pouvoir l'importer dans vos fichiers Dart:

import 'package:english_words/english_words.dart';

Voilà pour les étapes d'installation très simples d'un package Flutter dans notre application.

Nous allons maintenant voir comment les utiliser avec différents exemples de packages (english_words, google_fonts et animate_do).

2. Utiliser un package Flutter

Pour utiliser un package dans un fichier Dart, cela va être très simple, mais pourra varier selon la complexité du package en question.

Vous devez tout d'abord importer ce package dans votre fichier Dart:

import 'package:english_words/english_words.dart';

Une fois cette importation effectuée, vous avez accès à toutes les méthodes et classes de ce package.

Par exemple le package english_words nous donne accès à la classe WordPair pour associer deux mots anglais aléatoires: https://pub.dev/documentation/english_words/latest/english_words/WordPair-class.html

WordPair.random().asPascalCase

Ici la méthode random() permet de sélectionner deux mots anglais aléatoirement et la propriété asPascalCase permet de mettre le début de chaque mot en majuscule (exemple: SkullTwist).

La documentation de Flutter propose aussi de créer d'abord une constance pour stocker ces nouveaux mots:

final wordPair = WordPair.random();

Ici le terme final représente la déclaration d'une nouvelle une variable qui sera utilisée dans notre widget.

On utilise final plutôt que const lorsqu'on ne connait la valeur de notre variable qu'au moment de la compilation de l'application.

Ici, c’est typiquement le cas puisqu'on affecte une valeur différente à la variable wordPair au chargement de notre application.

Voilà pour la variable intermédiaire, à laquelle on applique la propriété asPascalCase directement dans le widget Text():

Text(wordPair.asPascalCase),

Voilà le code final de l'utilisation du package english_words dans Flutter:

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);
  final wordPair = WordPair.random();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text(wordPair.asPascalCase),
        ),
      ),
    );
  }
}

En actualisant votre application, vous devriez afficher différentes combinaisons de mots:

Nous allons maintenant voir d'autres exemples pour compléter notre compréhension des packages Flutter.

3. Autre exemple avec le package Google Font

Prenons un deuxième exemple avec le package google_fonts de Flutter, qui permet d'accéder aux polices de Google.

Je vous laisse à nouveau le lien de la documentation officielle pour accéder aux informations complémentaires: https://pub.dev/packages/google_fonts

Pour l'installer, on commence par ajouter sa dépendance dans le fichier pubspec.yaml avec la dernière version du package:

google_fonts: ^2.1.0

Ensuite vous pouvez à nouveau lancer la commande Flutter suivante (ou laissez VSC le faire) dans votre terminal:

flutter pub get

Nous pouvons maintenant importer notre package dans notre fichier main.dart comme ceci:

import 'package:google_fonts/google_fonts.dart';

Et utiliser la propriété style dans notre widget Text() pour modifier la police de celui-ci:

body: Center(
  child: Text(
    'This is Google Fonts',
    style: GoogleFonts.mcLaren(),
  ),
),

Le code complet de notre fichier Dart est le suivant:

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text(
            'This is Google Fonts',
            style: GoogleFonts.mcLaren(),
          ),
        ),
      ),
    );
  }
}

Je vous laisse jeter un œil à la documentation pour accéder aux différentes polices et variations possibles.

Nous détaillerons dans une autre leçon l'utilisation précise des propriétés dans Flutter.

4. Dernier exemple avec le package animate_do

On finit avec un exemple plus avancé, mais qui devrait vous plaire, celui du package animate_do.

C'est un package Flutter qui permet d'accéder à des dizaines d'animations préconçues de la même manière que certaines librairies CSS.

Je vous laisse le lien de la documentation pour accéder à toutes les animations: https://pub.dev/packages/animate_do

Pour l'installer, vous pouvez ajouter sa dépendance dans le fichier pubspec.yaml:

dependencies:
  animate_do: ^2.0.0

Puis lancer la commande suivante:

flutter pub get

Et enfin importer le package dans votre fichier Dart:

import 'package:animate_do/animate_do.dart';

On peut déjà utiliser une première animation appliquée à notre widget Text().

Pour cela nous utilisons le nouveau widget BounceInDown() et nous lui affections comme enfant notre texte:

Center(
  child: BounceInDown(
    child: const Text('Hello World'),
  ),
),

Cette animation comme son nom l'indique va permettre de faire tomber puis rebondir notre texte.

L'exemple de Flutter propose aussi de générer un carré dans notre application pour lui affecter cette animation.

On peut donc reprendre l'exemple de ce carré bleu, dont vous devriez commencer à saisir la syntaxe:

class Square extends StatelessWidget {
  const Square({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      decoration: const BoxDecoration(
        color: Colors.blueAccent,
      ),
    );
  }
}

On peut ensuite remplacer notre widget Text() par ce nouveau widget square() et lui affecter cette animation.

body: Center(
  child: BounceInDown(
    child: const Square(),
  ),
),

Vous devriez voir votre carré bleu tomber puis rebondir au centre de votre page désormais.

Je vous invite à vous amuser un peu et tester d'autres animations que propose ce package comme celle-ci:

SpinPerfect(
  child: const Square(),
),

Votre carré devrait maintenant effectuer une rotation sur lui-même.

Nous détaillerons dans le prochain chapitre les animations Flutter en détail, ici le but était de vous faire découvrir les packages Flutter.