Navigator 2.0 et NavigationRail

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:

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 »

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

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 »

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

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:

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 »