Blank page when open url in new tab in Flutter Web (need to refresh)

Issue

I'm building an url, in Flutter web, and open it in new tab using JS. It opens fine, but don't load the url and return a blank page. I need to load/refresh the tab manually each time.

import 'dart:js' as js;
js.context.callMethod('open', [_buildUrl(category, id)]);

String _buildUrl(String category, int id) {
    return "$_baseUrl/$category/$id"; 
}

Is it a normal behavior or did I miss something ?

Thanks in advance

Solution

Above approach is working fine on my end. Below is what I tried -

In the snippet, Method 1 is to trigger another page within the same website using Uri.base; and it is opening a new tab as expected.

import 'dart:js' as js;
import 'dart:html' as html;

Widget build(BuildContext context) {
  return Scaffold(
    body: ElevatedButton(
      onPressed: () {
        // Method 1
        js.context.callMethod('open', [_buildUrl("Grocery", 101)]);
        // Method 2 - Alternative
        //html.window.open(_buildUrl("Grocery", 101), "new tab");
      },
      child: const Text('using JS method'),
    ),
  );
}

String _buildUrl(String category, int id) {
  return "${Uri.base}$category/$id";
}

Alternatively, if its still troublesome, you can try using the window.open() method from html library in Flutter. I have mentioned it as Method 2 in above code snippet. That will also open a new tab in the same browser.

Answered By - atketan