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

Answer 2

Here an example on how you can do it, do the same thing but using AnimatedContainer and the duration property will help you to set an specific duration to the animation:

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,
            )

          ],
        ),

    );
  }

}