How to create timer picker in flutter?

Question

Is it possible to create duration timer, like in iOS in flutter?

example

Answer 1

There is a CupertinoTimePicker widget that does just this

Check this out

class Cupert extends StatefulWidget {

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

class _CupertState extends State<Cupert> {
  var value = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Expanded(
              child: Center(
                child: Text(
                  "$value"
                ),
              ),
            ),
            CupertinoTimerPicker(
              mode: CupertinoTimerPickerMode.hm,
              onTimerDurationChanged: (value){
                setState(() {
                  this.value = value.toString();
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

You can use the CupertinoTimerPicker in a dialog like this:

IconButton(
          icon: FaIcon(FontAwesomeIcons.clock),
          onPressed: () {
            print('timer');
            showDialog(
              context: context,
              builder: (context) {
                return SimpleDialog(
                  title: Center(child: Text('Select a Duration')),
                  children: [
                    Center(
                      child: SizedBox(
                        height: 200,
                        child: CupertinoTimerPicker(
                          onTimerDurationChanged: (value) {
                            print(value.toString());
                          },
                        ),
                      ),
                    ),
                    Row(
                      children: [
                        TextButton(
                            onPressed: () {
                              ExtendedNavigator.root.pop();
                            },
                            child: Text(
                              'Cancel',
                              style: TextStyle(color: Colors.red),
                            )),
                        TextButton(
                            onPressed: () {
                              // Todo save the selected duration to the ViewModel
                              ExtendedNavigator.root.pop();
                            },
                            child: Text('Submit')),
                      ],
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    )
                  ],
                );
              },
            );
          })