Comment pousser une page plein écran qui reste au-dessus de la BottomNavigationBar de Flutter ?

Question

J'ai cherché partout et je n'ai pas trouvé de réponse.

J'ai un BottomNavigationBar et un FloatingActionButton .

Ce que j'essaie de faire, c'est d'afficher une page plein écran lorsque l'utilisateur appuie sur la touche FloatingActionButton .

Cette page doit couvrir la zone de la BottomNavigationBar et les précédentes AppBar puisque dans cette nouvelle page, l'utilisateur n'est pas autorisé à accéder aux autres onglets de la page d'accueil. BottomNavigationBar .

Je suis tombé sur fullscreenDialog une propriété de PageRoute Widget et j'étais enthousiaste mais je n'ai pas réussi à le faire fonctionner exactement comme je le voulais (top<->bottom comme je l'expliquerai plus tard).

Cette page aura son propre Scaffold y AppBar et peut passer aux écrans suivants (à l'intérieur de sa propre arborescence de navigation)

Pour sortir de cette page, l'utilisateur doit appuyer sur un bouton "x" situé en bas au centre de la page.

Je veux pousser/pousser cette nouvelle page du haut<->bas au lieu du style de navigation habituel qui est gauche<->droite (Pour iOS/Cupertino)

Je connais ce type d'interface utilisateur pour les appareils iOS( ModalViewController )

Comment mettre en œuvre les commandes "push" et "pop" ?

Ou existe-t-il un autre moyen, meilleur/recommandé, de procéder ?

Answer 1

J'ai eu un problème similaire, et il a été résolu avec ceci :

await Navigator.of(context, rootNavigator:true).push( // ensures fullscreen
      CupertinoPageRoute(
            builder: (BuildContext context) {
              return MyWidget();
            }
      ) );

Trouvé à l'adresse suivante https://stackoverflow.com/a/54017488/247451

Answer 2

Vous devriez essayer MaterialPageRoute con fullscreenDialog étai (docs) :

Navigator.of(context).push(new MaterialPageRoute<Null>(
  builder: (BuildContext context) {
    return new AddEntryDialog();
  },
  fullscreenDialog: true
));

Ce n'est peut-être pas la meilleure solution dans votre cas, mais elle apparaîtra au-dessus de la barre inférieure et de tout autre widget de navigation.

Code repris de : https://marcinszalek.pl/flutter/flutter-fullscreendialog-tutorial-weighttracker-ii/