如何让文本在 flutter 30 秒后变为可点击？

Question

我正在制作一个登录应用程序，我已经在其中创建了一个 OTP 验证页面。在此页面中，我想制作一个 resend 选项，该选项仅在页面加载 30 秒后才可点击，一旦点击就永远无法点击。

我是 Flutter 的新手，所以如果这看起来微不足道，我很抱歉。

Answer 1

您可以按照此代码进行操作。

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),
                      height: 55,
                      child: RaisedButton(
                        onPressed: () {
                          setState(() {
                            firstStateEnabled = false;
                          });
                        },
                        child: Text("Resend OTP"),
                      ),
                    ),
                  )
                : Center(child: Container()),
          ),
          Countdown(
            controller: controller,
            seconds: seconds,
            build: (context, double time) {
              return Container();
            },
            interval: Duration(milliseconds: 100),
            onFinished: () {
              setState(() {
                firstStateEnabled = true;
                ;
              });
            },
          )
        ],
      ),
    );
  }
}

如何让文本在 flutter 30 秒后变为可点击？

How to make a text become clickable after 30 secs in flutter?

user-interface

text

click

gesture

flutter