web-dev-qa-db-fra.com

Comment changer d'animation de navigation à l'aide de Flutter

J'ai terminé la section "Démarrer" de la section 4: Rédigez votre première application à partir de flutter.io et à la dernière étape, vous avez terminé avec une application de liste avec deux vues. Tout fonctionne bien. Seule l’animation lors du retour à la vue d’accueil se déchire. La nouvelle vue glisse vers le bas depuis la vue principale. Comment changer ce glissement pour qu'il soit horizontal?

androidanimationnavigationflutterflutter-animation
11
nlern

Vous pouvez y parvenir en utilisant CupertinoPageRoute ..__ Veuillez vérifier le code ci-dessous.

import 'package:flutter/material.Dart';
import 'package:flutter/cupertino.Dart';


void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Transition Animation Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new FirstPage(),
    );
  }
}

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => new _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('First Page'),
      ),
      body: new Center(
        child: new RaisedButton(
          child: new Text('Goto Second Page'),
          onPressed: () {
            Navigator.of(context).Push(new SecondPageRoute());
          },
        ),
      ),
    );
  }
}

class SecondPageRoute extends CupertinoPageRoute {
  SecondPageRoute()
      : super(builder: (BuildContext context) => new SecondPage());


  // OPTIONAL IF YOU WISH TO HAVE SOME EXTRA ANIMATION WHILE ROUTING
  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return new FadeTransition(opacity: animation, child: new SecondPage());
  }
}

class SecondPage extends StatefulWidget {
  @override
  _SecondPageState createState() => new _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Second Page'),
      ),
      body: new Center(
        child: new Text('This is the second page'),
      ),
    );
  }
}

Quelques jeux avec animation

  // OPTIONAL IF YOU WISH TO HAVE SOME EXTRA ANIMATION WHILE ROUTING
  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return new RotationTransition(
        turns: animation,
        child: new ScaleTransition(
          scale: animation,
          child: new FadeTransition(
            opacity: animation,
            child: new SecondPage(),
          ),
        ));
  }
13
Arnold Parge

Vous pouvez sous-classer MaterialPageRoute et remplacer buildTransitions.

Par exemple:

class MyCustomRoute<T> extends MaterialPageRoute<T> {
  MyCustomRoute({ WidgetBuilder builder, RouteSettings settings })
      : super(builder: builder, settings: settings);

  @override
  Widget buildTransitions(BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      Widget child) {
    if (settings.isInitialRoute)
      return child;
    // Fades between routes. (If you don't want any animation,
    // just return child.)
    return new FadeTransition(opacity: animation, child: child);
  }
}

utiliser :

new RaisedButton(
                child: new Text('Goto'),
                onPressed: (){
                  Navigator.Push(
                    context,
                    new MyCustomRoute(builder: (context) => new SecondPage()),
                  );
                }),

Remplacer la transition en fondu par votre animation

8
Shyju M

Je l'ai fait en fournissant ma propre builders avec une carte personnalisée dans pageTransitionsTheme pour le thème au niveau de l'application.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Startup Name Generator Tile',
      home: RandomWords(),
      theme: new ThemeData(
        primaryColor: Colors.white,
        // Add the line below to get horizontal sliding transitions for routes.
        pageTransitionsTheme: PageTransitionsTheme(builders: {TargetPlatform.Android: CupertinoPageTransitionsBuilder(),}),
      ),
    );
  }
}

Bien sûr, je n’ai pas ajouté d’entrée de carte pour iOS, j’utilise uniquement Android pour TargetPlatform. 

1
Dev T J