Navigator 2.0 et NavigationRail

Flutter
1

Bonjour à tous,

Je cherche à mettre en place un NavigationRail comme outil de navigation sur le niveau principal d’une appli et également à mettre en place le Navigator 2.0.

Le cours est clair pour moi si je devais créer des pages complètes avec le Navigator 2.0 mais j’ai un peu de mal à faire la gymnastique avec le NavigationRail : car ma création de page devient un widget de ma page principale. Je m’explique :
Mon navigationrail et ma page sont inclus dans une Row et il faudrait que je puisse changer la page en fonction de ce qui est sélectionné dans le navigationrail :

Row(
                children: [
                  NavigationRail(
                    ....
                  ),
                  Expanded(
                    child: PageOneView(
                     ...
                  ),
                ],
              );

Du coup je comprends qu’avec le navigationdelegate, il faut créer une liste de page en fonction de conditions. Or ici ca serait plutôt une liste de widget… bref si quelqu’un a des idées je suis à l’écoute :smiley:

2

Coucou @Xababa_Dalabama,

Désolé d’avoir tardé à répondre, mais gros week-end…
J’ai déjà été confronté à ce problème avec un autre widget. Pour le faire fonctionner avec le Router, il faut l’ajouter au Router lui-même.
voilà ce que ça peut donner:

return Scaffold(
      body: Row(
        children: [
          NavigationRail(
      labelType: NavigationRailLabelType.selected,
      selectedIndex: 0,
      onDestinationSelected: (int index) {
        _currentIndex = index;
        displayScreen(_currentIndex);
      },
      destinations: const <NavigationRailDestination>[
        NavigationRailDestination(
          icon: Icon(Icons.home_outlined),
          selectedIcon: Icon(Icons.home),
          label: Text('Home'),
        ),
        NavigationRailDestination(
          icon: Icon(Icons.calendar_month_outlined),
          selectedIcon: Icon(Icons.calendar_month),
          label: Text('Calendar'),
        ),
        NavigationRailDestination(
          icon: Icon(Icons.email_outlined),
          selectedIcon: Icon(Icons.email),
          label: Text('Email'),
        ),
      ],
    ),
          Expanded(
            child: Navigator(
              pages: pagesList,
              onPopPage: (route, result) {
                if (route.didPop(result) == false) {
                  return false;
                }
                return onBackButtonTouched(result);
              },
            ),
          ),
        ],
      ),
    );
  }

En espérant avoir pu t’aider.
Bon code,

Benoit

1 « J'aime »
4

Merci @Behache : Je vais regarder. Je pagaie avec ce Navigator 2.0 :stuck_out_tongue:

5

Ton RouterDelegate retourne un Scaffold dont le body est un objet « Navigator ».
Il faut donc que tu englobes ce Navigator dans une Row(), et que tu lui passes le « NavigationRail » comme 1er « children » (sans oublier un Expanded autour du Navigator).
Tu récupères ainsi un index dès que tu changes d’item, ce qui te permet de créer une fonction displayScreen(int index) par exemple (je l’ai ajouté dans l’exemple de code), qui construit les viewmodels dont tu as besoin pour faire apparaître tes vues.
Si ce n’est pas clair, fais-moi signe :wave:

1 « J'aime »
6

Bonjour Xavier,

Je viens de regarder le replay du coaching de groupe et je vois que mes explications étaient loin d’être claires… Désolé.
Il y a quelques temps, j’avais proposé un template avec une BottomNavigationBar pour un problème similaire. Je te le place ici pour que tu puisses regarder. Un exemple concret sera certainement plus parlant et efficient en termes de compréhension. Tu n’as qu’a remplacer la BottomNavigationBar par un NavigationRail.

Template ici

J’espère que cela t’aidera.
Bonne continuation

7

Hello Benoit : merci pour ce partage ! Je vais regarder ton template. De toute façon je pense qu’il faudrait que j’encre un peu mieux ma compréhension du Navigator 2.0 standard avant de passer sur ce cas à priori un poil plus complexe :wink:
Merci pour ton aide en tout cas :smiley:

8

Hello Benoit

J’ai enfin mis en place un NavigationRail dans le navigator 2.0. Le template que tu as partagé ainsi que tes explications m’ont bien aidé !

Merci @Behache !

1 « J'aime »
9

Hello @Behache, j’espère que tu vas bien !

Il semblerait que les dernières version de Flutter ai mis un coup dans l’aile de la méthode qui marchait bien jusqu’à présent …

Capture d’écran 2024-08-16 à 16.12.43
Capture d’écran 2024-08-16 à 16.12.431258×116 52.7 KB

Quand je mets une NavigationBar dans le bottomnavigationbar du Scafold voilà ce que j’obtiens comme erreur. Dans le body je laisse le Navigator comme proposait.

En faisant quelques recherches je suis tombé sur cet article mais j’ai du mal à voir quelle est la démarche à suivre pour corriger ca :

« This is working as intended because you’re not including an Overlay widget in the tree and the close button of the snackbar (showCloseIcon: true) requires an Overlay to be present so it can show itself if necessary.
By default, MaterialApp introduces a Navigator, which includes an Overlay. However, MaterialApp.builder is a hook to wrap the Navigator (provided as child to MaterialApp.builder) with other widgets and therefore the context passed to MaterialApp.builder does not include an Overlay. If you want to use this context for anything that needs an Overlay (like showing a snackbar with a close button that has a tooltip) you’ll have to introduce the Overlay yourself (or use a context that is a descendant of the Navigator introduced by MaterialApp).
This didn’t crash in 3.19.5 because the tooltip for the close button of the snack bar was only introduced in #143934 as an accessibility fix. Not having the tooltip was a bug that made the snackbar less accessible. »

Pas exactement le même problème mais j’ai l’impression que ca s’en rapproche. As tu rencontré ce problème quand tu as fait une maj de ton app qui utilisais la méthode que tu proposais ?

10

Salut @Xababa_Dalabama,

En fait, je n’ai pas été confronté au problème. Comme j’avais beaucoup de signets, j’ai abandonné la NavigationBar et je suis passé à un drawer (qui s’ouvre sur le côté) pour gérer l’accès à mes écrans.
Mais dorénavant quand je suis confronté à ce genre de problème, je copie/colle le Warning dans ChatGPT, je lui demande une explication puis je lui demande s’il a une solution. Bien souvent, il tombe juste.

Bon courage.

11

Hello ! C’est bien ce que laissait entendre les différentes infos trouvées. Il faut ajouter manuellement un Overlay si on utilise le materialapp.builder.
Le navigator permet toujours de faire des choses un lus poussées et flexibles que la navigation classique (surtout dans ce.cas la), mais plus l’App grossi plus il devient copieux :joy::joy: