Get Time Picker's Value within a Widget

Question

I am trying to get the DateTime that is chosen from the user and save it within an object.

This is implemented within the following construction:

return Scaffold(
      appBar: AppBar(
        title: Text('Add/Edit Shift'),
      ),
      body: Container(
        color: Colors.white,
        margin: EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: SingleChildScrollView(
            child: Column(
//              crossAxisAlignment: CrossAxisAlignment.center,
//              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  height: 40.0,
                  decoration:
                      BoxDecoration(borderRadius: BorderRadius.circular(5.0)),
                  alignment: Alignment.center,
                  width: MediaQuery.of(context).size.width,
                  child: Text(
                    'Scheduling Date: ${_dateformat.format(widget.shiftDate)}',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 19.0,
                      color: Colors.teal,
                    ),
                  ),
                ),
                // fixme: how to get the clicked value from the user?
                //  the value has to get saved within an object that will be returned
                MyTimePicker(_startOfShift),
                MyTimePicker(_endOfShift),
                RaisedButton(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(5.0),
                  ),
                  child: Text(
                    "Submit",
                    style: TextStyle(
                        color: Colors.teal,
                        fontSize: 18.0,
                        fontWeight: FontWeight.bold),
                  ),
                  onPressed: () {
                    // todo: return the shift to the calendar
//                    print(MyTimePicker(_startOfShift).chosenTime);
                    Navigator.pop(
                      context,
                    );
                  },
                )
              ],
            ),
          ),
        ),
      ),
    );

And this is how it looks like:

The MyTimePickerClass is created as a separate Dart file. Within the MyTimePicker class, I construct a RaisedButton labeled as Start and End where the user is capable to choose the wanting time.

import 'package:flutter/material.dart';
import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';

class MyTimePicker extends StatefulWidget {
  String typeOfShift;
  MyTimePicker(this.typeOfShift);

  @override
  _MyTimePickerState createState() => _MyTimePickerState();
}

class _MyTimePickerState extends State<MyTimePicker> {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
      elevation: 4.0,
      onPressed: () {
        DateTime test = _MyDatePicker(context);
        widget.typeOfShift = test.toString();
        setState(() {});
      },
      child: Container(
        alignment: Alignment.center,
        height: 50.0,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(
                  child: Row(
                    children: <Widget>[
                      Icon(
                        Icons.access_time,
                        size: 18.0,
                        color: Colors.teal,
                      ),
                      Text(
                        " ${widget.typeOfShift}",
                        style: TextStyle(
                            color: Colors.teal,
                            fontWeight: FontWeight.bold,
                            fontSize: 18.0),
                      ),
                    ],
                  ),
                )
              ],
            ),
            Text(
              "  Change",
              style: TextStyle(
                  color: Colors.teal,
                  fontWeight: FontWeight.bold,
                  fontSize: 18.0),
            ),
          ],
        ),
      ),
      color: Colors.white,
    );
  }

  DateTime _MyDatePicker(BuildContext context) {
    DateTime _myDateTime;
    DatePicker.showTimePicker(context,
        showSecondsColumn: false,
        theme: DatePickerTheme(
          containerHeight: 210.0,
        ),
        showTitleActions: true, onConfirm: (time) {
//      _chosenTime = time;
      _myDateTime = time;
      print('confirm $time');
//      widget.typeOfShift = '${time.hour} : ${time.minute}';
      setState(() {});
    }, currentTime: DateTime.now(), locale: LocaleType.de);
    return _myDateTime;
  }
}

Then the time is displayed in the UI. How could I access this time??

Answer 1

You can copy paste run full code below
You can define two MyTimePicker and use it
When onPressed , you can use startPicker.typeOfShift to get String

MyTimePicker startPicker = MyTimePicker("Start");
MyTimePicker endPicker = MyTimePicker("End");

...
startPicker,
endPicker,
RaisedButton(
...
onPressed: () {
                    print(startPicker.typeOfShift);
                    print(endPicker.typeOfShift);

output

I/flutter (31204): 1 : 23
I/flutter (31204): 1 : 25

working demo

full code

import 'package:flutter/material.dart';
import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';

class MyTimePicker extends StatefulWidget {
  String typeOfShift;
  MyTimePicker(this.typeOfShift);

  @override
  _MyTimePickerState createState() => _MyTimePickerState();
}

class _MyTimePickerState extends State<MyTimePicker> {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
      elevation: 4.0,
      onPressed: () {
        DateTime test = _MyDatePicker(context);
        widget.typeOfShift = test.toString();
        setState(() {});
      },
      child: Container(
        alignment: Alignment.center,
        height: 50.0,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(
                  child: Row(
                    children: <Widget>[
                      Icon(
                        Icons.access_time,
                        size: 18.0,
                        color: Colors.teal,
                      ),
                      Text(
                        " ${widget.typeOfShift}",
                        style: TextStyle(
                            color: Colors.teal,
                            fontWeight: FontWeight.bold,
                            fontSize: 18.0),
                      ),
                    ],
                  ),
                )
              ],
            ),
            Text(
              "  Change",
              style: TextStyle(
                  color: Colors.teal,
                  fontWeight: FontWeight.bold,
                  fontSize: 18.0),
            ),
          ],
        ),
      ),
      color: Colors.white,
    );
  }

  DateTime _MyDatePicker(BuildContext context) {
    DateTime _myDateTime;
    DatePicker.showTimePicker(context,
        showSecondsColumn: false,
        theme: DatePickerTheme(
          containerHeight: 210.0,
        ),
        showTitleActions: true, onConfirm: (time) {
//      _chosenTime = time;
      _myDateTime = time;
      print('confirm $time');
      widget.typeOfShift = '${time.hour} : ${time.minute}';
      setState(() {});
    }, currentTime: DateTime.now(), locale: LocaleType.de);
    return _myDateTime;
  }
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      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> {
  int _counter = 0;
  MyTimePicker startPicker = MyTimePicker("Start");
  MyTimePicker endPicker = MyTimePicker("End");
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Add/Edit Shift'),
      ),
      body: Container(
        color: Colors.white,
        margin: EdgeInsets.all(16.0),
        child: Form(
          //key: _formKey,
          child: SingleChildScrollView(
            child: Column(
//              crossAxisAlignment: CrossAxisAlignment.center,
//              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  height: 40.0,
                  decoration:
                      BoxDecoration(borderRadius: BorderRadius.circular(5.0)),
                  alignment: Alignment.center,
                  width: MediaQuery.of(context).size.width,
                  child: Text(
                    'Scheduling Date: ',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 19.0,
                      color: Colors.teal,
                    ),
                  ),
                ),
                // fixme: how to get the clicked value from the user?
                //  the value has to get saved within an object that will be returned
                startPicker,
                endPicker,
                RaisedButton(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(5.0),
                  ),
                  child: Text(
                    "Submit",
                    style: TextStyle(
                        color: Colors.teal,
                        fontSize: 18.0,
                        fontWeight: FontWeight.bold),
                  ),
                  onPressed: () {
                    print(startPicker.typeOfShift);
                    print(endPicker.typeOfShift);
                    // todo: return the shift to the calendar
//                    print(MyTimePicker(_startOfShift).chosenTime);
                    Navigator.pop(
                      context,
                    );
                  },
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}