How to migrate flutter mobile app to flutter web - flutter

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?

Steps to follow while migration to Flutter Web:
update build config according to the migration guide
replace all flutter imports with flutter_web
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)
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.

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.

Beginning with Flutter v1.10, you can migrate your Flutter app to Web.
Enable web support by running:
flutter config --enable-web
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 .
Check connected devices by running:
flutter devices
Run your app in chrome by running:
flutter run -d chrome

Related

I get this error in my flutter app. migrate this app to the V2 embedding

I get this error in my Flutter Project,
C:\src\flutter\bin\flutter.bat --no-color pub get
Running "flutter pub get" in source_code... 34.3s
This app is using a deprecated version of the Android embedding.
To avoid unexpected runtime failures, or future build failures, try to migrate this app to the V2 embedding.
Take a look at the docs for migrating an app: https://github.com/flutter/flutter/wiki/Upgrading-pre-1.12-Android-projects
The plugin firebase_core requires your app to be migrated to the Android embedding v2. Follow the steps on https://flutter.dev/go/android-project-migration and re-run this command.
Process finished with exit code 1
Flutter Embedding Error
Since Flutter 1.12 the way how Flutter plugins communicate with the native Android side has been improved. Allowing plugins to better integrate with the native Android lifecycle.
Some plugins support both the new and the old structure, however many plugins (like firebase_core) dropped support for the legacy structure to ensure optimal integration with the Android system.
Apps created using Flutter 1.12 and higher automatically generate the correct Android integration logic, however Flutter applications created with an earlier version of Flutter need to be manually migrated. There are two options to fix this for your app:
The easiest solution is to delete the android folder in your project and let Flutter (using Flutter 1.12 or higher) recreate it for you by running the following command in the root folder of the Flutter project: flutter create --platform=android . (don't forget the . at the end of the command). You should only do this if you haven't made any custom changes to the Android code and of course make sure to make a backup first.
The more safe option is to manually migrate the Android project using the instructions provided on the GitHub Wiki page mentioned in the error message.
When following the instructions on the GitHub Wiki page make sure to keep an eye on all the details. Personally I forgot to update the <application android:name="MyApp" to the recommended <application android:name="${applicationName}" which resulted in the same error you are reporting.
What helped me was to create a new "dummy" application with the latest version of Flutter (for example flutter create --platforms=android test_app) and compare the files in the Android folder with the files of my current App and make changes where necessary.

how to create flutter project only for only android and IOS even if web support is enabled?

I wanted to create flutter project targeted to only android and IOS. But my web support is enabled in flutter.
I don't want to go back to stable channel to do that. Anyone can help me out in doing this in beta channel itself
You can disable web support in flutter config. use flutter config --no-enable-web to disable and flutter config --enable-web to enable. There are several other options as well which you can explore by running flutter config.
Disable platforms in all projects
flutter config --no-enable-[platform-name], eg: flutter config --no-enable-web.
Disable platforms in a specific project
New project: flutter create --platform ios,android
Existing project: Edit the <project-root>/.metadata file, delete unwanted platforms under migration -> platforms. Only leave root and platforms you need. I can't find this documented anywhere so the method can stop working anytime, as of Feb. 2023 it worked for me.

How to use both Flutter stable and dev SDK on the same machine?

I'm working with Flutter to make a Mobile App using the stable Flutter SDK release. But I also want to try Flutter Desktop and Flutter Web that are not part of the Flutter stable channel yet, but are present on the Flutter dev channel.
My question is... How can I try Flutter Desktop and Flutter Web without override the Flutter stable release on my machine?
You'll need to setup alias to switch between different environments easily.
See here a detailed article for that.
I found this Dart package called Flutter Version Management that does exactly what I want.
As the docs says:
Flutter Version Management: A simple cli to manage Flutter SDK versions.
Features:
Configure and use Flutter SDK version per project
Ability to install and cache multiple Flutter SDK Versions
Fast switch between Flutter channels & versions
Dynamic SDK paths for IDE debugging support.
Version FVM config with a project for consistency across teams and CI environments.
Set global Flutter version across projects
https://github.com/leoafarias/fvm
Now I just need to add FVM_HOME/default/bin to the PATH and FVM will take care of everything...
Two solutions
Put the installation files in two different directories one with stable and the other dev and add one of them to the path then you can change the path variable when needed to use the other channel.
Put the flutter repository file in two different directories one with stable and the other with dev then,
add the first installation to the path then add an alias to point to the second installation directory.

Web capability with flutter package: mapbox_gl

The mapbox gl package page lists it as suitable for web applications (mapbox_gl).
I tried running the example as a web application, but I encounter the error Error creating mapbox_gl_example|lib/move_camera.ddc.dill
Error creating kernel summary for module:mapbox_gl_example|lib/move_camera.ddc.dill
.
So, my question is, is the flutter package mapbox_gl actually able to be run as a web application as the tags "FLUTTER ANDROID IOS WEB" suggest (is there something I must configure), or is it really not web capable as may be indicated by the fact that the actual description mentions nothing of web capability?
Update: The mapbox_gl flutter plugin now has web support merged into master on Github. If you don't want to wait until web support is released to pub.dev, you can depend on the Github repo directly with this dependency in pubspec.yaml:
mapbox_gl:
git:
url: git://github.com/tobrun/flutter-mapbox-gl.git
Outdated answer: Unfortunately, it doesn't support web yet (although PRs are welcome if you want to contribute). The reason it was listed as supporting web (like many other plugins) was that flutter changed the way plugins declare their supported platforms in the pubspec.yaml file. The mapbox_gl package has since been updated on pub.dev and now correctly shows that it only supports Android and iOS.

How can I import dependencies in flutter web?

I'm setting up a new flutter-web application but I can't add dependencies that I could do in flutter.
for example I want to add font-awesome-flutter to the project but get this error!
font_awesome_flutter: 8.5.0
Because font_awesome_flutter >=8.0.0 depends on flutter any from sdk which is forbidden, font_awesome_flutter >=8.0.0 is forbidden.
So, because salema depends on font_awesome_flutter 8.5.0, version solving failed.
since flutter-web is not still stable and its in technical stage, a simple way for using library in flutter-web which has been working for me is to add the library resources manually. you just need to copy everything inside the lib folder of the library in your own project.
in order to access the library's resources go to https://pub.dev/flutter and search for the library you want and then find the library's github repo in the about section.
flutter_web does not have a plugin system yet. Temporarily, we provide
access to dart:html, dart:js, dart:svg, dart:indexed_db and other web
libraries that give you access to the vast majority of browser APIs.
However, expect that these libraries will be replaced by a different
plugin API.
Source:
https://github.com/flutter/flutter_web/blob/master/README.md
In short, Flutter dependencies are not supported by Flutter Web at this time.