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?

score 25 · Answer 1 · answered Jan 07 '20 at 15:22

25

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

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

answered Jan 07 '20 at 15:22

Shekar Mudaliyar

446
4
4

1

This is not allowed anymore: https://dart-lang.github.io/linter/lints/avoid_web_libraries_in_flutter.html – Radek May 26 '20 at 09:11
2

https://pub.dev/packages/universal_html is a good option. – Philipp Cherubim Apr 05 '21 at 12:23
@Radek this is exactly the case where you can use a html import. – Razvan Cristian Lung Dec 10 '21 at 15:30
is there a way to not use html import for this? – Jolzal Oct 17 '22 at 13:54

MickaelHrndz · Accepted Answer · 2020-11-13T15:23:54.713

8

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.

edited Nov 13 '20 at 15:23

answered Jan 04 '20 at 05:30

MickaelHrndz

3,604
1
13
23

1

I am using named routes but browser refresh still does not reload current active page – Ian Pinto Mar 05 '20 at 06:53
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. – Abdullah Khan Aug 23 '20 at 19:08
2

In my case the app gets reloaded entirely, even using named routes. Any solutions so far? – atereshkov Nov 13 '20 at 12:45
I edited my answer to include an article on how to use URL parameters. – MickaelHrndz Nov 13 '20 at 15:27

eko · Answer 3 · 2023-01-30T21:44:43.547

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();

score 1 · Answer 4 · answered Oct 27 '20 at 08:18

1

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.

answered Oct 27 '20 at 08:18

Technical Radar

89
5

Flutter Web - How to reload currently Active Page

4 Answers4

Linked