Как открыть маршрут страницы в новой вкладке во Flutter Web

В этом руководстве вы узнаете, как открыть новую страницу или экранный маршрут на новой вкладке во Flutter Web. Вы можете легко открыть новую внешнюю ссылку на новой вкладке во Flutter Web, но открыть нативную страницу или маршрут сложно.

Шаг 1: Создайте различные маршруты страниц:

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")
       ),
     );
  }

}

Здесь у нас есть две страницы Home() и About().

Шаг 2: Определите маршруты в MaterialApp:

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

Здесь мы упомянули различные маршруты в виджете MaterialApp, они также называются именованными маршрутами.

Шаг 4: Откройте новый маршрут страницы в новой вкладке:

import 'dart:html' as html;

Чтобы открыть в той же вкладке:

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

Чтобы открыть в новой вкладке:

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

Пример полного приложения:

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")
       ),
     );
  }

}

Выходной снимок экрана:

Это пример, запущенный в Google Chrome.