I have 3 types of quotes. When a respective button is pressed, the quote fades if it's from category 1 to category 2 to category 3, vice versa.

However, I would like to make the quote fade even when they are from the same category. Right now, it fades when the quotes are from different categories.

How can this be made possible ? Thanks

Im thinking it has something to do with the button. Eg. When the button for cat 1 is pressed, the opacity of the cat 1's quote turns to zero and back to 1 (duration of one second). But Im not sure how to write that.

Attached below is the main chunk of the code that's involved in this action:


  double opacity1 = 0.0;
  double opacity2 = 0.0;
  double opacity3 = 0.0;

String quoteCat1 = List1[Random().nextInt(List1.length)];

  void generateConvoTopic1() {
    setState(() {
      quoteCat1 = List1[Random().nextInt(List1.length)];
    });
  }

  String quoteCat2 = List2[Random().nextInt(List2.length)];

  void generateConvoTopic2() {
    setState(() {
      convoTopic2 = List2[Random().nextInt(List2.length)];
    });
  }

  String quoteCat3 = List3[Random().nextInt(List3.length)];

  void generateConvoTopic3() {
    setState(() {
      quoteCat3 = List3[Random().nextInt(List3.length)];
    });
  }

 @override
  Widget build(BuildContext context) {

    return Scaffold(

...

body: ...

///Following are where the quotes are stacked. But they take  turns to show their opacity.

Stack(children: <Widget>[

                AnimatedOpacity(
                    opacity: opacity1,
                    duration: Duration(seconds: 1),
                    child:Text(quoteCat1),

                AnimatedOpacity(
                    opacity: opacity2,
                    duration: Duration(seconds: 1),
                    child: Text(quoteCat2),

                AnimatedOpacity(
                    opacity: opacity3,
                    duration: Duration(seconds: 1),
                    child: Text(quoteCat3),

              ]),

...

///Following are the buttons to trigger the respective quotes' opacity

ElevatedButton(

...
onPressed: () {
                      generatequoteCat1();
                      opacity1 = 1.0;
                      opacity2 = 0.0;
                      opacity3 = 0.0;
                    },),
ElevatedButton(

...
onPressed: () {
                      generatequoteCat2();
                      opacity2 = 1.0;
                      opacity1 = 0.0;
                      opacity3 = 0.0;
                    },),
ElevatedButton(

...
onPressed: () {
                      generatequoteCat3();
                      opacity3 = 1.0;
                      opacity1 = 0.0;
                      opacity2 = 0.0;
                    },),
...