web-dev-qa-db-fra.com

Flutter slideTransition n'anime pas

J'essaie donc de créer un élément de transition de diapositive trivial dans flutter et j'ai des difficultés. Ce que fait ci-dessous est d'attendre le temps d'animation, puis d'afficher simplement la Text("hello there sailor"). Je ne sais pas pourquoi ce n'est pas animé - cela semble très similaire à ce post précédent qui a un exemple trivial ( Faire glisser l'animation vers le bas dans le flottement ).

Voici comment j'appelle le code ci-dessous: DeleteCheck(offsetBool: widget.model.deleteNotify, widthSlide: 0.50*width100) où double width100 = MediaQuery.of(context).size.width;.

Quelqu'un voit-il ce que je fais mal?

class DeleteCheck extends StatefulWidget{

  final offsetBool;
  final double widthSlide;

  DeleteCheck({
    Key key, 
    this.offsetBool, 
    this.widthSlide
  }): super(key: key);

  @override 
  State<StatefulWidget> createState() {
    return new _MyDeleteCheck();
  }
}

class _MyDeleteCheck extends State<DeleteCheck> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _offsetFloat; 

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );

    _offsetFloat = Tween<Offset>(begin: Offset(widget.widthSlide, 0.0), end: Offset.zero)
        .animate(_controller);

    _offsetFloat.addListener((){
      setState((){});
    });

    _controller.forward();

  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    double height100 = MediaQuery.of(context).size.height;
    double width100 = MediaQuery.of(context).size.width;
    return new SlideTransition(
      position: _offsetFloat,
      child: Container(
        color: Colors.cyan,
        width: 0.525*width100-3.0,
        child: Text("hello there sailor")
      )
    );
  }
}
user-interfaceanimationmobileflutterslide
7
Peter Weyand

J'ai de bonnes nouvelles pour toi! Votre code fonctionne! :) L'animation semble ne pas se produire, car la distance sur laquelle elle se déplace est énorme . Offset , passé à SlideTransition , est relatif à sa taille enfant. Par exemple, votre enfant a width: 100.0 Et vous décalez avec Offset(2.0, 0.0), votre enfant aura déplacé 200.0 Pixels vers la droite.

Essayez simplement de changer begin: Offset(widget.widthSlide, 0.0), end: Offset.zero en begin: Offset(2.0, 0.0), end: Offset.zero. Vous verrez le texte s'animer lentement de la droite vers le centre de l'écran. Il vous suffit donc d'ajuster votre paramétrage.

SlideTransition changed

Quoi qu'il en soit, voici quelques suggestions supplémentaires pour optimiser votre code:

  • Si vous utilisez AnimatedWidgets comme le SlideTransition , vous n'avez pas besoin d'appeler addListener avec setState sur le contrôleur. Le AnimatedWidget s'en charge tout seul. Par conséquent, vous pouvez supprimer les lignes suivantes:

lignes:

_offsetFloat.addListener((){
  setState((){});
});
  • De plus, il n'est pas nécessaire d'appeler les constructeurs const. Vous pouvez simplement laisser ce mot-clé comme new. Le compilateur optimisera et choisira le bon constructeur dans chaque cas.
12
Niklas