Herkese merhabalar. Görselde gördüğünüz gibi bir bottom bar yapmaya çalışıyorum. Üstteki barlar arasında gezinirken normalde renk değişiyor ve ben bunun animasyon sayesinde yavaş olmasını istiyorum. Uygulamayı ilk başlattığımda birinci kutucuk tam istediğim gibi yavaşça renkleniyor fakat diğer butonlara tıkladığımda animasyon çalışmıyor. Aşağıya ilgili kod bloğunu aynen yapıştırıyorum. Bu konuda yardımcı olabilecek arkadaşlar varsa çok mutlu olurum. Şimdiden teşekkürler.

class SearchBox extends StatefulWidget {
  double rightRadius;
  double leftRadius;
  bool isActive;
  int index;
  Function functionBox;

  Color auxNavEnBgndCol;
  Color auxNavDisBgndCol;
  Color auxNavEnTextCol;
  Color auxNavDisTextCol;
  Color auxNavlikesBgndCol;
  Color auxNavlikesNumCol;
  IconData auxNavSetIcon;
  IconData auxNavLikeIcon;
  IconData auxNavNoLikeIcon;
  int auxNavNLikes;
  Color heartColor;

  SearchBox({
    this.leftRadius,
    this.rightRadius,
    this.isActive,
    this.index,
    this.functionBox,
    this.auxNavEnBgndCol,
    this.auxNavDisBgndCol,
    this.auxNavEnTextCol,
    this.auxNavDisTextCol,
    this.auxNavlikesBgndCol,
    this.auxNavlikesNumCol,
    this.auxNavSetIcon,
    this.auxNavLikeIcon,
    this.auxNavNoLikeIcon,
    this.auxNavNLikes,
    this.heartColor,
  });
  @override
  _SearchBoxState createState() => _SearchBoxState();
}

class _SearchBoxState extends State<SearchBox> with TickerProviderStateMixin {
  AnimationController controller;
  Animation bgColor;

  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(vsync: this, duration: Duration(seconds: 1))
          ..addListener(() {
            setState(() {});
          });
    bgColor =
        ColorTween(begin: Colors.red, end: Colors.green).animate(controller);
    controller.forward();
  }

  Color boxColor;
  Color fontColor;
  @override
  Widget build(BuildContext context) {
    if (widget.isActive == true) {
      boxColor = bgColor.value;
      fontColor = widget.auxNavEnTextCol;
      if (widget.index == 2) {
        widget.rightRadius = 0;
      }
    } else {
      boxColor = widget.auxNavDisBgndCol;
      fontColor = widget.auxNavDisTextCol;
    }
    return Container(
      padding: EdgeInsets.symmetric(vertical: 5),
      width: MediaQuery.of(context).size.width * 2 / 7,
      decoration: BoxDecoration(
        color: boxColor,
        borderRadius: BorderRadius.horizontal(
          left: Radius.circular(widget.leftRadius),
          right: Radius.circular(widget.rightRadius),
        ),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container(
            alignment: Alignment.center,
            // padding: EdgeInsets.only(left: 5, top: 8),
            margin: EdgeInsets.only(
              left: MediaQuery.of(context).size.width * 0.1 * 0.25,
            ),
            decoration: BoxDecoration(
              color: boxColor,
              borderRadius: BorderRadius.horizontal(
                left: Radius.circular(widget.leftRadius),
                right: Radius.circular(widget.rightRadius),
              ),
            ),
            width: MediaQuery.of(context).size.width * 0.165,
            child: TextFormField(
              textAlignVertical: TextAlignVertical.center,
              expands: true,
              maxLines: null,
              // keyboardType: TextInputType.multiline,
              // maxLines: null,
              textAlign: TextAlign.left,
              autocorrect: true,
              style: TextStyle(
                fontSize: 11,
              ),
              controller: TextEditingController(),
              onFieldSubmitted: (_) {},
              onTap: () {
                setState(() {
                  widget.functionBox(widget.index);
                });
              },
              decoration: InputDecoration(
                  border: InputBorder.none,
                  // border: OutlineInputBorder(),
                  hintText: 'Search \ntext here',
                  hintStyle: TextStyle(
                    fontSize: 11,
                    //  wordSpacing: 2,
                    color: fontColor,
                  ),
                  hintMaxLines: 2,
                  contentPadding: EdgeInsets.all(2)),
            ),
          ),
          Visibility(
            visible: widget.isActive,
            child: Expanded(
              // padding: EdgeInsets.only(right: 50),
              // width: MediaQuery.of(context).size.width * 0.165,
              child: IconButton(
                alignment: Alignment.center,
                padding: EdgeInsets.all(0),
                onPressed: () {},
                icon: Icon(
                  widget.auxNavSetIcon,
                  size: 25,
                  // color: fontColor,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}