如何使用 ontap 实时调整动画容器的边框

Question

是否可以使用 ontap 实时去除动画容器上的边框？默认情况下不应显示边框，但是当单击时应显示边框。请参阅下面的代码：

 AnimatedContainer(
                              duration: Duration(milliseconds: 200),
                              width: isTextOpen ? 180 : 45, height: 30,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(3)),
                              border: Border.all(color: Colors.deepOrangeAccent),
                            ),
                            child: isTextOpen ?

                                TextField(

                                )
                                : GestureDetector(
                              onTap: (){
                                setState(() {
                                  isTextOpen=true;
                                });
                              },
                              child: Text(
                                "User_002",
                              ),
                            ),
                          ),

Answer 1

如果不满足某个条件，您可以将border设置为null，如果满足某个条件，则给它一个border。

我以您的代码为例添加了一个演示：

AnimatedContainer(
      duration: Duration(milliseconds: 200),
      width: isTextOpen ? 180 : 45,
      height: 30,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(3)),
        // give it border based on a condition
        border: isTextOpen ? Border.all(color: Colors.deepOrangeAccent, width: 3.0,) : null , // new line
      ),
      child: isTextOpen
          ? TextField()
          : GestureDetector(
              onTap: () {
                setState(() {
                  isTextOpen = true;
                });
              },
              child: Text(
                "User_002",
              ),
            ),
    );

如何使用 ontap 实时调整动画容器的边框

How to adjust borders for an animated container in real time with ontap

animation

flutter

flutter-animation