You can find the final project here.
Up to now you have been able to create projects with Flutter that run on iOS/Android, Web and Desktop but only sharing pure dart plugins.
Flutter launched Flutter for web at Google I/O and was a temporary fork that required you to change imports from import 'package:flutter/material.dart'; to import 'package:flutter_web/material.dart';. As you can image this was really difficult for a code base as you had to create a fork and change the imports. This also meant that you could not import any package that needed on a path or depended on flutter. The time as come and the merge is complete. Now you no longer need to change the imports!
{:width="75%"}
You can use any plugin now, have a debugger, create new flutter projects with the web folder added, web plugins, and so much more..
You will need to be on the latest flutter for this to work.
{:width="75%"}
If you are pretty new to Flutter you can check out this useful guide on how to create a new project step by step.
{:width="75%"}
Create a new project named flutter_x and it should look like this:
{:width="75%"}
You can also down the starter project here.
Your code should look like this:
https://gist.github.com/dde6fbfe2252ed16f7587a761128a114
Just to make sure everything is working go ahead and run the project on iOS/Android.
{:width="75%"}
You should have the counter application running and working correctly. Now quit and run on Chrome. It should be listed as a device. You can also run from the command line flutter run -d chrome.
{:width="75%"}
You do not get hot reload yet on web so be aware of that.
This is optional but I use this structure in all my apps
https://gist.github.com/09c7829dedb135bc43555a50f55bd026
{:width="75%"}
Your project should now look like this.
Open your pubspec.yaml and import the following packages.
https://gist.github.com/6047a89e7a10838cf9a47ce92c3f9db0
You can also remove the comments generated in the pubspec.yaml
Your pubspec.yaml will now read like this:
https://gist.github.com/2435fac2b08c9dded9ab2b6d99df9bac
By default if you were to check if the device was mobile or web you will get an error at compile time when trying to import a plugin that is not meant for the platform. To get around this we will use dynamic imports.
{:width="75%"}
Create a url_launcher folder and file url_launcher.dart, mobile.dart, web.dart, unsupported.dart inside the plugins folder.
In the file url_launcher.dart add the following:
https://gist.github.com/6285511cc446eb5c77cc4825fba66bc3
This will pick the correct file at runtime and give a fallback if it is not supported.
To protect against edge cases you will need to set up a fallback for the import. In unsupported.dart add the following:
https://gist.github.com/66413da6ecd958a9104ea3c48865d1c6
The class UrlUtils and the public methods have to match all three files for this to work correctly. Always set up the unsupported first then copy the file into mobile.dart and web.dart to ensure no typos.
You should now have 3 files with the above code in each class.
In mobile.dart add the following:
https://gist.github.com/bfe64e0c04ea7a82e7eed61452a6db5e
This will open the link in safari view controller or android's default browser respectively.
In web.dart add the following:
https://gist.github.com/b36a83374e743a371ef1abd3a2468279
This will open up a new window in the browser with the specified link.
Add a button to the center of the screen. The ui/home/screen.dart should read the following:
https://gist.github.com/6db343a3be89b47eef4e88aba02f1365
Update the onPressed to the following:
https://gist.github.com/b3587ee90e599ff7f5c6ebf2362f5a07
Now when you go to import the UrlUtils it is important to import the correct URI.
{:width="75%"}
Make sure to import import 'package:flutter_x/plugins/url_launcher/url_launcher.dart'; only.
You can use the relative import if you wish.
You UI code will now read the following:
https://gist.github.com/705a1d0ae0e417cc428854138a73d064
Your app on the web should look like this:
{:width="75%"}
And when you tap the button..
{:width="75%"}
And when you run it on iOS/Android it should look like this:
{:width="75%"}
And when you tap the button..
{:width="75%"}
Congratulations! You made it :)
{:width="75%"}
Here is the final project located here.
Please reach out if you have any questions!