system_date_time_format_hook 1.2.0 system_date_time_format_hook: ^1.2.0 copied to clipboard
A flutter hook for system_date_time_format plugin for getting date and time format patterns from device system settings.
A flutter hook for system_date_time_format plugin
Why system_date_time_format_hook? #
Flutter does not support retrieving date and time format patterns based on the user's system
settings out of the box. That's why system_date_time_format
plugin was created.
However, if you already know and use flutter_hooks in your project you can use system_date_time_format_hook
to get
date and time format patterns for consistent formatting in your Flutter app with ease:
Example:
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:system_date_time_format_hook/system_date_time_format_hook.dart';
class App extends HookWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
final patterns = useSystemDateTimeFormat();
final datePattern = patterns.datePattern;
final mediumDatePattern = patterns.mediumDatePattern; // Not on Windows & Linux
final longDatePattern = patterns.longDatePattern;
final fullDatePattern = patterns.fullDatePattern; // Not on Windows & Linux
final timePattern = patterns.timePattern;
print(datePattern); // e.g. "M/d/yy"
print(mediumDatePattern); // e.g. "MMM d,y"
print(longDatePattern); // e.g. "MMMM d,y"
print(fullDatePattern); // e.g. "EEEE, MMMM d, y"
print(timePattern); // e.g. "HH:mm"
return const MaterialApp(
home: Scaffold(),
);
}
}
Note
system_date_time_format_hook
will automatically sync date & time format patterns even if user changes them in the device system settings while your app is running.
Web #
In order to use this plugin on web app you need to add system_date_time_format.js
script to your index.html
:
<src="https://cdn.jsdelivr.net/gh/Nikoro/system_date_time_format@main/web/system_date_time_format.min.js"></script>
index.html
<!DOCTYPE html>
<html>
<head>
<!--...-->
<src="https://cdn.jsdelivr.net/gh/Nikoro/system_date_time_format@main/web/system_date_time_format.min.js"></script>
</head>
<body>
<!--...-->
</body>
</html>