Как показать контейнер за 3 секунды

Question

У меня есть контейнер, в котором есть 2 поля. 1 представляет собой процент, а другой простой текст. Что мне нужно, так это то, что я не хочу показывать процентный контейнер, и когда я нажимаю на контейнер, он показывает процентный показатель только в течение 3 секунд, а затем исчезает. Может кто-нибудь сказать, пожалуйста, как это возможно?

Вот мой код

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',
                          ),
                        ),
                      ),
                    ],
                  )
                ),
              ],
            ),
          ),
        ),

Как и в коде, я упаковал контейнер в GestureDetector. И в контейнере у меня есть 2 контейнера. оба показывают текст. Что мне нужно, так это когда пользователь щелкает на жесте-детекторе, затем в первом контейнере показывается значение, и через 3 секунды оно скрывается.

Answer 1

Вы должны начать с создания условия, такого как shouldShow, которое определяет, когда должен отображаться контейнер, и затем делать что-то вроде if(shouldShow) перед контейнером в столбце.

При обратном вызове onTap вашего GestureDetector вызовите setState и измените значение shouldShow на true. В onTap вы также должны начать новый Timer с Duration из 3 секунд с обратным вызовом, который снова вызывает setState и меняет shouldShow на false.

onTap образец :

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

Фрагмент метода построения:

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
  ],
),

Answer 2

вот пример кода

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'),
        ],
      ),
    );
  }
}

Answer 3

В флаттерной документации есть хороший пример затухания виджета через 500 миллисекунд, оборачивая контейнер контейнером с виджетом AnimatedOpacity.

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,
  ),
);