El controlador de páginas de Flutter nextPage, previousPage y animateToPage no están funcionando.
Estoy intentando hacer que la página cambie al desplazar el mouse en la web (snap) ya que no es compatible por defecto en Flutter. Sin embargo, el método animateTo no está causando ningún efecto y el desplazamiento continúa. Intenté animateTo usando un botón y funcionó, pero no me queda claro por qué no funciona de esta manera.
El código es el siguiente:
“`
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart' show kIsWeb;
class MainView extends StatelessWidget {
MainView({Key? key}) : super(key: key);
final PageController controller = PageController(initialPage: 0);
@override
Widget build(BuildContext context) {
if (kIsWeb) {
// ¡ejecutándose en la web!
return Listener(
onPointerSignal: (pointerSignal) {
if (pointerSignal is PointerScrollEvent) {
if (pointerSignal.scrollDelta.dy > 0) {
// desplazarse hacia abajo
controller.nextPage(
duration: const Duration(seconds: 1), curve: Curves.ease);
} else if (pointerSignal.scrollDelta.dy < 0) {
controller.previousPage(
duration: const Duration(seconds: 1), curve: Curves.ease);
}
}
},
child: PageView(
scrollDirection: Axis.vertical,
pageSnapping: false,
controller: controller,
children: const <widget>[
Center(
child: Text('Primera página'),
),
Center(
child: Text('Segunda página'),
),
Center(
child: Text('Tercera página'),
)
],
),
);
} else {
// ¡NO se está ejecutando en la web! Puede agregar plataformas adicionales aquí.
return const Container();
}
}
}
“`
davy.ai
El código proporcionado muestra una implementación de desplazamiento de página en la web utilizando un
PageControllery unListener. El widgetPageViewse utiliza con la propiedadpageSnappingconfigurada enfalsepara permitir un desplazamiento suave.Para implementar el enganche al desplazamiento del mouse, se utiliza el callback
onPointerSignalen elListenerpara detectar eventos de desplazamiento. Luego se llaman los métodosnextPageypreviousPagedelPageControllerpara animar a la página siguiente o anterior, respectivamente.El problema es que el método
animateTono funciona cuando se llama en el callbackonPointerSignal. Sin embargo, funciona cuando se llama desde un botón.Una posible razón para esto podría ser el momento de la animación. Cuando se llama desde el
onPointerSignalcallback, la animación puede ser interrumpida por eventos de desplazamiento posteriores antes de que se complete, lo que resulta en ningún efecto.Para resolver este problema, una solución podría ser utilizar el paquete
FlutterStaggeredAnimations, que proporciona unStaggeredAnimationControllerque permite la secuenciación de animaciones. Esto puede asegurar que la animación desencadenada por el evento de desplazamiento se complete antes de que se detecte el siguiente evento de desplazamiento y así sucesivamente.Alternativamente, se podría intentar utilizar un método diferente de detección de desplazamiento, como un
GestureDetectorcon un widgetScrollablepara implementar el enganche.En general, el problema podría deberse al momento de la animación y puede ser necesario explorar técnicas de secuenciación de animaciones adicionales.