it-swarm.com.de

So ändern Sie die Navigationsanimation mit Flutter

Ich habe "Erste Schritte" abgeschlossen, Abschnitt 4: Schreiben Sie Ihre erste App aus flutter.io und endete mit einem Listen-App mit zwei Ansichten. Alles funktioniert gut. Bei der Rückkehr zur Startansicht reißt nur die Animation. Die neue Ansicht wird von der Hauptansicht nach unten verschoben. Wie kann man dieses Gleiten horizontal ändern?

11
nlern

Dies erreichen Sie mit CupertinoPageRoute . Bitte überprüfen Sie den Code unten.

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'),
      ),
    );
  }
}

Einige Animationen mit 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

Sie können Unterklassen MaterialPageRoute und buildTransitions überschreiben.

Z.B:

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);
  }
}

benutzen :

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

Ersetzen Sie den Überblendungsübergang durch Ihre Animation

8
Shyju M

Sie können PageRouteBuilder verwenden.

Das folgende Beispiel zeigt FadeTransition, wenn Sie zu einem zweiten Bildschirm navigieren.

Navigator.Push(
  context,
  PageRouteBuilder(
    pageBuilder: (c, a1, a2) => Page2(),
    transitionsBuilder: (c, anim, a2, child) => FadeTransition(opacity: anim, child: child),
    transitionDuration: Duration(milliseconds: 2000),
  ),
);
4
CopsOnRoad

Ich habe meine eigene builders mit einer benutzerdefinierten Karte in pageTransitionsTheme für das App-Level-Theme bereitgestellt.

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(),}),
      ),
    );
  }
}

Natürlich habe ich keinen Karteneintrag für ios hinzugefügt, da ich nur Android für TargetPlatform verwende. 

1
Dev T J