https://github.com/ipcjs/safe_area_insets

https://github.com/ipcjs/safe_area_insets

Last synced: 10 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/ipcjs/safe_area_insets
• Owner: ipcjs
• License: bsd-3-clause
• Created: 2022-12-08T15:20:21.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-02-01T03:18:06.000Z (over 2 years ago)
• Last Synced: 2025-07-11T21:37:46.559Z (11 months ago)
• Language: Dart
• Size: 200 KB
• Stars: 5
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 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](example/web/index.html) to prevent flickering during loading.

```html

  

```

Use `WebSafeAreaInsets` to handle safe area, See [example](example/lib/main.dart) for more detail.

```dart

  Widget build(BuildContext context) {

    return MaterialApp(

      home: const HomePage(),

      builder: (context, child) {

        child ??= const SizedBox();

        return kIsWeb ? WebSafeAreaInsets(child: child) : child;

      },

    );

  }

```

![screenshot-example](doc/screenshot-example.png)

## Related Reading

- [[web][PWA] SafeArea Widget does not work on iOS Safari PWA · Issue #84833 · flutter/flutter](https://github.com/flutter/flutter/issues/84833#issuecomment-890540239)

- [Designing Websites for iPhone X | WebKit](https://webkit.org/blog/7929/designing-websites-for-iphone-x/)

- [zhetengbiji/safeAreaInsets: Use javascript to get the safe area insets.](https://github.com/zhetengbiji/safeAreaInsets)