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 interesting, and if you have any questions, comments, or improvements, feel free to drop a comment. Enjoy your Flutter development journey :D

If you liked it, a like would be awesome, and if you really liked it, a cup of coffee would be great.

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. Many times in an application you would have a need to store files, temporarily or even permanently. For this, you are…

Bringing localization into your Widget testing The more accurate you make your test, the higher the quality of the test itself.