system_date_time_format_hook 0.1.0 copy "system_date_time_format_hook: ^0.1.0" to clipboard
system_date_time_format_hook: ^0.1.0 copied to clipboard

A hook for system_date_time_format plugin

A hook for system_date_time_format plugin

Pub Package Build Status Code Coverage MIT License Android support ✓ iOS support ✓ macOS support ✓ windows support ✓ linux support ✓ web support ✓


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 timePattern = patterns.timePattern;

    print(datePattern); // e.g. "M/d/yy"
    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>