Navigation 2.0 et Animation de Transition

Flutter
1

Bonjour tout le monde !
J’ai suivi le cours de @mbritto sur la partie Architecture et navigation.

Je galère à trouver un moyen d’animer les transitions de pages gérées par le navigator 2.0…

En gros je voudrais que plutôt que mon routeur affiche instantanément la page suivante, il slide de la page précédente vers la page à afficher par exemple.

Quelqu’un saurait-il comment s’y prendre s.v.p ?

Merci !

2

Salut!

Ma recommandation est d’utiliser des MaterialPage pour créer les pages de ton navigator.
Ces MaterialPage proposent des transitions classiques pour les 2 plateformes comme expliqué dans la doc :

For Android, the entrance transition for the page zooms in and fades in while the exiting page zooms out and fades out. The exit transition is similar, but in reverse.

For iOS, the page slides in from the right and exits in reverse. The page also shifts to the left in parallax when another page enters to cover it. (These directions are flipped in environments with a right-to-left reading direction.)

Si tu veux vraiment personnaliser les transitions, alors c’est plus complexe et tu devras probablement créer du code d’animation toi même.
Je ne l’ai jamais fait mais en regardant la doc voici dans quelle direction je partirais si je voulais le faire :

  1. Créer ma propre classe SuperCoolTransitionPage qui hérite de Page ou de MaterialPage
  2. Redéfinir la méthode createRoute
  3. Utiliser un PageRouteBuilder pour créer la route avec l’animation de mon choix
  4. Utiliser SuperCoolTransitionPage à la place de MaterialPage dans mon RouterDelegate pour chaque écran qui doit utiliser cette transition

Happy coding!

1 « J'aime »
3

Merci beaucoup ça fonctionne !

Si je comprends bien, le terme « Route » du vocabulaire Flutter signifie en fait Ecran ?

1 « J'aime »
4

Content que ça ait fonctionné!

A mon avis ce serait plutôt le terme Page qui correspond à un écran et le terme Route correspond à une association destination+écran

5

Bonsoir,

Désolé de relancer la conversation mais j’essaye justement de changer les transitions basiques du routeur pour en faire des personnalisées. J’ai fais justement ce qui est dit par Maxime

class FadeTransitionPage extends MaterialPage {
  final Widget child;

  const FadeTransitionPage({required LocalKey key, required this.child})
      : super(key: key, child: child);

  @override
  Route createRoute(BuildContext context) {
    return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) => child,
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        return FadeTransition(
          opacity: animation.drive(Tween<double>(begin: 0.0, end: 1.0)),
          child: child,
        );
      },
    );
  }
}

et je l’appel de cette façon dans le navigator

if (_isOnSetting) {
        const settingPageScreen = SettingScreen();
        pagesList.add(const FadeTransitionPage(
            key: ValueKey('settingPageScreen'), child: settingPageScreen));
}

Mais j’obtiens une erreur lorsque j’ouvre la page :

‹ package:flutter/src/widgets/navigator.dart ›: Failed assertion: line 2910 pos 17: ‹ !pageBased || route.settings is Page ›: is not true.

et peu importe si j’hérite de Page, cela me fait la même erreur, il ne reconnait donc pas ma classe comme une Page si j’ai bien compris

Si tu pouvais me dire comment tu as réussi @bobinthestreet ça serai super sympa, sinon bah je me débrouillerai

Merci beaucoup à ceux qui m’aideront