Flutter: Animated Border Example

main.dart

import 'dart:async';
import 'package:flutter/material.dart';

void main() => runApp(Test());

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Test Animation')),
        body: Center(child: Stack(children: [
          Container(width: 50, height: 50, color: Colors.white),
          const Positioned(
            top: 0, right: 0, bottom: 0, left: 0,
            child: IgnorePointer( child: AnimatedBorderComponent()),
          )
        ]))
      )
    );
  }
}

class AnimatedBorderComponent extends StatefulWidget {
  const AnimatedBorderComponent({ super.key });

  @override
  State<AnimatedBorderComponent> createState() { return _AnimatedBorderComponentState(); }
}

class _AnimatedBorderComponentState extends State<AnimatedBorderComponent> { 
  int index = 0;
  List<Color> colors = [Colors.red, Colors.orange, Colors.yellow, Colors.green, Colors.blue, Colors.purple];
  Duration duration = const Duration(milliseconds: 250);
  Timer? _timer;

  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(duration, (timer) {
      index = (index + 1) % colors.length;
      if (mounted) { setState(() {}); }
    });
  }

  @override
  void dispose() {
    super.dispose();
    _timer?.cancel();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: duration,
      curve: Curves.easeInOut,

      decoration: BoxDecoration(
        border: Border.all(color: colors[index], style: BorderStyle.solid, width: 4),
      ),
    );
  }
}