Flutter 邊界過渡

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

而不是Container使用AnimatedContainer 。 然后您可以更改容器內的任何屬性，它會自動為更改設置動畫。 您甚至可以設置相同的duration

Answer 2

這里有一個關於如何做的例子，做同樣的事情，但使用 AnimatedContainer 和持續時間屬性將幫助您將特定持續時間設置為 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,
            )

          ],
        ),

    );
  }

}