Flutter – Rotar Transición

En Flutter, el paquete page_transition se usa para crear hermosas transiciones de página. Proporciona una amplia gama de efectos que se pueden utilizar para pasar de una ruta a otra. Es muy conveniente de usar. En este artículo, exploraremos lo mismo mediante la creación de una aplicación simple.

Para crear una aplicación simple que muestre el uso del paquete page_transition para una transición Rotate, siga los pasos a continuación:

• Agregue page_transition a las dependencias en el archivo pubspec.yaml
• Importe la misma dependencia en el archivo main.dart
• Usa un StatelessWidget para darle una estructura a la aplicación
• Diseña la página de inicio
• Defina la propiedad onGenerateRoute en el widget MaterialApp para realizar la transición desde la página de inicio

Ahora, veamos los pasos en detalle:

Agregar la dependencia:

Puede agregar la dependencia page_transition al archivo pubspec.yaml de la siguiente manera:

Importación de la dependencia:

Para importar la dependencia a su archivo main.dart, use lo siguiente:

import 'package:page_transition/page_transition.dart';

Diseño de la estructura de la aplicación:

El StatelessWidget se puede usar para dar una estructura simple a la aplicación que contiene una barra de aplicaciones y un cuerpo para el contenido, como se muestra a continuación:

class MyApp extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'GeeksForGeeks',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
}

Diseño de la página de inicio:

También se puede usar un StatelessWidget para diseñar la página de inicio de la aplicación. También se agregará un botón a la página de inicio que tendrá una acción de transición adjunta cuando se presione, como se muestra a continuación:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.greenAccent,
      appBar: AppBar(
        title: Text('GeeksForGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('Rotate Transition Button'),
              onPressed: () {
                Navigator.push(
                  context,
                  PageTransition(
                    curve: Curves.bounceOut,
                    type: PageTransitionType.rotate,
                    alignment: Alignment.topCenter,
                    child: SecondPage(),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

Definición de la propiedad OnRouteSetting:

La propiedad onRouteSettings se usa para extraer información de una página y enviarla a otra página (o ruta). Asignaremos la misma propiedad a la acción del botón que agregamos en la página de inicio que hará la transición a la segunda página como se muestra a continuación:

onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/second':
            return PageTransition(
              child: SecondPage(
              ),
              type: PageTransitionType.fade,
              settings: settings,
            );

Código fuente completo:

import 'package:flutter/material.dart';
import 'package:page_transition/page_transition.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  // root of application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'GeeksForGeeks',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/second':
            return PageTransition(
              child: SecondPage(
              ),
              type: PageTransitionType.fade,
              settings: settings,
            );
            break;
          default:
            return null;
        }
      },
    );
  }
}
 
/// Homepage
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.greenAccent,
      appBar: AppBar(
        title: Text('GeeksForGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('Rotate Transition Button'),
              onPressed: () {
                Navigator.push(
                  context,
                  PageTransition(
                    curve: Curves.bounceOut,
                    type: PageTransitionType.rotate,
                    alignment: Alignment.topCenter,
                    child: SecondPage(),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}
 
//definition of second page
class SecondPage extends StatelessWidget {
 
  final String title;
 
  /// constructor of the page
  const SecondPage({Key key, this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context).settings.arguments;
    return Scaffold(
      appBar: AppBar(
        title: Text(args ?? "Page Transition Plugin"),
      ),
      body: Center(
        child: Text('Second Page'),
      ),
    );
  }
}

Producción: