Duration Picker for flutter
Fork from flutter_duration_picker. https://github.com/cdharris/flutter_duration_picker
A little widget for picking durations. Heavily inspired from the Material Design time picker widget.
How to setup localization
In order to support other languages, developers need to configure localization settings like the settings for the time picker. Example for english and korean:
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Duration Picker Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
localizationsDelegates: [
DurationPickerLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: [Locale('en'), Locale('ko')],
home: const MyHomePage(title: 'Duration Picker Demo'),
);
}
}
How to add more languages
- Add a localizations class in
localizataions dir.
class DurationPickerLocalizationsKo extends DurationPickerLocalizations {
@override
String get baseUnitHour => '시간';
@override
String get baseUnitMillisecond => '밀리초';
...
}
The class should extend DurationPickerLocalizations. This makes it easy to write everything you should write.
- Add the language code to the
supportedLocales array in _DurationPickerLocalizationDelegate.
class _DurationPickerLocalizationDelegate
extends LocalizationsDelegate<DurationPickerLocalizations> {
const _DurationPickerLocalizationDelegate();
static const supportedLocales = ['en', 'ko'];
...
}
- Return a
DurationPickerLocalizations implementation as locale at load method in _DurationPickerLocalizationDelegate.
@override
Future<DurationPickerLocalizations> load(Locale locale) async {
switch (locale.languageCode) {
case 'ko':
return DurationPickerLocalizationsKo();
default:
return DurationPickerLocalizationsEn();
}
}
Example Usage:
dependencies:
duration_picker: "^1.0.0"
import 'package:flutter/material.dart';
import 'package:duration_picker/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(
child: DurationPicker(
duration: _duration,
onChange: (val) {
setState(() => _duration = val);
},
))
],
),
),
floatingActionButton: Builder(
builder: (BuildContext context) => FloatingActionButton(
onPressed: () async {
var resultingDuration = await showDurationPicker(
context: context,
initialTime: Duration(minutes: 30),
);
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text('Chose duration: $resultingDuration')));
},
tooltip: 'Popup Duration Picker',
child: Icon(Icons.add),
)),
);
}
}
