May

Flutter Date Time Picker Multi Language

Flutter Date Time Picker Multi-Language:

In this tutorial, we are going to learn about Flutter date time picker functionality for multi-language.

you can choose the date or time / date&time both in multiple languages: it supports the following languages as shown below

English(en)
Persian(fa)
Chinese(zh)
Dutch(nl)
Russian(ru)
Italian(it)
French(fr)
Spanish(es)
Polish (pl)
Portuguese(pt)
Korean(ko)
Arabic(ar)
Turkish(tr)
Japanese(jp)
German(de)
Danish(da)

Implementing Date and Time Picker Functionality in Flutter for multi-languages:

Add the dependency package:

adding the dependency package to pubspec.yaml file. use the below code to add dependency package. After adding the dependency package run the get package method to import all the required files to the app.

dependencies:
flutter_datetime_picker: ^1.2.1

Install the package:

You can install the package from the command line using the below code with Flutter as shown.

$ flutter packages get

Importing the Package:

After, Adding the dependency package to the pubspec.yaml file, you can now import the package into the dart code by using the below code. without adding the dependency package to the pubspec.yaml file if you import it will show package not found an error.

import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';

Use the example code to implement Date Time Picker functionality for Multi-language in Flutter:

In below example code we are creating the date time picker functionality for the Chinese language by selecting

locale: LocaleType.zh
using the above code we are getting the Chinese country time

FlatButton(
onPressed: () {
DatePicker.showDatePicker(context,
showTitleActions: true,
minTime: DateTime(2018, 3, 5),
maxTime: DateTime(2019, 6, 7), onChanged: (date) {
print('change $date');
}, onConfirm: (date) {
print('confirm $date');
}, currentTime: DateTime.now(), locale: LocaleType.zh);
},
child: Text(
'show date time picker (Chinese)',
style: TextStyle(color: Colors.blue),
));

Custom Date Time Picker for flutter:

To customize your own style of date time picker, there is a class called CommonPickerModel, every date time picker class extended from this class, and write your custom code here and then pass this model to showPicker method, so your own date time picker will appear here, it is very easy, and you customize the date time picker according to your requirements.

Using CommonPickerModel class we can Implementers the following three methods:

DatePickerModel
DateTimePickerModel
TimePickerModel

Use the above three methods or one of three methods to customize data time picker in Flutter.

The complete code for Flutter Date Time Picker for Multi-Language:

Copy and Paste below code into your main.dart file

main.dart

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

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

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new HomePage(),
);
}
}

class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Datetime Picker'),
),
body: Center(
child: Column(
children: [
FlatButton(
onPressed: () {
DatePicker.showDatePicker(context,
showTitleActions: true,
minTime: DateTime(2018, 3, 5),
maxTime: DateTime(2019, 6, 7),
theme: DatePickerTheme(
backgroundColor: Colors.blue,
itemStyle: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
doneStyle:
TextStyle(color: Colors.white, fontSize: 16)),
onChanged: (date) {
print('change $date in time zone ' +
date.timeZoneOffset.inHours.toString());
}, onConfirm: (date) {
print('confirm $date');
}, currentTime: DateTime.now(), locale: LocaleType.en);
},
child: Text(
'show date picker(custom theme &date time range)',
style: TextStyle(color: Colors.blue),
)),
FlatButton(
onPressed: () {
DatePicker.showTimePicker(context, showTitleActions: true,
onChanged: (date) {
print('change $date in time zone ' +
date.timeZoneOffset.inHours.toString());
}, onConfirm: (date) {
print('confirm $date');
}, currentTime: DateTime.now());
},
child: Text(
'show time picker',
style: TextStyle(color: Colors.blue),
)),
FlatButton(
onPressed: () {
DatePicker.showDateTimePicker(context, showTitleActions: true,
onChanged: (date) {
print('change $date in time zone ' +
date.timeZoneOffset.inHours.toString());
}, onConfirm: (date) {
print('confirm $date');
},
currentTime: DateTime(2008, 12, 31, 23, 12, 34),
locale: LocaleType.zh);
},
child: Text(
'show date time picker (Chinese)',
style: TextStyle(color: Colors.blue),
)),
FlatButton(
onPressed: () {
DatePicker.showDateTimePicker(context, showTitleActions: true,
onChanged: (date) {
print('change $date in time zone ' +
date.timeZoneOffset.inHours.toString());
}, onConfirm: (date) {
print('confirm $date');
}, currentTime: DateTime(2008, 12, 31, 23, 12, 34));
},
child: Text(
'show date time picker (English-America)',
style: TextStyle(color: Colors.blue),
)),
FlatButton(
onPressed: () {
DatePicker.showDateTimePicker(context, showTitleActions: true,
onChanged: (date) {
print('change $date in time zone ' +
date.timeZoneOffset.inHours.toString());
}, onConfirm: (date) {
print('confirm $date');
},
currentTime: DateTime(2008, 12, 31, 23, 12, 34),
locale: LocaleType.nl);
},
child: Text(
'show date time picker (Dutch)',
style: TextStyle(color: Colors.blue),
)),
FlatButton(
onPressed: () {
DatePicker.showDateTimePicker(context, showTitleActions: true,
onChanged: (date) {
print('change $date in time zone ' +
date.timeZoneOffset.inHours.toString());
}, onConfirm: (date) {
print('confirm $date');
},
currentTime: DateTime(2008, 12, 31, 23, 12, 34),
locale: LocaleType.ru);
},
child: Text(
'show date time picker (Russian)',
style: TextStyle(color: Colors.blue),
)),
FlatButton(
onPressed: () {
DatePicker.showDateTimePicker(context, showTitleActions: true,
onChanged: (date) {
print('change $date in time zone ' +
date.timeZoneOffset.inHours.toString());
}, onConfirm: (date) {
print('confirm $date');
},
currentTime: DateTime.utc(2019, 12, 31, 23, 12, 34),
locale: LocaleType.de);
},
child: Text(
'show date time picker in UTC (German)',
style: TextStyle(color: Colors.blue),
)),
],
),
),
);
}
}

Congratulations You Have Learned Creating Date Time Picker Functionality for multi-language….!!!

If It Is Helpful Share It With Your Friends….!!!

PrevNext