How do I open an external url in flutter web in new tab or in same tab

28,533

Solution 1

I think you want this — dart:js enables interoperability between Dart and JS —:

import 'dart:js' as js;

// ...

FlatButton(
  child: Text('Button'),
  onPressed: () {
    js.context.callMethod('open', ['https://stackoverflow.com/questions/ask']);
  },
)

Solution 2

One simple way is to just create a button and use dart:html's window.open() method:

import 'dart:html' as html;

// ...

html.window.open('https://stackoverflow.com/questions/ask', 'new tab');

The name parameter — which I left as 'new tab' — refers to the new tab's window name, about which you can learn more from MDN's documentation.

Solution 3

https://github.com/flutter/plugins/tree/master/packages/url_launcher/url_launcher_web

url_launcher has been the solution for android and ios, recently it added support for web.

Solution 4

You can use the url_launcher plugin

Then in your code

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

void main() {
  runApp(Scaffold(
    body: Center(
      child: RaisedButton(
        onPressed: _launchURL,
        child: Text('Show Flutter homepage'),
      ),
    ),
  ));
}

_launchURL() async {
  const url = 'https://flutter.io';
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

Example taken from the package site

Solution 5

Answered here https://stackoverflow.com/a/56656885/361832

Flutter Web does not support plugins (yet), so you have to use replacements from dart:html

https://api.dartlang.org/stable/2.4.0/dart-html/Window/open.html window.open(url, 'tab');

or

https://api.dartlang.org/stable/2.4.0/dart-html/Window/location.html window.location.assign(url);

Share:
28,533
Norbert
Author by

Norbert

I am a passionate software developer who develops desktop,web and mobile(android&iOS with Flutter) software I am familiar with the following Dart Flutter Nodejs Reactjs Php mySQL Python html css

Updated on May 05, 2021

Comments

  • Norbert
    Norbert over 2 years

    I have a simple web app I have created with flutter web. I would like to know how I can open new an external url either in a new tab or in the same tab in my flutter web app. say I want to open the url https://stackoverflow.com/questions/ask