How to tween animate a text? From Opacity =1 to 0 and back to 1 with one button

Question

I've made the quote fade out and in if the previous quote is from another category. However, I'm unable to replicate that if the quote is from the same category.

How do I make the quote fade out and in if the quote is from the same category?

I feel like tween sequence is getting there but still unable to get the results.

Any guidance is appreciated thanks!

AnimationController animationController;
  Animation<double> opacityAnimation;
  double opacity1 = 0.0;
///ditto for opacity2 and opacity3

String quotes1 = Quotes1[Random().nextInt(Quotes1.length)];

  void generateQuotes1() {
    setState(() {
      quotes1 = Quotes1[Random().nextInt(Quotes1.length)];
    });
  }


///ditto for Quotes2 and Quotes 3

  @override
  void initState() {
    super.initState();
    changeOpacity();

    animationController =
        AnimationController(vsync: this, duration: Duration(seconds: 3));
    animationController.forward();


    opacityAnimation = TweenSequence(
      <TweenSequenceItem<double>>[
        TweenSequenceItem<double>(
            tween: Tween<double>(begin: 1.0, end: 0.0)
                .chain(CurveTween(curve: Curves.easeInOutBack)),
            weight: 27),
        TweenSequenceItem<double>(
            tween: Tween<double>(begin: 0.0, end: 1.0)
                .chain(CurveTween(curve: Curves.easeInOutBack)),
            weight: 27),
      ],
    ).animate(
      animationController,
    );
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold
...
           AnimatedOpacity(
                    opacity: opacity1 == 1.0 ? opacityAnimation.value : 0.0,
                    duration: Duration(seconds: 1),
                    child: Text(quotes1),
///this shows the quote

ElevatedButton(
                  ...
                    onPressed: () {
                      generateQuotes1(); 
///This returns randomized quote from the list.
                      opacity1 = 1.0;
                      opacity2 = 0.0;
                      opacity3 = 0.0;
                    },
                    ),

///ditto for quotes2 and quotes3
...
  }
}

Ita

I fail to understand what your end goal is, lets divide this in two parts. The first i believe is an non-stop fade-in-fade-out animation? And the second would be conditionally triggering this animation based on a property in this case category. Did I understood correctly? – Motherland

@Motherland hey. I think my phrasing has misled you. my apologies. Let me rephrase, hopefully, it'll be better. On this page, there will be 3 types of quotes triggered. And they are triggered from different lists by the press of 3 buttons respectively. Button A will trigger quotes from category A, button B will trigger quotes from cat B. The animation between quotes of different categories is settled. I've managed to do it. The transition is animated. However, the problem is, if I'm showing a quote from Category A and I press button A, the quotes changes without fade in and fade out animation. – Ita

And the lack of fade in and out animation is ugly. So i'm looking at achieving the fade in fade out transition even when a quote is shown from the same list. ie. if quote A is the current quote, pressing button A will make the quote fade out and in as the new randomized quote from Cat A is shown. – Ita