Flutter PageView como fazer animações mais rápidas ao deslizar

Dec 16 2020

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 animateToPagemétodo. Posso detectar quando uma página está prestes a mudar no PageView? Não estou interessado no onPageChangedretorno de chamada, pois é tarde para substituir a animação.

Respostas

6 JMooreLabs Dec 17 2020 at 04:55

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!