边界上的颤动过渡

Question

我有一个 TextField，当我专注于输入时，边框会直接改变。但我想让它更顺畅。我怎样才能做到？

Container(decoration: isFocused ? focusedBorder : blurBorder) //isFocused triggers when i focus to input.

和我的边界 :

 final focusedBorder = BoxDecoration(
      borderRadius: BorderRadius.circular(8),
      gradient: LinearGradient(
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
          colors: [
            Color.fromARGB(255, 141, 56, 211),
            Color.fromARGB(255, 156, 90, 209),
            Color.fromARGB(255, 93, 53, 213),
          ],
          stops: [
            0.0,
            0.5,
            0.7
          ]));
  final blurBorder = BoxDecoration(
      borderRadius: BorderRadius.circular(8),
      border:
          Border.all(width: 1.5, color: Color.fromARGB(255, 238, 241, 246)));

Answer 1

使用 AnimatedContainer 而不是 Container。然后您可以更改容器内的任何属性，它会自动为更改设置动画。您甚至可以为相同的

设置一个 duration

Answer 2

这里有一个关于如何做到这一点的例子，做同样的事情，但使用 AnimatedContainer 和持续时间属性将帮助您为动画设置特定的持续时间：

class _MyHomePageState extends State<MyHomePage> {

  final blurBorder = BoxDecoration(
      borderRadius: BorderRadius.circular(8),
      border:
      Border.all(width: 1.5, color: const Color.fromARGB(255, 238, 241, 246)));

  final focusedBorder = BoxDecoration(
      borderRadius: BorderRadius.circular(8),
      gradient: const LinearGradient(
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
          colors: [
            Color.fromARGB(255, 141, 56, 211),
            Color.fromARGB(255, 156, 90, 209),
            Color.fromARGB(255, 93, 53, 213),
          ],
          stops: [
            0.0,
            0.5,
            0.7
          ]));

  bool isFocused = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
          children: [

            TextButton(onPressed: () {

              setState(() {
                isFocused = !isFocused;
              });

            }, child: const Text('Action', style: TextStyle( color: Colors.black ),)),

            AnimatedContainer(
                width: 100,
                height: 100,
                duration: const Duration( milliseconds: 900 ),
                decoration: isFocused ? focusedBorder : blurBorder,
            )

          ],
        ),

    );
  }

}

边界上的颤动过渡

Flutter transition on border

flutter

dart

flutter-layout

flutter-animation