颤动的TextFormField背景颜色

在Flutter中，TextFormField是一个常见的表单输入控件，它允许用户输入文本并且验证其输入。当用户输入不符合规定时，可以通过设置错误提示信息来通知用户。

但是，当需要引起用户的注意时，可能希望将TextFormField的背景颜色变为颤动的效果。这种效果可以使用户很快地意识到他们的输入有问题，而不是仅仅依靠错误提示信息。

在Flutter中，可以通过使用AnimatedContainer来实现这种效果。AnimatedContainer可以在一定时间内平滑地改变其颜色和大小。

下面是实现颤动的TextFormField背景颜色的示例代码：

import 'package:flutter/material.dart';

class ShakingTextFormField extends StatefulWidget {
  final String label;
  final FormFieldValidator<String> validator;

  const ShakingTextFormField({
    Key? key,
    required this.label,
    required this.validator,
  }) : super(key: key);

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

class _ShakingTextFormFieldState extends State<ShakingTextFormField>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Color?> _animation;

  bool _hasError = false;

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

    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 500),
    );

    _animation = ColorTween(
      begin: Colors.white,
      end: Colors.red.withOpacity(0.3),
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeOut,
    ));
  }

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

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      decoration: InputDecoration(
        labelText: widget.label,
        fillColor: Colors.grey.withOpacity(0.2),
        filled: true,
        border: OutlineInputBorder(),
      ),
      validator: (value) {
        _hasError = !widget.validator(value);
        if (_hasError) {
          _controller.repeat(reverse: true);
        } else {
          _controller.stop();
        }

        return _hasError ? '' : null;
      },
      onTap: () {
        if (_hasError) {
          _controller.reset();
          _hasError = false;
        }
      },
      autofocus: false,
      autocorrect: false,
      textCapitalization: TextCapitalization.none,
      keyboardType: TextInputType.text,
      maxLength: 100,
      maxLines: 1,
      textAlign: TextAlign.start,
      style: TextStyle(
        color: Colors.black,
        fontSize: 16.0,
      ),
    );
  }
}

在这个示例代码中，ShakingTextFormField是一个自定义的表单输入控件，它继承自StatefulWidget，并且实现了SingleTickerProviderStateMixin，以支持动画控制器。

控件的主要逻辑在validator中实现。当输入的文本不符合规格时，控件的背景颜色就会变为颤动的红色。这种颜色的变换通过AnimationController和ColorTween来实现。

当用户点击输入框时，如果之前发生过红色颤动，就会重置动画控制器，并将_hasError标志设为false，从而使背景颜色恢复正常。

这种效果可以增强表单输入的用户体验，特别是在需要特别强调输入的重要性或者输入有误的情况下。