颤动文本字段底部边框颜色 - Dart

在Dart程序中，我们可以使用Flutter框架来构建用户界面，其中文本字段是一个常见的用户输入组件。为了增强用户体验，在文本字段中添加颤动效果是一种常见的做法。同时，我们也可以通过更改文本字段底部边框的颜色来使其更加美观。本文将介绍如何在Dart程序中实现颤动文本字段底部边框颜色的效果。

实现方法

我们可以通过flutter包中提供的TextEditingController类来监听文本字段的输入事件，并且通过AnimatedContainer组件来实现文本字段底部边框的颤动效果。具体实现方法如下：

import 'package:flutter/material.dart';

class ShakingTextField extends StatefulWidget {
  final String label;

  ShakingTextField({this.label});

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

class _ShakingTextFieldState extends State<ShakingTextField>
    with SingleTickerProviderStateMixin {
  TextEditingController _textEditingController = TextEditingController();
  Animation<double> _animation;
  AnimationController _animationController;

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

    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    _animation = Tween(begin: -5.0, end: 5.0).animate(_animationController)
      ..addListener(() {
        setState(() {});
      });
  }

  @override
  void dispose() {
    _animationController.dispose();
    _textEditingController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(widget.label,
              style: TextStyle(
                color: Colors.grey[600],
              )),
          SizedBox(height: 10.0),
          AnimatedContainer(
            duration: Duration(milliseconds: 500),
            curve: Curves.easeInOut,
            margin: EdgeInsets.fromLTRB(0.0, 8.0, 0.0, 8.0),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10.0),
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.grey[300],
                  blurRadius: 5.0,
                )
              ],
            ),
            padding: EdgeInsets.symmetric(horizontal: 20.0),
            child: TextField(
              controller: _textEditingController,
              decoration: InputDecoration(
                border: InputBorder.none,
                hintStyle: TextStyle(color: Colors.grey[400]),
                hintText: '请输入内容',
              ),
              onChanged: (value) {
                if (value.isEmpty) {
                  _animationController.forward();
                } else {
                  _animationController.reverse();
                }
              },
            ),
          ),
          Container(
            height: 2.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(100.0),
              color: _animationController.isAnimating
                  ? Colors.red
                  : Colors.grey[700],
            ),
          ),
        ],
      ),
    );
  }
}

我们定义了一个名为ShakingTextField的StatefulWidget，该组件接受一个字符串类型的label参数作为文本字段的标签。在组件的状态类_ShakingTextFieldState中，我们创建了一个TextEditingController并且使用SingleTickerProviderStateMixin来支持AnimationController的运行。在组件的构建方法中，我们使用AnimatedContainer来实现文本字段底部边框的颤动效果，并且使用Tween类和AnimationController来控制动画的状态。当文本字段的输入值为空时，我们使用_animationController.forward()方法来启动动画的状态；当文本字段的输入值不为空时，我们使用_animationController.reverse()方法来恢复动画的状态。最后，我们将文本字段底部的边框颜色由灰色改为红色以增加视觉效果。

用例演示

最后，我们可以通过在main.dart文件中引入ShakingTextField组件并在build方法中进行调用来实现我们的文本字段颤动效果。代码片段如下：

import 'package:flutter/material.dart';
import 'shaking_textfield.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shaking Text Field Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Shaking Text Field Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ShakingTextField(label: '用户名'),
              ShakingTextField(label: '密码'),
            ],
          ),
        ),
      ),
    );
  }
}

运行程序后，我们可以看到两个文本字段有一个很棒的颤动效果，如下图所示：

结论

通过TextEditingController类和AnimatedContainer组件，我们可以在Dart程序中实现颤动文本字段底部边框颜色的效果。这种效果能够增强用户的交互体验，并且增加了程序的视觉效果。