如何让Flutter Web App滚动时隐藏浏览器地址栏与标签栏？

移动浏览器在向下滚动普通网页时，会自动隐藏地址栏和标签栏，为内容腾出更多显示空间——这类浏览器元素在滚动浏览时通常无需展示。但Flutter Web App默认无法实现这个效果。

效果对比 #

Flutter Web App当前表现 #

标准HTML页面表现 #

补充信息 #

• 移动端通过局域网连接开发服务器可执行以下命令：

  flutter run -d web-server --web-hostname 0.0.0.0 --web-port 5000
  

  （实际测试中，使用本地IP而非0.0.0.0才能正常生效）
• 演示所用的Flutter示例代码：

  import 'package:flutter/material.dart';
  
  void main() {
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({super.key});
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Blog Posts',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const BlogPostList(),
      );
    }
  }
  
  class BlogPostList extends StatelessWidget {
    const BlogPostList({super.key});
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: const Text('Travel Blog'),
        ),
        body: ListView(
          children: const [
            BlogPostListItem(
              title: '5 Must-Visit Destinations in Europe',
              date: 'Date',
              description:
                  'Are you planning a trip to Europe? Check out our top picks for the most breathtaking and unforgettable destinations on the continent.',
            ),
            BlogPostListItem(
              title: 'The Best Time to Visit Bali: A Season-by-Season Guide',
              date: 'Date',
              description:
                  'Bali is a popular travel destination, but when is the best time to go? We break down the pros and cons of each season to help you decide when to book your trip.',
            ),
            BlogPostListItem(
              title: 'A Guide to Sustainable Tourism in Costa Rica',
              date: 'Date',
              description:
                  'Costa Rica is known for its beautiful natural landscapes and eco-friendly tourism practices. In this blog post, we explore the country\'s efforts to preserve its environment and provide tips for travelers who want to make a positive impact.',
            ),
            BlogPostListItem(
              title: 'Exploring the Food Scene in Tokyo: A Local\'s Guide',
              date: 'Date',
              description:
                  'Tokyo is a culinary paradise, with endless options for every type of foodie. In this post, we share insider tips and recommendations from a local on where to find the best sushi, ramen, and more.',
            ),
            BlogPostListItem(
              title:
                  'The Ultimate Road Trip Itinerary: California\'s Pacific Coast Highway',
              date: 'Date',
              description:
                  'The Pacific Coast Highway is one of the most iconic road trips in the world. In this blog post, we share a detailed itinerary for a week-long journey along this scenic route.',
            ),
            BlogPostListItem(
              title: 'The Best Beaches in the Caribbean: Our Top Picks',
              date: 'Date',
              description:
                  'With crystal clear waters and white sandy beaches, the Caribbean is a paradise for beach lovers. In this post, we share our top picks for the best beaches in the region.',
            ),
            BlogPostListItem(
              title: 'Discovering the History and Culture of Marrakech',
              date: 'Date',
              description:
                  'Marrakech is a city full of history and culture, with a vibrant medina, beautiful gardens, and iconic landmarks. In this blog post, we delve into the city\'s rich past and share tips for exploring its many attractions.',
            ),
            BlogPostListItem(
              title: 'A Trekker\'s Guide to Nepal: Planning Your Adventure',
              date: 'Date',
              description:
                  'Nepal is a paradise for trekkers, with breathtaking mountain landscapes and a rich culture. In this post, we provide tips for planning your trek, including what to pack, where to go, and how to prepare for the high altitude.',
            ),
            BlogPostListItem(
              title: 'The Best Places to See Wildlife in Africa',
              date: 'Date',
              description:
                  'Africa is home to an incredible variety of wildlife, from majestic elephants and giraffes to rare species like gorillas and chimpanzees. In this post, we share our top picks for the best places to see wildlife on the continent.',
            ),
            BlogPostListItem(
              title: 'The Most Beautiful National Parks in the United States',
              date: 'Date',
              description:
                  'From Yellowstone to Yosemite, the United States is home to some of the most breathtaking national parks in the world. In this blog post, we share our top picks for the most beautiful parks in the country.',
            ),
          ],
        ),
      );
    }
  }
  
  class BlogPostListItem extends StatelessWidget {
    final String title;
    final String date;
    final String description;
  
    const BlogPostListItem({
      super.key,
      required this.title,
      required this.date,
      required this.description,
    });
  
    @override
    Widget build(BuildContext context) {
      return Container(
        margin: const EdgeInsets.only(bottom: 16),
        child: Card(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: Theme.of(context).textTheme.headline6,
                ),
                const SizedBox(height: 8),
                Text(
                  date,
                  style: Theme.of(context).textTheme.subtitle2,
                ),
                const SizedBox(height: 8),
                Text(
                  description,
                  style: Theme.of(context).textTheme.bodyText2,
                ),
              ],
            ),
          ),
        ),
      );
    }
  }
  

  （标准HTML页面无需额外代码，任意普通网页均可实现滚动隐藏浏览器组件的效果）

需求说明 #

已知将Flutter Web App安装为PWA后该问题会自动解决，但当前需要适配临时移动端落地页场景，无需安装PWA。

已尝试的无效方案 #

1. Dart代码方案：

   import 'dart:html' as html;
   
   void main() {
     runApp(MyApp());
   
     html.window.scrollTo(0, 0);
   }
   

2. CSS方案：

   html, body {
     margin: 0;
     padding: 0;
     scroll-behavior: smooth;
   }
   
   #app {
     height: 100vh;
     overflow-y: scroll;
   }
   

   因本人不熟悉Web开发，不清楚如何通过注入JavaScript解决该问题。

内容的提问来源于stack exchange，提问作者Tymoteusz Chmielewski