Flutter Web - How to reload currently Active Page

Question

I am using Flutter for developing a website. Everything is working fine with Flutter except when it comes to reloading the page. When I press the refresh button in the browser, the whole web app gets reloaded.

For example, if I have navigated to four pages from the initial page, when I press the refresh button from the fourth page, the initial page gets loaded and I'll have to manually browse all the way to the fourth page again.

Is there any way to load the currently active page in Flutter?

Solution 1

Check out navigation with named routes as it maps URLs seamlessly when using Flutter Web.

EDIT : If you want URL parameters (like an id, a token...), check out this article.

Solution 2

Or you can just use this as it refreshes the whole window natively

import 'dart:html' as html;
html.window.location.reload();

Solution 3

import 'dart:html' as html;

html.window.location.reload();

as this is not allowed according to

https://dart-lang.github.io/linter/lints/avoid_web_libraries_in_flutter.html

this is how i have resolved my issue:

import this package

https://pub.dev/packages/universal_html/install

import whereever you want to use

import 'package:universal_html/html.dart' as html;

and you can use it like this

html.window.location.reload();

Solution 4

Use Navigator to push to the same page. .ie. If CurrentPage() is your page that needs to be refreshed then use:

Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) => CurrentPage()));

This will reload the page.

View more solutions

Comments

[Ian Pinto]

I am using named routes but browser refresh still does not reload current active page

[Radek]

This is not allowed anymore: dart-lang.github.io/linter/lints/…

[Abdullah Khan]

named routes work fine when we didn't pass data from the previous page or didn't need to remember on which tab we were etc, otherwise, it does not work.

[atereshkov]

In my case the app gets reloaded entirely, even using named routes. Any solutions so far?

[MickaelHrndz]

I edited my answer to include an article on how to use URL parameters.

[Philipp Cherubim]

pub.dev/packages/universal_html is a good option.

[Razvan Cristian Lung]

@Radek this is exactly the case where you can use a html import.