Flutter PageVer cómo hacer animaciones más rápidas al deslizar

Dec 16 2020

Tengo un PageView simple:

PageView(
  controller: _pageController,
  physics: PlatformScrollPhysics.getPlatformScrollPhysics(),
  children: [
    Text("I am Text1"),
    Text("I am Text"),
  ],
  onPageChanged: (index) {
    print("page changed $index");
  },
);

Lo que me gustaría hacer es hacer que la animación de cambio de página sea más rápida después de que el usuario deslice el dedo. Esto sucede cuando un usuario desliza y levanta el dedo, PageView pasa a la página siguiente. Actualmente, este ajuste toma mucho tiempo y proporciona una mala experiencia de usuario. Sin embargo, no hay ninguna opción para establecer la velocidad y duración de la animación de ajuste.

Intenté agregar un oyente:

_pageController.addListener(() {
      _pageController.position // this variable holds lots of information but yet I couldnt find what i looked for
      print("LISTENERRR ${_pageController.position}");
    }); 

Lamentablemente, no pude encontrar nada que me pueda ayudar. Traté de adelantar el deslizamiento y hacer un deslizamiento personalizado llamando

  _pageController.animateToPage(0, .. PARAMS);

para que esto funcione, necesito detectar cuándo una página está a punto de cambiar, de modo que pueda sobrescribir la animación con el animateToPagemétodo. ¿Puedo detectar cuando una página está a punto de cambiar en PageView? No estoy interesado en la onPageChangeddevolución de llamada, ya que es tarde para sobrescribir la animación.

Respuestas

6 JMooreLabs Dec 17 2020 at 04:55

La respuesta del tipo de CS va por buen camino. También crédito para pskink . La velocidad de transición del widget PageView no se basa en una curva de animación, aunque el enfoque programático sí lo es.

PageView en realidad usa una simulación de primavera para manejar las transiciones de página cuando se usa con deslizamiento , por lo que la propiedad "física" debe anularse para cambiar la "velocidad de animación".

Aquí hay una forma sencilla de aumentar la "velocidad de animación" mediante el uso de la clase personalizada Scroll Physics.

import 'package:flutter/cupertino.dart';
import 'package:flutter/physics.dart';

class CustomPageViewScrollPhysics extends ScrollPhysics {
  const CustomPageViewScrollPhysics({ScrollPhysics parent})
      : super(parent: parent);

  @override
  CustomPageViewScrollPhysics applyTo(ScrollPhysics ancestor) {
    return CustomPageViewScrollPhysics(parent: buildParent(ancestor));
  }

  @override
  SpringDescription get spring => const SpringDescription(
        mass: 80,
        stiffness: 100,
        damping: 1,
      );
}

Se puede usar en el constructor de PageView de esta manera:

PageView(... physics: const CustomPageViewScrollPhysics(),)

¡Y siéntete libre de ajustar cualquiera de los parámetros del resorte!