How to open Page Route in New Tab in Flutter Web

In this example, you will learn how to open a new page or screen route in a new tab in Flutter Web. You can easily open a new external link in a new tab in Flutter Web, but opening the native page or route is tricky.

Step 1: Create Different Pages Routes:

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("This is Home Page"),
             backgroundColor: Colors.deepPurpleAccent,
          ),
          body: Container(
              padding: EdgeInsets.all(30),
              child: Column(
                 children: [
                    ElevatedButton(
                      onPressed: (){
                            html.window.open('/#/about',"_self");
                      }, 
                      child: Text("Open About Page in Same Tab")
                    ),

                    Padding(padding: EdgeInsets.all(20)),

                    ElevatedButton(
                      onPressed: (){
                            html.window.open('/#/about',"_blank");
                      }, 
                      child: Text("Open About Page in Same Tab")
                    )
                 ],
              ),
          ),
       );
  }
}

class About extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title:Text("This is About Page")
       ),
     );
  }

}

Here, we have two pages Home() and About().

Step 2: Define Routes in MaterialApp:

MaterialApp(
  initialRoute: "/",
  routes: {
    "/":(context)=>Home(),
    "/about":(context)=>About()
    //add more pages here
  },
);

Here, we have mentioned different routes in MaterialApp widget, these are also called Named routes.

Step 4: Open New Page Route in New Tab:

import 'dart:html' as html;

To open in the Same Tab:

html.window.open('/#/about',"_self");

To open in New Tab:

html.window.open('/#/about',"_blank");

Read this also: How to Open External Link in New or Same Tab in Flutter Web

Full App Example:

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(
      initialRoute: "/",
      routes: {
        "/":(context)=>Home(),
        "/about":(context)=>About()
        //add more pages here
      },
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("This is Home Page"),
             backgroundColor: Colors.deepPurpleAccent,
          ),
          body: Container(
              padding: EdgeInsets.all(30),
              child: Column(
                 children: [
                    ElevatedButton(
                      onPressed: (){
                            html.window.open('/#/about',"_self");
                      }, 
                      child: Text("Open About Page in Same Tab")
                    ),

                    Padding(padding: EdgeInsets.all(20)),

                    ElevatedButton(
                      onPressed: (){
                            html.window.open('/#/about',"_blank");
                      }, 
                      child: Text("Open About Page in Same Tab")
                    )
                 ],
              ),
          ),
       );
  }
}

class About extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title:Text("This is About Page")
       ),
     );
  }

}

Output Screenshot:

This is the example run in Google Chrome.

In this way, you can open a new page route in a new tab in Flutter web.