Using showTimePicker multiple times to assign times to multiple variables

Question

I am using showTimePicker to get the time from a user. I can get the time as much as I like and assign it to a variable time. The problem is, there will be many instances in my code where I want to get the time but make it a whole new variable, time2 or time3 or whatever. In my code, whenever I call the the function selectTime() it will only ever set the value for the one variable time. I also am not sure how it affects timeOfDay picked;. I could get round these problems by writing a new selectTime() function for each variable but that seems like terrible progrmming.

How can I change my code so that it is possible to assign a new time to any variable without changing the time of others. I am quite new to flutter and will appreciate any help.

Bellow is my code. Of course I'll have another raised button used for changing time2.

Cheers

import 'dart:async';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Troponin Algorithm',
      home: CustomForm(),
    );
  }
}

class CustomForm extends StatefulWidget {
  @override
  _CustomFormState createState() => _CustomFormState();
}

class _CustomFormState extends State<CustomForm> {
  
  timeFormatter(number) {
    //String str;
    if (number > 9) {
      return number.toString();
    }
    else {
      //str = '0'+number.toString();
      return '0'+number.toString();
    }
  }

  TimeOfDay time = TimeOfDay.now();
  TimeOfDay time2 = TimeOfDay.now();
  TimeOfDay picked;
  String hour;
  String mins;
  String hour2;
  String mins2;

  Future<Null> selectTime(BuildContext context) async {
    picked = await showTimePicker(
      context: context,
      initialTime: time,
    );
    if (picked != null) {
      setState(() {
        time = picked;
      });
    }
  }

  @override

  Widget build(BuildContext context) {
    mins = timeFormatter(time.minute);
    hour = timeFormatter(time.hour);
    //mins2 = timeFormatter(time2.minute);
    
    return Scaffold(
        appBar: AppBar(
            title: Text('Troponin Algorthm')
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child: Text('time is $hour:$mins'),     //'${_time.hour}:${_time.minute}'
                ),
                RaisedButton(
                    child: Text('change time'),
                    onPressed: () {
                      setState(() {
                        selectTime(context);
                      });
                    }
                ),
              ],
            ),
            Text('time1 is: $time'),
          ],
        )
    );
  }```

Solution

Instead of selectTime returning a Future<Null>, you could modify it to return a Future<TimeOfDay>. The docs specify that showTimePicker will return a Future<TimeOfDay> based on the user's selection or null if the user cancels the dialog.

Future<TimeOfDay> selectTime(BuildContext context) async {
    picked = await showTimePicker(
      context: context,
      initialTime: time,
    );
    return picked;
}

And change your RaisedButton like this:

RaisedButton(
    child: Text('change time'),
    onPressed: () async {
        // We wait for either a Future<TimeOfDay> or a null
        var temp = await selectTime(context) ;
        if (temp != null) {
            setState(() {
                time = temp;
            });
        }
    },
),

Comments

[Finno]

Genius! I knew it had something to do with the function not returning a value but couldn't express it. Works perfectly. (You've put 't' where you meant 'temp')

[Wheathin]

Happy to help! Thanks for pointing out my typo.