How to show a container for 3 seconds

Question

I have a container in which there are 2 fields. 1 is a percentage and the other is simple Text. What I need is I don't want to show the percentage container and when I click on the container it will show the percentage for 3 seconds only and then disappear, Can anyone please tell how it's possible?

Here is my code

int size = _questions.length;

void nextQuestion(){
  if(index < size - 1)
    setState(() {
      index++;
    });
  print(index);
}


double percentage1Calculate(){
  int wouldClick = int.parse(_questions[index]['wouldclick']);
  int ratherClick = int.parse(_questions[index]['ratherclick']);
  double percentage1 = wouldClick / (wouldClick + ratherClick) * 100;
  return percentage1;
}


        GestureDetector(
          child: Container(
            height: stackHeight * 0.5,
            width: stackWidth,
            color: Colors.blue,
            child: Column(
              children: <Widget>[
                Container(
                    padding: const EdgeInsets.only(top: 10, right: 10),
                    height: stackHeight * 0.1,
                    color: Colors.blue,
                    width: double.infinity,
                    child: Column(
                      mainAxisSize: MainAxisSize.max,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: <Widget>[
                        Text('${percentage1Calculate().toStringAsFixed(0)}%',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 23,
                            fontFamily: 'NewsCycle',
                          ),
                        ),
                      ],

                    )
                ),
                Container(
                  color: Colors.blue,
                  height: stackHeight * 0.4,
                  width: double.infinity,
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(top: 20),
                        child: Text(
                          _questions[index]['would'],
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 23,
                            fontFamily: 'NewsCycle',
                          ),
                        ),
                      ),
                    ],
                  )
                ),
              ],
            ),
          ),
        ),

As in code i have wrapped a container in GestureDetector. And in container i have 2 container. both are showing text. What i need is when user click on gesturedetector then the 1st container show the value and after 3 seconds it will hide.

Christopher Moore · Accepted Answer · 2020-04-24T04:43:29.653

3

You should start by making a conditional like shouldShow that determines when the container should be shown and then doing something like if(shouldShow) before the container in the column.

In the onTap callback of your GestureDetector, call setState and change the value of shouldShow to true. In onTap you should also start a new Timer with a Duration of 3 seconds with a callback that calls setState again and changes shouldShow to false.

onTap sample:

onTap: () {
  setState(() {
    shouldShow = true;
  });
  Timer timer = Timer(Duration(seconds: 3), () {
    setState(() {
      shouldShow = false;
    });
  });
}

Build method snippet:

child: Column(
  children: <Widget>[
    if(shouldShow)
    Container(
      padding: const EdgeInsets.only(top: 10, right: 10),
      height: stackHeight * 0.1,
      color: Colors.blue,
      width: double.infinity,
      child: Column(
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            Text('${percentage1Calculate().toStringAsFixed(0)}%',
              style: TextStyle(
              color: Colors.white,
              fontSize: 23,
              fontFamily: 'NewsCycle',
            ),
          ),
        ],
      )
    ),
    //Other container here
  ],
),

edited Apr 24 '20 at 04:43

answered Apr 24 '20 at 04:14

Christopher Moore

15,626
10
42
52

showing error on Timer. Need to import something for timer ? – Shahnaz Raheem Apr 24 '20 at 04:42
method Timer isnt define for the class – Shahnaz Raheem Apr 24 '20 at 04:43
You have to import `import 'dart:async';` – Christopher Moore Apr 24 '20 at 04:43
@ShahnazRaheem Let me know how it goes. – Christopher Moore Apr 24 '20 at 04:46
Thanks its working can you please tell how can apply else condition ? as in this if shouldShow is true then it will show this container and if its false then to show other container Thanks again – Shahnaz Raheem Apr 24 '20 at 04:48
Yeah it's possible with some modifications. Here is some reading on how to do that: https://stackoverflow.com/questions/49713189/how-to-use-conditional-statement-within-child-attribute-of-a-flutter-widget-cen – Christopher Moore Apr 24 '20 at 04:50

Za101 · Answer 2 · 2020-04-24T04:58:50.643

0

here is a sample code

class _MyWidgetState extends State<MyWidget> {
  var showPercentage = true;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
            GestureDetector(
              // ==== THIS IF STATEMENT WILL TAKE CARE OF THE REST
              child:if (showPercentage) Text('Percentage widget'),
              onTap: () {
                setState(() {
                  showPercentage = !showPercentage;
                });
                Timer timer = Timer(Duration(seconds: 3), () {
                  setState(() {
                    showPercentage = false;
                  });
                });
              },
            ),
          Text('text widget'),
        ],
      ),
    );
  }
}

edited Apr 24 '20 at 04:58

answered Apr 24 '20 at 04:28

Za101

451
3
6

This code will not work as the `GestureDetector` will disappear following a single use. – Christopher Moore Apr 24 '20 at 04:35
isn't that the whole point of question, and if one want to show the percentage again should call `setState(() { showPercentage = true; });` from some where else – Za101 Apr 24 '20 at 04:40
The way you structured it makes it impossible to show the percentage again without rerunning the app. – Christopher Moore Apr 24 '20 at 04:42
1

It may work but its not what the OP is asking for and it has redundant code. Taking the `GestureDetector` outside of the `if` statement would have been a better solution. – Christopher Moore Apr 24 '20 at 04:55

score -1 · Answer 3 · answered Apr 24 '20 at 04:09

The flutter docs has a nice example of fading out a widget after 500 milliseconds by wrapping a Container with the AnimatedOpacity widget.

AnimatedOpacity(
  // If the widget is visible, animate to 0.0 (invisible).
  // If the widget is hidden, animate to 1.0 (fully visible).
  opacity: _visible ? 1.0 : 0.0,
  duration: Duration(milliseconds: 500),
  // The green box must be a child of the AnimatedOpacity widget.
  child: Container(
    width: 200.0,
    height: 200.0,
    color: Colors.green,
  ),
);

This doesn't really answer the OP's question. – Christopher Moore Apr 24 '20 at 04:23 — Christopher Moore, Apr 24 '20 at 04:23

How to show a container for 3 seconds

3 Answers3