Flutter – Animación en Transición de Ruta

Las rutas son simplemente páginas en las aplicaciones de Flutter. Una aplicación a menudo necesita moverse de una página a otra. Pero para que estas transiciones sean más suaves, se pueden usar animaciones. Estas animaciones se pueden usar para curvar o interpolar el objeto Animation de la clase PageRouteBuilder para modificar la animación de transición. Los discutiremos en detalle aquí.

Simplemente construyamos una aplicación simple para comprender mejor el concepto. Siga los siguientes pasos para hacerlo:

• Agregue el PageRouteBuilder.
• Agrega una interpolación.
• Crear un widget animado
• Crear una CurvaEntre.
• Combinar ambos preadolescentes

Analicemos cada paso en detalle:

Agregando el PageRouteBuilder:

Al usar PageRouteBuild, cree dos rutas con la primera ruta como la «Página de inicio» con un botón «Ir a la página 2» y la segunda ruta con solo una página vacía llamada «Página 2», usando el siguiente código:

import 'package:flutter/material.dart';
 
main() {
  runApp(const MaterialApp(
    home: Page1(),
  ));
}
 
class Page1 extends StatelessWidget {
  const Page1({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
          child: ElevatedButton(
        onPressed: () {
          Navigator.of(context).push(_createRoute());
        },
        child: const Text('Go to Page 2'),
      )
 
          // RaisedButton is deprecated
          // We should use ElevatedButton instead
 
          // child: RaisedButton(
          // child: const Text('Go to Page 2'),
          // onPressed: () {
          //     Navigator.of(context).push(_createRoute());
          // },
          // ),
          ),
    );
  }
}
 
Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return child;
    },
  );
}
 
class Page2 extends StatelessWidget {
  const Page2({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: const Center(
        child: Text('Page 2'),
      ),
    );
  }
}

Adición de una interpolación:

Puede crear una interpolación de un objeto de animación utilizando el siguiente código:

transitionsBuilder: (context, animation, secondaryAnimation, child) {
  var begin = Offset(0.0, 1.0);
  var end = Offset.zero;
  var tween = Tween(begin: begin, end: end);
  var offsetAnimation = animation.drive(tween);
  return child;
},

Creación de un Widget animado:

El AnimatedWidget tiene la propiedad de su estado una vez que cambia el valor de la animación. Puedes crear uno como el siguiente:

transitionsBuilder: (context, animation, secondaryAnimation, child) {
  var begin = Offset(0.0, 1.0);
  var end = Offset.zero;
  var tween = Tween(begin: begin, end: end);
  var offsetAnimation = animation.drive(tween);
 
  return SlideTransition(
    position: offsetAnimation,
    child: child,
  );
},

Creando un CurveTween:

Use el siguiente código para crear un CurveTween:

var curve = Curves.ease;
 
var curveTween = CurveTween(curve: curve);

Combinando ambos Tweens:

Utilice el método chain() para combinar dos interpolaciones como se muestra a continuación:

var begin = Offset(0.0, 1.0);
var end = Offset.zero;
var curve = Curves.ease;
 
var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

Ahora use el método animation.drive() para crear un objeto de animación de las interpolaciones combinadas como se muestra a continuación:

return SlideTransition(
  position: animation.drive(tween),
  child: child,
);

Código fuente completo:

import 'package:flutter/material.dart';
 
main() {
  runApp(const MaterialApp(
    home: Homepage(),
  ));
}
 
class Homepage extends StatelessWidget {
  const Homepage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GeeksForGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
          child: ElevatedButton(
        onPressed: () {
          Navigator.of(context).push(_createRoute());
        },
        child: const Text('Go to Page 2'),
      )
 
          // RaisedButton is deprecated
          // We should use ElevatedButton instead
 
          // child: RaisedButton(
          // child: const Text('Go to Page 2'),
          // onPressed: () {
          //     Navigator.of(context).push(_createRoute());
          // },
          // ),
 
          ),
    );
  }
}
 
Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = const Offset(0.0, 1.0);
      var end = Offset.zero;
      var curve = Curves.ease;
 
      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
 
      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );
}
 
class Page2 extends StatelessWidget {
  const Page2({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: const Center(
        child: Text('Page 2'),
      ),
    );
  }
}

Producción: