Skip to content

A Flutter Widget for allowing a user to pick a duration (e.g. 5mins, 1h 30mins, etc)

License

Notifications You must be signed in to change notification settings

gurolcay/flutter_duration_picker

 
 

Repository files navigation

Duration Picker for flutter

A little widget for picking durations. Heavily inspired from the Material Design time picker widget.

Example Usage:

dependencies:
  flutter_duration_picker: "^1.0.4"
import 'package:flutter/material.dart';
import 'package:flutter_duration_picker/flutter_duration_picker.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Duration Picker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Duration Picker Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  Duration _duration = Duration(hours: 0, minutes: 0);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
		// Use it from the context of a stateful widget, passing in
		// and saving the duration as a state variable.
                child: DurationPicker(
              duration: _duration,
              onChange: (val) {
                this.setState(() => _duration = val);
              },
              snapToMins: 5.0,
            ))
          ],
        ),
      ),
      floatingActionButton: Builder(
          builder: (BuildContext context) => FloatingActionButton(
                onPressed: () async {
		  // Use it as a dialog, passing in an optional initial time
		  // and returning a promise that resolves to the duration
		  // chosen when the dialog is accepted. Null when cancelled.
                  Duration resultingDuration = await showDurationPicker(
                    context: context,
                    initialTime: Duration(minutes: 30),
                  );
                  Scaffold.of(context).showSnackBar(SnackBar(
                      content: Text("Chose duration: $resultingDuration")));
                },
                tooltip: 'Popup Duration Picker',
                child: Icon(Icons.add),
              )),
    );
  }
}

If you want to add BoxDecoration to pop up Duration Picker you can use like below:

showDurationPicker(
  context: context,
  initialTime: Duration(minites: 30),
  boxDecoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(5)
  )
)

About

A Flutter Widget for allowing a user to pick a duration (e.g. 5mins, 1h 30mins, etc)

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Dart 95.7%
  • Objective-C 2.9%
  • Java 1.4%