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_hookwill 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>