DEV Community

Reme Le Hane
Reme Le Hane

Posted on โ€ข Originally published at Medium on

2 1

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();
}
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

void myFunction() => throw UnsupportedError('myFunction is Unsupported')
Enter fullscreen mode Exit fullscreen mode

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

import 'platform\_delegate.dart';

void main() {
  if (SupportedPlatform().isIos()) {
    // Do stuff for apple...
  }
}
Enter fullscreen mode Exit fullscreen mode

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.


Sentry growth stunted Image

If you are wasting time trying to track down the cause of a crash, itโ€™s time for a better solution. Get your crash rates to zero (or close to zero as possible) with less time and effort.

Try Sentry for more visibility into crashes, better workflow tools, and customizable alerts and reporting.

Switch Tools ๐Ÿ”

Top comments (2)

Collapse
 
33nano profile image
Manyong'oments โ€ข

Flutter Web is stil not ready for production darn it. This was still cool .

Collapse
 
remejuan profile image
Reme Le Hane โ€ข

And the nest stable just landed and still nada

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs