Flutter transition on border

Question

I have a TextField and when i focus to input border is changing directly. But i want make it smoother. How can i make it ?

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

and my borders :

 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

Instead of Container use an AnimatedContainer. You can then change any property inside the container, it will automatically animate the change. You can even set a duration for the same