05 Feb 2021

Flutter Web - the URL problem fixed!

The Problem

I love that there is an option to write code for the web without having to use CSS (the one thing I hate about web dev). Thanks to flutter, CSS is a thing of the past. With such convinence, you want to be able to build any sort of website using it. By default, flutter web has no capability for working will callbacks. This limits you from working with OAuth services or SSO systems.

Solution!

This solution is a combination of a blog by Dane Mackier and an issue reported on flutter’s github repository along with incompatibility fixes with current versions of the packages used.

Firstly, getting our versions straight

Flutter (Channel master, 1.26.0-18.0.pre.49, on macOS 11.2 20D64 darwin-x64, locale en-GB)

Although you should be fine for the most part, if you encounter any issues its a good idea to try changing your flutter channel to master. (Switching Flutter channels)

Now to the important bit

In your pubspec.yaml file, add the following under dependencies as follows:

dependencies:
  flutter:
    sdk: flutter
  fluro: ^1.7.8
  flutter_web_plugins:
    sdk: flutter

Removing the ‘#’ from the URL

http://localhost:51214/#/

Why do we have that ‘#’ ?

I seriously don’t know the reason, never found an advantage for having it.

The problem of having the ‘#’ - Flutter puts it before the ‘?’ of the query string which basically makes the query string invalid and ruins the whole point of a callback.

Create a file named configure_nonweb.dart and add the following code to it:

void configureApp() {
  // No-op.
}

Then, create a file named configure_web.dart and add the following code to it:

import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void configureApp() {
  setUrlStrategy(PathUrlStrategy());
}

Then, go to your main.dart file and add the following imports:

import 'configure_nonweb.dart' if (dart.library.html) 'configure_web.dart';
import 'fluro_router.dart';

Now, in your void main() function, add the following before your runApp:

configureApp();

This should remove the ‘#’ from your URL. If you encounter any issues, make sure to check your web/index.html file for this line in it’s <head> section.

<base href="/">

Fluro - The Routing library

Create a file named fluro_router.dart and add the following code to it:

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

class FRouter {
  static final router = FluroRouter();

  static Handler _homeHandler =
      Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
    var code = params['code']?.first;
    var state = params['state']?.first;
    print(code);
    print(state);
    return MyHomePage(
      title: "Hello World",
    );
  });
  static void setupRouter() {
    router.define("home", handler: _homeHandler);
  }
}

Then, in the main.dart file, add the following in the void main() function:

FRouter.setupRouter();

Then, add the following to the MaterialApp declaration in the root of the application:

return MaterialApp(
    title: 'Flutter Demo',
    ...
    initialRoute: 'home',
    onGenerateRoute: FRouter.router.generator,
    ...
    theme: ThemeData(

Now the page will default to load at /home.

Try going to /home?code=12343&state=abcd and check the console to see the magic!

For every new route you want to add, do the following:

Go to fluro_router.dart, add a new handler in the FRouter() class,

static Handler _homeHandler =
      Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
    // The params map will have the query parameters

    return MyHomePage(
      title: "Hello World",
    );
  });

Here, MyHomePage is the page you want to go for that route.

Then, add a new route in the setupRouter() function,

router.define("home", handler: _homeHandler);

Here, home is the route /home and _homeHandler is the handler you created earlier.

And that’s it!

You should be good to go. Please post any issues you encounter during this process and any suggestions in the discussion board below!

All the source code for this blog is available in this Github repo. You can also use this repo as a starter template for a flutter web project :)

Thank you!

SyncFire