Flutter - How do I get different results using the same future? - flutter

Question

I am trying to get a different Times set by the user on each button. But show the same time for all of them. Whenever I change it, it changes the time of all their text. How do I do it, please explain?
This is my code:
import 'package:flutter/material.dart';
import 'package:flutter_duration_picker/flutter_duration_picker.dart';
import 'dart:async';
class EndurancePage extends StatefulWidget {
#override
_EndurancePageState createState() => _EndurancePageState();
}
class _EndurancePageState extends State<EndurancePage> {
Duration _duration = Duration();
Future<Null> _selectTime(BuildContext context) async {
final Duration picked =
await showDurationPicker(context: context, initialTime: _duration);
if (picked != null && picked != _duration) {
print('Time Selected: ${_duration.toString()}');
setState(() {
_duration = picked;
});
} }
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 100.0, bottom: 30.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Excer",
textAlign: TextAlign.center,
style:
const TextStyle(fontSize: 35.0, color: Colors.white),
),
Text(
"sices",
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 35.0,
color: Colors.white,
fontWeight: FontWeight.bold),
),
]),
),
Padding(
padding: EdgeInsets.only(bottom: 20.0),
child: Text(
"Select a few and set their duration.",
style: const TextStyle(color: Colors.white70, fontSize: 17.0),
),
),
SizedBox(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 25.0),
child: Container(
height: 1.0,
color: Colors.yellowAccent,
),
),
),
//---------------LIST OF EVENTS---------------
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 50.0, top: 20.0, bottom: 10.0),
child: Text(
"Push UPS",
style: const TextStyle(color: Colors.white, fontSize: 25.0),
),
),
Padding(
padding: EdgeInsets.only(top: 8.0),
child: FlatButton(
onPressed: () {
_selectTime(context);
},
child: new Icon(
Icons.timelapse,
color: Colors.white,
),
),
),
Padding(
padding: EdgeInsets.only(top: 8.0, right: 20.0),
child: Text(
'${_duration.inMinutes.toString()} min',
style: const TextStyle(color: Colors.white, fontSize: 25.0),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 50.0, top: 20.0, bottom: 10.0),
child: Text(
"Pull UPS",
style: const TextStyle(color: Colors.white, fontSize: 25.0),
),
),
Padding(
padding: EdgeInsets.only(top: 8.0),
child: FlatButton(
onPressed: () {
_selectTime(context);
},
child: new Icon(
Icons.timelapse,
color: Colors.white,
),
),
),
Padding(
padding: EdgeInsets.only(top: 8.0, right: 20.0),
child: Text(
'${_duration.inMinutes.toString()} min',
style: const TextStyle(color: Colors.white, fontSize: 25.0),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 50.0, top: 20.0, bottom: 10.0),
child: Text(
"What's Today?",
style: const TextStyle(color: Colors.white, fontSize: 25.0),
),
),
Padding(
padding: EdgeInsets.only(top: 8.0),
child: FlatButton(
onPressed: () {
_selectTime(context);
},
child: new Icon(
Icons.timelapse,
color: Colors.white,
),
),
),
Padding(
padding: EdgeInsets.only(top: 8.0, right: 20.0),
child: Text(
'${_duration.inMinutes.toString()} min',
style: const TextStyle(color: Colors.white, fontSize: 25.0),
),
),
],
),
],
),
),
);
}
}
So, I start the app and the initial time is 0 initial time
Then I set the time on the first button setting time
Now it changes the time on all buttons final state
how do I get different times for different buttons?

Answer 1

