Flutter web url navigation

Issue

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.

Solution

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!

Answered By – Shekar Mudaliyar

Answer Checked By – Jay B. (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *