How do I open an external url in flutter web in ne

Question

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

Answer 1

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

Answer 2

I think you want this:

import 'dart:js' as js;

.
.
.

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

Answer 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.

Answer 4

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

Answer 5

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.