如何使文字在颤动30秒后变得可点击？

问题描述

我正在制作一个登录应用程序，在那里我创建了一个OTP验证页面。我要在此页面中创建一个重新发送选项，该选项只有在页面加载30秒后才能单击，并且一旦单击就永远无法点击。

我是新手，所以很抱歉。

解决方法

您可以遵循此代码。

class TestButton extends StatefulWidget {
  @override
  _TestButtonState createState() => _TestButtonState();
}

class _TestButtonState extends State<TestButton> {
  bool firstStateEnabled = false;

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

  @override
  Widget build(BuildContext context) {
    Timer(Duration(milliseconds: 30000),() {
      setState(() {
        firstStateEnabled = true;
      });
    });
    return Scaffold(
      body: Container(
        child: firstStateEnabled
            ? Center(
                child: Container(
                  width: 200,height: 55,child: RaisedButton(
                    onPressed: () {},child: Text("Resend OTP"),),)
            : Center(child: Container()),);
  }
}

或者如果只需要一次按钮，则可以遵循以下代码。

安装timer_count_down。

然后，下面的代码。

class TestButton extends StatefulWidget {
  @override
  _TestButtonState createState() => _TestButtonState();
}

class _TestButtonState extends State<TestButton> {
  bool firstStateEnabled = false;
  final CountdownController controller = CountdownController();
  final int seconds = 30;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            child: firstStateEnabled
                ? Center(
                    child: Container(
                      width: (200),child: RaisedButton(
                        onPressed: () {
                          setState(() {
                            firstStateEnabled = false;
                          });
                        },)
                : Center(child: Container()),Countdown(
            controller: controller,seconds: seconds,build: (context,double time) {
              return Container();
            },interval: Duration(milliseconds: 100),onFinished: () {
              setState(() {
                firstStateEnabled = true;
                ;
              });
            },)
        ],);
  }
}