Flutter How to implement Stack functionality in a function

Question

Im working on a language learning app where you see the german word at first and then after 2 seconds the translated word shows up (Im using an animated opacity for that). My problem is that I don't know how to implement that functionality after the button (buttonfunctionality2 in this case) has been pressed. Here's my Stack:

  double opacity2 = 0.0;

  changeOpacityFirst() {
    Future.delayed(Duration(seconds: 1), () {
      setState(() {
        opacity1 = opacity1 == 0.0 ? 1.0 : 0.0;
        opacity1 = opacity1 == 0.0 ? 0.0 : 0.0;
        changeOpacityFirst();
      });
    });
  }

  changeOpacitySecond() {
    Future.delayed(Duration(seconds: 2), () {
      setState(() {
        opacity2 = opacity2 == 0.0 ? 1.0 : 1.0;
        opacity2 = opacity2 == 0.0 ? 0.0 : 1.0;

        changeOpacitySecond();
      });
    });
  }

  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations(
        [DeviceOrientation.portraitDown, DeviceOrientation.portraitUp]);
    return WillPopScope(
      onWillPop: () {
        return showDialog(
            context: context,
            builder: (context) => AlertDialog(
                    title: Text('Möchtest du das Quiz beenden?'),
                    actions: <Widget>[
                      RaisedButton(
                        child: Text('Ja'),
                        onPressed: () =>
                            Navigator.pushNamed(context, DrawerScreen.id),
                      ),
                      RaisedButton(
                        child: Text('Nein'),
                        onPressed: () => Navigator.of(context).pop(false),
                      ),
                    ]));
      },
      child: Scaffold(
        body: Padding(
          padding: const EdgeInsets.fromLTRB(8.0, 64.0, 8.0, 8.0),
          child: Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  BackButton(),
                ],
              ),
              Expanded(
                flex: 3,
                child: Container(
                  padding: EdgeInsets.all(15.0),
                  alignment: Alignment.bottomCenter,
                  child: Stack(
                    children: [
                      AnimatedOpacity(
                        opacity: opacity1,
                        duration: Duration(seconds: 2),
                        child: Center(
                          child: Text(
                            mydata[0][i.toString()],
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              fontSize: 48.0,
                              fontFamily: "Circular",
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ),
                      AnimatedOpacity(
                        opacity: opacity2,
                        duration: Duration(seconds: 2),
                        child: Center(
                          child: Text(
                            mydata[2][i.toString()],
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              fontSize: 48.0,
                              fontFamily: "Circular",
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Expanded(
                flex: 6,
                child: AbsorbPointer(
                  absorbing: disableAnswer,
                  child: Container(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        choicebutton1('a'),
                        choicebutton2('b'),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

When the screen pops up, the Stack works for the first pair of words. I created a function called nextquestion, which gets triggered after the button has been pressed. Does somenone have an idea on how to implement the desired funciotnality into the function nextquestion()? Here's the button and the function:

void buttonfunctionality2(String k) {
    Timer(Duration(seconds: 2), nextquestion);
  }

  Widget choicebutton2(String k) {
    return Padding(
      padding: EdgeInsets.symmetric(
        vertical: 10.0,
        horizontal: 20.0,
      ),
      child: MaterialButton(
        onPressed: () => buttonfunctionality2(k),
        child: Text(
          mydata[1][i.toString()][k],
          textAlign: TextAlign.center,
          style: TextStyle(
            color: Color(0xFFF3F2F8),
            fontFamily: "Roboto",
            fontSize: 16.0,
          ),
          maxLines: 1,
        ),
        color: btncolor[k],
        splashColor: Color.fromRGBO(250, 139, 134, 1),
        highlightColor: Color.fromRGBO(255, 171, 147, 1),
        minWidth: 200.0,
        height: 45.0,
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
      ),
    );
  }







void nextquestion() {
    setState(() {
      if (j < 20) {
        i = random_array[j];
        j++;
      } else {
        Navigator.of(context).pushReplacement(MaterialPageRoute(
          builder: (context) => Resultpage(marks: marks),
        ));
      }
      btncolor["a"] = Color.fromRGBO(250, 139, 134, 1);
      btncolor["b"] = Color.fromRGBO(255, 171, 147, 1);
    });
  }

Here's the full code (please go to learningscreens folder -> learninghome_screen:

https://github.com/BeffJezos/sankofa_language_school.git

Answer 1

Didn't quite get your code snippets. I'm answering based on the gist of what I understood from your question.

My problem is that I don't know how to implement that functionality after the button (buttonfunctionality2 in this case) has been pressed.

For this, you can use the Visibility widget along with setState.

Does somenone have an idea on how to implement the desired funciotnality into the function nextquestion()?

Same needs to be done here.

To give you an example:

If you have a Text widget that you want to show or hide programmatically, wrap the Text widget with the Visibility widget.

bool _isVisible = false; //will not be shown at first

Visibility(
    visible: _isVisible,  //false now, so the child Text won't be visible
    child: Text('Text here'),
),

Now you need to show the Text widget programmatically (perhaps your nextquestion() function), simply call the setState:

void nextquestion() {
    setState( () {
        //anything else you'd like to change here
        _isVisible = !_isVisible;
    } );
}

As soon as the nextquestion() is executed, the Text widget will become visible in the layout.

Hope this answer helps.