How to Open External Link in New or Same Tab in Flutter Web

In this guide, you are going to learn to open an external or any link in a new tab, same tab, and in the new window in Flutter Web. There are plenty of packages out there to perform this, but we are going to show to open links without any package. 

If you are looking for opening the app page route in a new tab then look into this: How to open Page Route in New Tab in Flutter Web

in your script.
import 'dart:html' as html;
html.window.open('https://www.fluttercampus.com',"_self");
//html is from import 
html.window.open('https://www.fluttercampus.com',"_blank");
html.window.open('https://www.fluttercampus.com',"_blank", 'location=yes');
// add more paramerter to options like 'location=yes,height=570,width=520,scrollbars=yes,status=yes'

import 'package:flutter/material.dart';
import 'dart:html' as html;

void main() {
  runApp(MyApp()); 
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Hello World",
        home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    return Scaffold( 
        appBar: AppBar( 
          title: Text("Open External Link"),
          backgroundColor: Colors.redAccent,
        ),
        body: Container( 
          child:Center( 
            child: ElevatedButton( 
              onPressed: (){
                  html.window.open('https://www.fluttercampus.com',"_blank");
              },
              child: Text("Open Flutter Campus"),
            ),
          )
        )
    );
  }
}

In this way, you can open link in a new tab and new window using Flutter Web

2 Comments on this Article

Fariza

How can we do the same but for navigating to new screen in flutter web?

1 year ago


Please Wait...