Flutter countdown start on button press - flutter

Question

So i am trying to make a SMS verifier. I need a button which i press to send the sms and after that it needs to start a countdown so you cannot press the button anymore. I found this code on the internet (https://dartpad.dev/23c25b17a8d663ea8c01b18eae38b2ab?) the problem with this is that it first starts the countdown once the page is open and i need exactly the opposite, once the page is opened first you press the button and than see the countdown and the cycle repeats.
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
static const _timerDuration = 30;
StreamController _timerStream = new StreamController<int>();
int timerCounter;
Timer _resendCodeTimer;
#override
void initState() {
activeCounter();
super.initState();
}
#override
dispose(){
_timerStream.close();
_resendCodeTimer.cancel();
super.dispose();
}
activeCounter(){
_resendCodeTimer =
new Timer.periodic(Duration(seconds: 1), (Timer timer) {
if (_timerDuration - timer.tick > 0)
_timerStream.sink.add(_timerDuration - timer.tick);
else {
_timerStream.sink.add(0);
_resendCodeTimer.cancel();
}
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: StreamBuilder(
stream: _timerStream.stream,
builder: (BuildContext ctx,
AsyncSnapshot snapshot) {
return SizedBox(
width: 300,
height: 30,
child:RaisedButton(
textColor: Theme.of(context)
.accentColor,
child: Center(
child:
snapshot.data == 0 ?
Text('send code again')
: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(' button will be enable after ${snapshot.hasData ? snapshot.data.toString() : 30} seconds '),
],)
),
onPressed: snapshot.data == 0 ? () {
// your sending code method
_timerStream.sink.add(30);
activeCounter();
} : null,
)
);
},
),
),
);
}
}

Answer 1

Just change your initState() like this:
#override
void initState() {
_timerStream.sink.add(0); //add this line
super.initState();
}

Answer 2

Delete activeCounter() from initState() and call it whenever you want to start timer.
Complete Example:
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({this.title}) : super();
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
static const _timerDuration = 30;
StreamController _timerStream = new StreamController<int>();
int timerCounter;
Timer _resendCodeTimer;
#override
void initState() {
_timerStream.sink.add(0);
super.initState();
}
#override
dispose(){
_timerStream.close();
_resendCodeTimer.cancel();
super.dispose();
}
activeCounter(){
_resendCodeTimer =
new Timer.periodic(Duration(seconds: 1), (Timer timer) {
if (_timerDuration - timer.tick > 0)
_timerStream.sink.add(_timerDuration - timer.tick);
else {
_timerStream.sink.add(0);
_resendCodeTimer.cancel();
}
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: StreamBuilder(
stream: _timerStream.stream,
builder: (BuildContext ctx,
AsyncSnapshot snapshot) {
print('Data: ${snapshot.data}');
return SizedBox(
width: 300,
height: 30,
child:RaisedButton(
textColor: Theme.of(context)
.accentColor,
child: Center(
child:
snapshot.data == 0 ?
Text('send code again')
: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(' button will be enable after ${snapshot.hasData ? snapshot.data.toString() : 30} seconds '),
],)
),
onPressed: snapshot.data == 0 ? () {
// your sending code method
_timerStream.sink.add(30);
activeCounter();
} : null,
)
);
},
),
),
);
}
}