How output values each 1 second? - flutter

Question

void _f1() {
setState(() {
//clear output
_str = '';
});
for(int i=1; i<=5; i++) {
Future.delayed(Duration(seconds: 1), () {
setState(() {
_str += '$i ';
});
});
}
}
Now 1 2 3 4 5 output all at once.
How output values each 1 second? For example: 1 (passed 1 second), 2 (passed 1 second), 3 (passed 1 second), 4 (passed 1 second), 5 (passed 1 second) ? Thank you. Full code.
main.dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Name App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Name Page'),
),
body: MyHomePage(),
),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String _str;
#override
void initState() {
super.initState();
_str = '';
}
void _f1() {
setState(() {
//clear output
_str = '';
});
for(int i=1; i<=5; i++) {
Future.delayed(Duration(seconds: 1), () {
setState(() {
_str += '$i ';
});
});
}
}
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Align(
alignment: Alignment.topLeft,
child: Container(
width: double.infinity,
height: 45.0,
//color: Colors.pink,
margin: const EdgeInsets.all(10.0),
child: FlatButton(
onPressed: () {
_f1();
},
color: Colors.black12,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)
),
child: Text(
'ok',
style: TextStyle(
color: Colors.deepPurple,
fontSize: 22.0,
),
),
),
),
),
Align(
alignment: Alignment.centerLeft,
child: Container(
padding: const EdgeInsets.all(10.0),
child: Text(
_str,
style: TextStyle(
color: Colors.red,
fontSize: 36.0,
),
),
),
),
],
);
}
}

Answer 1

To output a command every second, try this example function:
void countSeconds(s) {
for( var i = 1 ; i <= s; i++ ) {
Future.delayed(Duration(seconds: i), () => print(i));
}
}
Extracted from here.
Adapting to your case, we can have:
void _f1() {
setState(() {
//clear output
_str = '';
});
for(int i=1; i<=5; i++) {
Future.delayed(Duration(seconds: i), () {
setState(() {
_str += '$i ';
});
});
}
}
The key difference here is that you were setting 5 future.delayed at the same time (Ok, maybe a few milliseconds from each other) so they all ended up at roughly the same time. So the fix is to set from the start futures to every desired duration, and not to try to set "concatenated" futures.

Answer 2

You can achieve this with Timer.periodic
class OutputOneByOne extends StatefulWidget {
#override
_OutputOneByOneState createState() => _OutputOneByOneState();
}
class _OutputOneByOneState extends State<OutputOneByOne> {
int counter = 1;
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Text("$counter"),
),
),
floatingActionButton: FloatingActionButton(
onPressed: startTimer,
),
);
}
void startTimer(){
Timer.periodic(Duration(seconds: 1), (timer) {
setState(() {
counter++;
if(counter == 5){
timer.cancel();
}
});
});
}
}
Hope this helps you.