[ad_1]

Un package de transition de page flutter riche, pratique et facile à utiliser.

Pub
Version
Langue
Licence : MIT

LISEZMOI en chinois

Quelques démos







Commencer

Ajoutez ceci au fichier pubspec.yaml de votre package :

dependencies:
  flutter_page_transition: ^0.1.0

Vous pouvez également compter sur ce package stocké dans mon référentiel :

flutter_page_transition:
  git:
    url: git://github.com/handoing/flutter_page_transition.git

Vous devez alors courir flutter packages upgrade.

Type de transition

Type de transition de page Direction
slideInLeft ⬅️
slideInLeft ➡️
slideInUp ⬆️
slideInDown ⬇️
slideGauche ⬅️
slideRight ➡️
glisser vers le haut ⬆️
glisse vers le bas ⬇️
slideParallaxGauche ⬅️
slideParallaxRight ➡️
slideParallaxUp ⬆️
slideParallaxDown ⬇️
slideZoomGauche ⬅️
slideZoomRight ➡️
slideZoomUp ⬆️
glisserZoomBas ⬇️
ondulationRightUp ↖️
ondulationGaucheHaut ↗️
ondulationGaucheBas ↘️
ondulationDroiteBas ↙️
ondulationMoyen 🎆
transferRight ⬅️
transfert vers le haut ⬆️
fondu enchaîné
Douane

Exemple

Utiliser le widget PageRouteBuilder

initialRoute: 'Home',
onGenerateRoute: (RouteSettings routeSettings){
    return new PageRouteBuilder<dynamic>(
      settings: routeSettings,
      pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
        switch (routeSettings.name){
          case 'Home':
            return HomePage();
          case 'Other':
            return OtherPage();
          default:
            return null;
        }
      },
      transitionDuration: const Duration(milliseconds: 300),
      transitionsBuilder: (BuildContext context, Animation<double> animation,
          Animation<double> secondaryAnimation, Widget child) {
          return effectMap[PageTransitionType.slideInLeft](Curves.linear, animation, secondaryAnimation, child);
      }
    );
}

// use Navigator
Navigator.of(context).pushNamed('Other');
// or
Navigator.of(context).push(PageTransition(type: PageTransitionType.slideInLeft, child: FirstPage()));

Créez des méthodes personnalisées :

transitionEffect.createCustomEffect(
  handle: (Curve curve, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    return new SlideTransition(
      position: new Tween<Offset>(
        begin: const Offset(1.0, 0.0),
        end: const Offset(0.0, 0.0),
      ).animate(CurvedAnimation(parent: animation, curve: curve)),
      child: child,
    );
  }
);

// use custom
effectMap[PageTransitionType.custom](Curves.linear, animation, secondaryAnimation, child);

Test

exécuter un test

Pilote d’essai

exécuter le test du pilote

cd example/
flutter drive --target=test_driver/app.dart

Licence

AVEC

GitHub

Voir Github

[ad_2]

Leave a Reply

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Instagram

Ce message d’erreur n’est visible que pour les administrateurs de WordPress

Erreur. Aucun flux trouvé.

Veuillez aller sur la page de réglages d‘Instagram Feed pour connecter votre compte.