How to migrate flutter mobile app to flutter web

2
votes

I have a mobile app written with flutter and i would like to convert it into a flutter_web app (integrating flutter_web is not available yet). I'm currently having problems with packages.

I have followed the instructions listed in this website https://www.codemitter.com/how-to-add-web-counterpart-in-an-existing-flutter-project/

I get the following errors

webdev could not run for this project.
You have a dependency on `cached_network_image` which is not supported for flutter_web tech preview. See https://flutter.dev/web for more details.
You have a dependency on `cloud_firestore` which is not supported for flutter_web tech preview. See https://flutter.dev/web for more details.
You have a dependency on `cupertino_icons` which is not supported for flutter_web tech preview. See https://flutter.dev/web for more details.
You have a dependency on `firebase_core` which is not supported for flutter_web tech preview. See https://flutter.dev/web for more details.
You have a dependency on `flutter` which is not supported for flutter_web tech preview. See https://flutter.dev/web for more details.
You have a dependency on `path_provider` which is not supported for flutter_web tech preview. See https://flutter.dev/web for more details.
You have a dependency on `sqflite` which is not supported for flutter_web tech preview. See https://flutter.dev/web for more details.
pub finished with exit code 78

are the flutter_web versions for the following plugins? how would one manually/automatically change such a plugin to be supported on flutter_web?

3
flutterdartflutter-web

3 Answers

3
votes

Steps to follow while migration to Flutter Web:

  1. update build config according to the migration guide

  2. replace all flutter imports with flutter_web

  3. remove all plugins that depend on native platforms (android or ios) and replace them with equivalents from dart:html or pure dart web libraries (https://pub.dev/web)

  4. use forked non-native libraries that depend on flutter framework, like this https://github.com/rrousselGit/provider/issues/82 you might need to create a fork yourself like this: https://github.com/kevmoo/provider/commit/bb739c96463347dd185331655e1d8895665172b9

Steps 1. and 2. are pice of cake. But 3. and 4. might be very paintful.

2
votes

Plugins are not yet supported on flutter_web and we don't yet have details on what the migration story will look like. Plugins which call through to native Java or Swift code will not be possible to migrate automatically. Any code which imports dart:io or dart:isolate is also unsupported and would need to be rewritten.

1
votes

Beginning with Flutter v1.10, you can migrate your Flutter app to Web.

  1. Enable web support by running:

    flutter config --enable-web

  2. Now, if you want to create a new project you can run 

    flutter create project_name

    or if you want to migrate your existing one to web, run

    flutter create .

  3. Check connected devices by running:

    flutter devices

  4. Run your app in chrome by running:

    flutter run -d chrome