Flutter Web如何在iOS Safari滚动时隐藏地址栏与底部导航栏？

Hey there! I’ve wrestled with this exact headache on a couple of Flutter Web projects targeting iOS users, so I’ve got a few proven fixes to share that actually get Safari’s address bar to hide on scroll like it’s supposed to. The core issue is that Flutter renders its own scrollable areas instead of using the browser’s native scroll system—so Safari doesn’t pick up on the scroll events to trigger its auto-hide logic.

Solution 1: Sync Flutter Scroll to a Hidden Native Scroll Container #

This is the most reliable fix I’ve found. We’ll create a hidden native scrollable div in the web template, then sync Flutter’s scroll position to it to trick Safari into firing its address bar behavior.

1. Update web/index.html:
   Add a hidden scroll trigger div right before the Flutter script tag, plus a small JS function to update its scroll position:

   <!-- Add this right above <script src="main.dart.js" type="application/javascript"></script> -->
   <div id="scrollTrigger" style="position:fixed; top:0; left:0; width:1px; height:100vh; overflow-y:scroll; opacity:0; pointer-events:none;"></div>
   <script>
     function updateScrollTrigger(offset) {
       const trigger = document.getElementById('scrollTrigger');
       trigger.scrollTop = offset;
     }
   </script>
   

2. Add Scroll Listener in Flutter:
   Use dart:js to bridge Flutter’s scroll events to the native JS function. Wrap your main scrollable widget (like ListView or SingleChildScrollView) with a ScrollController and attach a listener:

   import 'dart:js' as js;
   import 'package:flutter/material.dart';
   
   class MyScrollablePage extends StatefulWidget {
     const MyScrollablePage({super.key});
   
     @override
     State<MyScrollablePage> createState() => _MyScrollablePageState();
   }
   
   class _MyScrollablePageState extends State<MyScrollablePage> {
     final ScrollController _scrollController = ScrollController();
   
     @override
     void initState() {
       super.initState();
       // Sync Flutter scroll to native trigger
       _scrollController.addListener(() {
         // Only send positive offsets to avoid weird Safari behavior
         final double safeOffset = _scrollController.offset.clamp(0.0, double.infinity);
         js.context.callMethod('updateScrollTrigger', [safeOffset]);
       });
     }
   
     @override
     void dispose() {
       _scrollController.dispose();
       super.dispose();
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: ListView.builder(
           controller: _scrollController,
           itemCount: 50,
           itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
         ),
       );
     }
   }
   

   How this works: Safari monitors native scroll positions to decide when to hide the address bar. By mirroring Flutter’s scroll to this hidden native container, we make Safari think a native scroll is happening, triggering its auto-hide logic.

Solution 2: Tweak the Viewport Meta Tag #

Sometimes Flutter’s default viewport settings can interfere with Safari’s scroll detection. Update your web/index.html viewport tag to these values:

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

The key here is viewport-fit=cover, which ensures your app occupies the full screen (including safe areas) and helps Safari properly recognize scrollable content.

Important Caveats #

• This works best for vertical scrolling. Horizontal scrolls won’t trigger Safari’s address bar hide behavior by default.
• Make sure you clamp scroll offsets to positive values—negative offsets (like overscroll bounce) can break the sync.
• Test on actual iOS devices, not just simulators—simulators sometimes have inconsistent scroll behavior.

内容的提问来源于stack exchange，提问作者Inquisitor K