Flutter PageView como fazer animações mais rápidas ao deslizar
Tenho um PageView simples:
PageView(
controller: _pageController,
physics: PlatformScrollPhysics.getPlatformScrollPhysics(),
children: [
Text("I am Text1"),
Text("I am Text"),
],
onPageChanged: (index) {
print("page changed $index");
},
);
O que eu gostaria de fazer é tornar mais rápida a animação de mudança de página depois que o usuário deslizar rapidamente. Isso acontece quando um usuário desliza e levanta o dedo, o PageView avança para a próxima página. Atualmente, esse ajuste leva muito tempo e fornece uma experiência de usuário ruim. No entanto, não há opção para definir a velocidade e duração da animação de encaixe.
Tentei adicionar um ouvinte:
_pageController.addListener(() {
_pageController.position // this variable holds lots of information but yet I couldnt find what i looked for
print("LISTENERRR ${_pageController.position}");
});
Infelizmente, não consegui encontrar nada que pudesse me ajudar. Tentei ultrapassar o deslizar e fazer um deslizamento personalizado chamando
_pageController.animateToPage(0, .. PARAMS);
para que isso funcione, preciso detectar quando uma página está prestes a mudar, para que eu possa substituir a animação com o animateToPage
método. Posso detectar quando uma página está prestes a mudar no PageView? Não estou interessado no onPageChanged
retorno de chamada, pois é tarde para substituir a animação.
Respostas
A resposta do cara do cs está no caminho certo. Crédito também para pskink . A velocidade de transição do widget PageView não é baseada em uma curva de animação, embora a abordagem programática seja.
Na verdade, o PageView usa uma simulação de Spring para lidar com as transições de página quando usado com deslizamento , portanto, a propriedade "física" deve ser substituída para alterar a "velocidade da animação".
Esta é uma maneira simples de aumentar a "velocidade da animação" usando a classe de física de rolagem personalizada.
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,
);
}
Ele pode ser usado no construtor PageView assim:
PageView(... physics: const CustomPageViewScrollPhysics(),)
E fique à vontade para ajustar qualquer um dos parâmetros da mola!