How to make Flutter Web App to hide Address Bar and Tab Bar while scrolling down like HTML web pages do? - flutter-web

Question

Is it possible to make Flutter Web App to behave more like web page in respect of hiding browser assets during scrolling?
Mobile browsers hide address bar and tab bar while scrolling down web pages - this makes more room for content while these browser elements are likely not needed.
For Flutter Web App it looks like that:
White for standard HTML page:
One more thing:
To connect with development web server from mobile device over the local network:
flutter run -d web-server --web-hostname 0.0.0.0 --web-port 5000
(for me it works only with actual local IP instead of zeros)
Screens above were made with some dummy code:
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,
),
],
),
),
),
);
}
}
(I'm not including HTML -any web page behaves the desired way :-)
And just for the case: I'm aware that problem does not persist if user decides to "install" PWA generated by Flutter - I need solution for ad-hoc use case (i.e. mobile landing page).
I have tried:
import 'dart:html' as html;
void main() {
runApp(MyApp());
html.window.scrollTo(0, 0);
html, body {
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
#app {
height: 100vh;
overflow-y: scroll;
}
Not much of Web Dev to try to inject some JS on top of Flutter :-)