The problem is that your are using just one variable and when you change that variable all Text widgets get updated with the same value.
You need to use three duration variables, one for each value.
The simplest way is the following:
import 'package:flutter/material.dart';
import 'package:flutter_duration_picker/flutter_duration_picker.dart';
import 'dart:async';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: EndurancePage(),
);
}
}
class EndurancePage extends StatefulWidget {
#override
_EndurancePageState createState() => _EndurancePageState();
}
class _EndurancePageState extends State<EndurancePage> {
Duration _duration1 = Duration();
Duration _duration2 = Duration();
Duration _duration3 = Duration();
Future<Null> _selectTime(BuildContext context, int timer) async {
if (timer == 1) {
final Duration picked =
await showDurationPicker(context: context, initialTime: _duration1);
if (picked != null && picked != _duration1) {
setState(() {
_duration1 = picked;
});
}
} else if (timer == 2) {
final Duration picked =
await showDurationPicker(context: context, initialTime: _duration2);
if (picked != null && picked != _duration2) {
setState(() {
_duration2 = picked;
});
}
} else if (timer == 3) {
final Duration picked =
await showDurationPicker(context: context, initialTime: _duration3);
if (picked != null && picked != _duration3) {
setState(() {
_duration3 = picked;
});
}
}
}
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 100.0, bottom: 30.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Excer",
textAlign: TextAlign.center,
style:
const TextStyle(fontSize: 35.0, color: Colors.white),
),
Text(
"sices",
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 35.0,
color: Colors.white,
fontWeight: FontWeight.bold),
),
]),
),
Padding(
padding: EdgeInsets.only(bottom: 20.0),
child: Text(
"Select a few and set their duration.",
style: const TextStyle(color: Colors.white70, fontSize: 17.0),
),
),
SizedBox(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 25.0),
child: Container(
height: 1.0,
color: Colors.yellowAccent,
),
),
),
//---------------LIST OF EVENTS---------------
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 50.0, top: 20.0, bottom: 10.0),
child: Text(
"Push UPS",
style: const TextStyle(color: Colors.white, fontSize: 25.0),
),
),
Padding(
padding: EdgeInsets.only(top: 8.0),
child: FlatButton(
onPressed: () {
_selectTime(context, 1);
},
child: new Icon(
Icons.timelapse,
color: Colors.white,
),
),
),
Padding(
padding: EdgeInsets.only(top: 8.0, right: 20.0),
child: Text(
'${_duration1.inMinutes.toString()} min',
style: const TextStyle(color: Colors.white, fontSize: 25.0),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 50.0, top: 20.0, bottom: 10.0),
child: Text(
"Pull UPS",
style: const TextStyle(color: Colors.white, fontSize: 25.0),
),
),
Padding(
padding: EdgeInsets.only(top: 8.0),
child: FlatButton(
onPressed: () {
_selectTime(context, 2);
},
child: new Icon(
Icons.timelapse,
color: Colors.white,
),
),
),
Padding(
padding: EdgeInsets.only(top: 8.0, right: 20.0),
child: Text(
'${_duration2.inMinutes.toString()} min',
style: const TextStyle(color: Colors.white, fontSize: 25.0),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 50.0, top: 20.0, bottom: 10.0),
child: Text(
"What's Today?",
style: const TextStyle(color: Colors.white, fontSize: 25.0),
),
),
Padding(
padding: EdgeInsets.only(top: 8.0),
child: FlatButton(
onPressed: () {
_selectTime(context, 3);
},
child: new Icon(
Icons.timelapse,
color: Colors.white,
),
),
),
Padding(
padding: EdgeInsets.only(top: 8.0, right: 20.0),
child: Text(
'${_duration3.inMinutes.toString()} min',
style: const TextStyle(color: Colors.white, fontSize: 25.0),
),
),
],
),
],
),
),
);
}
}
Another option, passing the duration variable as a parameter would be the following:
import 'package:flutter/material.dart';
import 'package:flutter_duration_picker/flutter_duration_picker.dart';
import 'dart:async';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: EndurancePage(),
);
}
}
class EndurancePage extends StatefulWidget {
#override
_EndurancePageState createState() => _EndurancePageState();
}
class _EndurancePageState extends State<EndurancePage> {
Duration _duration1 = Duration();
Duration _duration2 = Duration();
Duration _duration3 = Duration();
Future<Duration> _selectTime(BuildContext context, Duration duration) async {
final Duration picked =
await showDurationPicker(context: context, initialTime: duration);
if (picked != null && picked != duration) {
setState(() {});
return picked;
}
return null;
}
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 100.0, bottom: 30.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Excer",
textAlign: TextAlign.center,
style:
const TextStyle(fontSize: 35.0, color: Colors.white),
),
Text(
"sices",
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 35.0,
color: Colors.white,
fontWeight: FontWeight.bold),
),
]),
),
Padding(
padding: EdgeInsets.only(bottom: 20.0),
child: Text(
"Select a few and set their duration.",
style: const TextStyle(color: Colors.white70, fontSize: 17.0),
),
),
SizedBox(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 25.0),
child: Container(
height: 1.0,
color: Colors.yellowAccent,
),
),
),
//---------------LIST OF EVENTS---------------
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 50.0, top: 20.0, bottom: 10.0),
child: Text(
"Push UPS",
style: const TextStyle(color: Colors.white, fontSize: 25.0),
),
),
Padding(
padding: EdgeInsets.only(top: 8.0),
child: FlatButton(
onPressed: () async {
_duration1 = await _selectTime(context, _duration1);
},
child: new Icon(
Icons.timelapse,
color: Colors.white,
),
),
),
Padding(
padding: EdgeInsets.only(top: 8.0, right: 20.0),
child: Text(
'${_duration1.inMinutes.toString()} min',
style: const TextStyle(color: Colors.white, fontSize: 25.0),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 50.0, top: 20.0, bottom: 10.0),
child: Text(
"Pull UPS",
style: const TextStyle(color: Colors.white, fontSize: 25.0),
),
),
Padding(
padding: EdgeInsets.only(top: 8.0),
child: FlatButton(
onPressed: () async {
_duration2 = await _selectTime(context, _duration2);
},
child: new Icon(
Icons.timelapse,
color: Colors.white,
),
),
),
Padding(
padding: EdgeInsets.only(top: 8.0, right: 20.0),
child: Text(
'${_duration2.inMinutes.toString()} min',
style: const TextStyle(color: Colors.white, fontSize: 25.0),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 50.0, top: 20.0, bottom: 10.0),
child: Text(
"What's Today?",
style: const TextStyle(color: Colors.white, fontSize: 25.0),
),
),
Padding(
padding: EdgeInsets.only(top: 8.0),
child: FlatButton(
onPressed: () async {
_duration3 = await _selectTime(context, _duration3);
},
child: new Icon(
Icons.timelapse,
color: Colors.white,
),
),
),
Padding(
padding: EdgeInsets.only(top: 8.0, right: 20.0),
child: Text(
'${_duration3.inMinutes.toString()} min',
style: const TextStyle(color: Colors.white, fontSize: 25.0),
),
),
],
),
],
),
),
);
}
}