Adding Flutter web to an existing application

As it stands now flutter web is not ready for production use, to get started however they have provided the required steps at the Flutter Docs.

One thing os note is, and possibly the biggest hindrance in more mature codebase would be the fact that dart:io does not yet support web and you would need to be using dart:html.

There is a way to do this though, as dart does support conditional imports, but the size of your codebase is going to impact the level of refactoring that needs to be done in order to achieve this.

For starters, you would no longer be able to directly reference dart:io in your codebase. You would then not be able to use HttpClient you would need to use Dio or http from http/http.dart.

To control the “switch” between mobile and web you can create a delegation service, a set of files you can then use to define the methods you need to use that are available form both dart:io and dart:html.

You are going to need to create 4 files, I called them: platform_delegate_main.dart, platform_delegate_web.dart, platform_delegate_mobile.dart and plaform_delegate.dart.

In this example, I am going to use a helper that I used to wrap Platforms so that I could maintain the testability of functions that needed access to platforms.

I have an abstract class SupportedPlatforms:

abstract class SupportedPlatforms {
 bool isAndroid();
 bool isIos();
}

The platform_delegate.dart simply handles the export and the conditions for which platform you are using.

// The export file
// platform_delegate.dart
export 'platform_delegate_main.dart'
  if (dart.library.js) 'platform_delegate_main_web.dart'
  if (dart.library.io) 'platform_delegate_main_mobile.dart';

Each file then needs to contain the same methods/classes.

// platform_delegate_main.dart
import 'supported_platform_helpers';
class SupportedPlatformsImp implements SupportedPlatforms {
   @override
   bool isAndroid() => false;
   @override
   bool isIos() => false;
}
// platform_delegate_main_web.dart
import 'dart:html' as html;
import 'supported_platform_helpers';
class SupportedPlatformsImp implements SupportedPlatforms {
   @override
   bool isAndroid() => false;
   @override
   bool isIos() => false;
}
//platform_delegate_main_mobile.dart
import 'dart:io' as io;
import 'supported_platform_helpers';
class SupportedPlatformsImp implements SupportedPlatforms {
   @override
   bool isAndroid() => Platform.isAndroid;
   @override
   bool isIos() => Platform.isIOS;
}

When using functions you could either return an acceptable default or throw an UnsupprtedError.

void myFunction() => throw UnsupportedError('myFunction is Unsupported')

Then at implementation time, you will be importing platfomr_delegate.dart

import 'platform_delegate.dart';
void main() {
  if (SupportedPlatform().isIos()) {
    // Do stuff for apple...
  }
}

Here I can still maintain platform-specific conditions while supporting web and mobile, as on Android or Web isIOS() will safely return false and we are no longer worried about dart:io preventing flutter web from functioning.

I hope you found this useful, and if you have any questions, comments, or improvements, feel free to drop me a comment.

Thanks for reading.

If you are interested in unit testing for Flutter, maybe one of these could be a useful read.

Widget testing when your app needs access to directories.

Bringing localization into your Widget testing

Wyzetalk Tech

Widget testing passed in function

About Wyzetalk
Founded in South Africa and headquartered in The Netherlands, Wyzetalk is a leading global employee experience company that offers a mobile-first digital solution connecting large organisations with their dispersed, frontline workforce to improve communication, unleash innovation, and boost business performance. Since launching in 2012, the company has grown in revenue by more than 100% per annum. With a presence in 18 countries across five continents, today there are 650 000 employees making use of the Wyzetalk platform through clients in the Mining, Retail, FMCG, Manufacturing, Energy, Automotive and Shipping sectors.

Website: https://www.wyzetalk.com/