Bottom Tab Bar et router

Hello tout le monde,

Je compte m’attaquer à l’intégration de la bottom tab bar sur Flutter mais ca me pose un problème de périmètre avec le router.

Si j’ai bien compris, la redirection vers la bonne vue après le tap de l’utilisateur sur un icône est géré par la tap bar et je n’ai pas envie de gérer une navigation autre part que dans le router.

Est-ce que quelqu’un a déjà implémenté le router et la bottom tab bar sur un même projet ? Je serai preneur de quelques tuyaux :slight_smile:

Hello,
Utilises-tu les routes nommées ou bien la navigation 2.0 ?

Hello @Mathis,
La navigation 2.0 :slight_smile:

Hello,
Personnellement j’ai fait comme ceci dans le BottomNavBarWidget :

Widget _buildBottomNavBar(BuildContext context) {
    return BottomNavigationBar(
      backgroundColor: Colors.black,
      unselectedItemColor: Colors.white,

      onTap: (index) {
        switch (index) {
          case 0:
            viewModel.UserTouchedHome();
            break;
          case 2:
            viewModel.UserTouchedFavorites();
            break;
        }
      },
      type: BottomNavigationBarType.fixed,
      currentIndex: indexSelected,
      items: const <BottomNavigationBarItem>[
...
//ici  se trouve la liste de mes items (icons)

Pour la suite, pour ramener la gestion de la navigation à qui de droit, je declare viewModel.UserTouchedHome();
de cette manière

void UserTouchedHome() {
   _router.displayHome();
 }

pour l’implémentation de displayHome() , je le fais dans le navigationDelegate.
J’ai rapidement fais un petit diagramme, j’espère être pardonné pour les potentielles erreurs de syntaxe :smiley:

En espérant avoir pu t’aider,
Bonne journée,

Mathis

1 « J'aime »

J’aurais fait exactement comme @Mathis à sa place pour faire remonter les infos.

Cependant il faut aussi se poser la question ensuite de comment faire au niveau du routeur lui même.
Si la TabBar doit rester tout le temps visible et chacun des onglets doit avoir son propre historique alors tu devras probablement utiliser des routeurs enfants pour chacun des onglets

Dans la doc officielle du Router ils disent :

A particularly elaborate application might have multiple Router widgets, in a tree configuration, with the first handling the entire route parsing and making the result available for routers in the subtree. The routers in the subtree do not participate in route information parsing but merely take the result from the first router to build their sub routes.

Donc ton routeur principal gère la conversion des URL via ton parser habituel, puis tu utilises juste des Widget de type Router dans chaque onglet qui ne connaîtront que leurs écrans.
C’est comme ça que je comprends la doc mais je n’ai encore jamais essayé de le faire

1 « J'aime »

Whaou … Et moi qui croyait m’attaquer à quelque chose de simple :sweat_smile::sweat_smile::sweat_smile:
En tout cas merci pour les conseils à tous les deux. Je vais tenter de mettre ca en place :grinning: