safe_area_insets 0.1.3

Use Dart to get the `safe-area-insets` on Web platform.

safe_area_insets

Use Dart to get the safe-area-insets on Web platform.

Usage

It is recommended to add this line in index.html to prevent flickering during loading.

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

Use WebSafeAreaInsets to handle safe area, See example for more detail.

  Widget build(BuildContext context) {
    return MaterialApp(
      home: const HomePage(),
      builder: (context, child) {
        child ??= const SizedBox();
        return kIsWeb ? WebSafeAreaInsets(child: child) : child;
      },
    );
  }

Related Reading

• [web][PWA] SafeArea Widget does not work on iOS Safari PWA · Issue #84833 · flutter/flutter
• Designing Websites for iPhone X | WebKit
• zhetengbiji/safeAreaInsets: Use javascript to get the safe area insets.