I want to add function to the FloatingActionButton

I want the FloatingActionButton to hold a Timer and change color five seconds after tapping it. 　I tried using the Timer that the parent Widget has, but then the entire screen refresh. So I thought I could separate the FloatingActionButton as a single StatefulWidget and add function to it, but I don't know how to do that!　Is it possible to use something called "extends"?　 〜〜〜

I took your advice and created a NewClass! It's pretty good, but I would like to set _counter=0 every time I tap it.

class CustomFloatingButton extends StatefulWidget {
  final VoidCallback onTap;
  CustomFloatingButton({required this.onTap});

  @override
  State<CustomFloatingButton> createState() => _CustomFloatingButtonState();
}

class _CustomFloatingButtonState extends State<CustomFloatingButton> {
  int _counter = 0;
  late Timer timer;

  dynamic buttonColor() {
    if (_counter < 6) {
      return Colors.grey;
    } else {
      return Colors.teal;
      } 
    }
  }

  @override
  void initState() {
    super.initState();
    timer = Timer.periodic(
      const Duration(seconds: 1),
      (Timer timer) {
        _counter++;
        if (_counter > widget.quizLimit) {
          timer.cancel();
        }
        setState(() {});
        print(_counter);
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: widget.onTap,
      child: Container(
        height: 50,
        width: 50,
        decoration: BoxDecoration(
          color: buttonColor(),
          borderRadius: BorderRadius.circular(28),
        ),
        alignment: Alignment.center,
        child: const Icon(
          Icons.arrow_forward,
          color: Colors.white,
        ),
      ),
    );
  }
}