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;
      },
    );
  }

screenshot-example

Libraries

safe_area_insets