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

Question

I am making a login app where by i have created an OTP validation page. In this page i want to make a resend option which is clickable only after 30 seconds of page loading and once clicked becomes unclickable for ever.

I am new to flutter so I am sorry if this seems trivial.

Answer 1

You can follow this code.

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

Or if you need only one time the button than you can follow below codes.

Install timer_count_down.

Then, below code.

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