Navigation avec GetX !

Navigation avec GetX !

GetX est une puissante librairie pour le développement avec Flutter. Celle-ci contient différents modules : un gestionnaire d'état, un système d'injection de dépendance, un gestionnaire de navigation, etc. dont le but est d'accroître la productivité du développeur.

Dans ce billet de blog, nous présenterons le module de navigation. Elle constitue un élément essentiel à la réalisation d'une application. Nous mettons en place différentes interfaces et transitions entre elles. Le système de navigation actuel demande d'écrire beaucoup de code. Nous verrons l'alternative plus simple proposée par GetX.

Installation

Pour installer GetX, il faut définir la dépendance dans le fichier pubspec.yaml.

dependencies:
  get:

Utilisation

Pour que GetX soit pris en compte dans notre application, il faudra remplacer MaterialApp par GetMaterialApp comme suit :

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      ...,
    );
  }
}

Passez d'une page à une autre

Sans GetX, elle se fait de la manière suivante:

Navigator.of(context).push(
        MaterialPageRoute(
          builder: (context) => MainPage(),
        ),
      );

Avec GetX, l'approche est très différente et se fait ainsi:

Get.to(MainPage());

Vous remarquez l'absence du context. GetX sait le récupérer en toute transparence.

Passez d'une page à une autre en détruisant la précédente

Sans GetX

Navigator.of(context).pushReplacement(
        MaterialPageRoute(
          builder: (context) => MainPage(),
        ),
      );

Avec GetX

Get.off(Page());

Passez à une page en détruisant toutes les précédentes

Sans GetX

Navigator.of(context).pushAndRemoveUntil(
   MaterialPageRoute(
       builder: (context) => MainPage(),
   ),
   (route) => false,
);

Avec GetX

Get.offAll(Page());

Nous constatons le gain de production apportée par cette librairie. Pour plus d'informations concernant la navigation, vous pouvez consulter la documentation ici.

Cordialement.