animation - 如何在无效输入上摇动Flutter中的小部件？(How to shake a widget in Flutter on invalid input?)

Question

On my signup form, I have a checkbox which needs to shake a bit whenever the user tries to login before accepting the terms and conditions.

(在我的注册表单上，我有一个复选框，当用户在尝试接受条款和条件之前尝试登录时，该复选框需要稍微动一下。)

How can I achieve something like this Flutter?

(我怎样才能获得类似Flutter的效果？)

  ask by Mystic monk translate from so

Answer 1

Here is some code from my app.

(这是我的应用程序中的一些代码。)

It shakes a red x on the screen.

(它在屏幕上摇动红色x。)

redx.png.

(redx.png。)

I'm sure you could adopt it to your use case.

(我相信您可以在用例中采用它。)

I'm using AnimatedBuilder.

(我正在使用AnimatedBuilder。)

Code in action: https://giphy.com/gifs/Yo2u06oMu1ksPYRD3B

(实际执行中的代码： https ： //giphy.com/gifs/Yo2u06oMu1ksPYRD3B)

import 'package:flutter/material.dart';
class ShakeX extends StatefulWidget {
  const ShakeX({
    Key key,
  }) : super(key: key);

  @override
  _ShakeXState createState() => _ShakeXState();
}

class _ShakeXState extends State<ShakeX> with SingleTickerProviderStateMixin{
  AnimationController controller;


  @override
  void initState() {
    controller = AnimationController(duration: const Duration(milliseconds: 500), vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
        final Animation<double> offsetAnimation =
    Tween(begin: 0.0, end: 24.0).chain(CurveTween(curve: Curves.elasticIn)).animate(controller)
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          controller.reverse();
        }
      });
    controller.forward(from: 0.0);
    return AnimatedBuilder(animation: offsetAnimation, 
    builder: (context, child){
                  if (offsetAnimation.value < 0.0) print('${offsetAnimation.value + 8.0}');
                  return Container(
                    margin: EdgeInsets.symmetric(horizontal: 24.0),
                    padding: EdgeInsets.only(left: offsetAnimation.value + 30.0, right: 30.0 - offsetAnimation.value),
               child: Image.asset("assets/redx.png"),
                  );
    },);
  }
}