Flutter web url navigation

Question

I would like to know how can I navigate to a URL in my Flutter web app.

Currently am using the Navigator.of(context).push(MaterialPageRoute(...)); and I only get localhost:5354/#/ in the address bar.

Also I would like to know how I can I navigate to a particular URL directly by just pasting the URL into the browser's addresses bar.

I think you are looking for url_launcher. Check it out at https://pub.dev/packages/url_launcher — shubhgkr, Dec 30 '19 at 11:05

score 14 · Accepted Answer · answered Dec 30 '19 at 14:10

You need to use named routes instead of directly using classes to routes. You can use this package named fluro https://pub.dev/packages/fluro or else you can use default navigation that flutter provides.

with fluro you can do something like this

main.dart

import '../routes/routes.dart';


void main() {
  FluroRouter.setupRouter();
// run app
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      onGenerateRoute: FluroRouter.router.generator,
    );
  }
}

routes.dart

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

class FluroRouter {
  static Router router = Router();
  static Handler _storyhandler = Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) =>
          HomeView(id: params['id'][0]));
  static Handler _homehandler = Handler(
      handlerFunc: (BuildContext context, Map<String, dynamic> params) =>
          Home());
  static void setupRouter() {
    router.define(
      '/',
      handler: _homehandler,
    );
    router.define(
      '/story/:id',
      handler: _storyhandler,
    );
  }
}

you can also define routes with query parameters.

Hope this helps!

I tested both methods and I've only succeeded with Fluro (even if the official package page doesn't mention web comptaibility). Oddly, I get an unexpected error using the default Flutter named routes navigation on web ¯\_(ツ)_/¯ — rootasjey, Feb 05 '20 at 22:57
@rootasjey strange that using onGenerateRoute fails to add routes to the URL but using routes adds it. :| — Jagadish Nallappa, Jun 30 '21 at 18:05

score 2 · Answer 2 · answered Dec 08 '21 at 15:10

2

you must use of Navigator v2 for Web.

see more info: here and here

answered Dec 08 '21 at 15:10

Ali Bagheri

3,068
27
28

Flutter web url navigation

2 Answers2