Flutter, one project for Mobile and web - flutter

Can I use one Flutter project to create web and mobile applications? if yes, How will I go about it, since some libraries that work with mobile might not work with the web? And how can I build a project such that the web pages do not fall into the production mobile app.

You can choose to limit your project to only the web platform or the mobile platform when building the project. Also, you can choose not to use any external library in your project.

If you want to check the platform that your app is run you can use the class Platform.
But be careful this class can be problematic for web so you should you kisweb
if (kisweb) {
// you're on web
}

Yes, you can but the question is should you? as flutter is now capable to support multiple platforms with a single code base. but the problem arises when you have to implement some complex functionalities into it and there are few packages that support all platforms that you want to deploy. So to tackle this either you have to ditch the idea to implement those functionalities or write your own package.

Related

Is it possible to run flutter module on Web

I have existing flutter module being used in native Android/iOS apps.Flutter module is used as I wanted to embed it in existing native Android/iOS app. After searching on internet I came to know that module cannot be used as it is to support web platform.
I am thinking about below approach
Creating new flutter app and copy existing module code (Not a good solution as per me because I will have to maintain 2 repos one for module(to support native platforms) and one for web app support).
Queries:
Has anyone came across such issue and what are the possible ways to
handle this scenario?
Can I embed this flutter app(not flutter module) in native apps?Will this create any
problem?
Please suggest possible solutions?

Build SDK in Flutter/Dart and use it from Java / Web

We are building an application in Flutter, which is composed of an SDK (no UI Code) and a Flutter UI, using the SDK.We have now the requirement to provide the SDK for other, native target platforms (iOS, Android, Web, JVM) and use it in existing applications. As far as we have understood this is possible for iOS and Android. But is this also possible (or planned) for Web and JVM? We simply want to minimise the effort to build the similar SDK in various platform specific technologies.
Thank you!
You can build your Flutter app targeting web https://docs.flutter.dev/development/platform-integration/web/faq#is-the-web-version-of-flutter-ready-for-production
If you want to target the Desktop then check https://docs.flutter.dev/development/platform-integration/desktop to see if it meets your requirements.

FLUTTER WEB: How can we have a single codebase for the Flutter app & Web?

We have a single codebase for Android & iOS in Flutter.
We tried to use the same codebase for Web in Flutter too, but it hadn't gone well.
As of some libraries/plugins, currently unsupported by Flutter SDK.
To mitigate these issues, we are maintaining two separate repositories, one for Android-iOS and other for Web.
Also, to add up here, for separate repositories because each Flutter product has a unique pubspec.yaml file. Now there are a few plugins that are currently supported in App but Not yet on Flutter Web, namely Awesome Notifications, Clevertap plugin, etc.
Integrating those plugins on the web, stops the web to run. So keeping the same codebase for both is getting technically complicated as the app has many many functions.
It takes so much time in simultaneously testing, debugging and resolving issues in Web.
So, how we can maintain same code for all platforms i.e., Android, iOS & Web, without doing it in other repository for Web and gaining advantage in streamlining our codebase into one for all platforms?
For Ex. If I commented the package awesome_notifications for Web in pubspec file, the issue arises (as shown in the screenshot) in code wherever we used its functionalities.
For successfully working on both Mobile & Web, are there any methods available we can use packages for both (Mobile & Web)?
Ideally you’d want to use a single codebase to host both the web and mobile versions, to minimise code maintenance and improve efficiency. To do this, you’ll need to be able to find the platform the code is running on, so that code can be called programmatically.
You can use the constant kIsWeb to check if the application is compiled for the web, and you can then use that condition to only run platform-specific code (such as the awesome_notifications package) if you’re on a platform that supports it. That way you’ll still be able to import the required packages, but only call them when the app is running on the mobile version of your app.
That should allow you to condense your codebase into one repository without sacrificing any functionality that may not work across all platforms.

Iconic's ability to support complex web applications

Ionic was built with mobile in mind - creating a good mobile experience using web technologies. You start out with a web app, so there is the possibility to use it for all 3 platforms. However I’ve never seen anything that resembles a complex web application that uses iconic for both the web and mobile. Will it support the ability to use 3rd party controls such as complex grid controls that may only be used on the web and not in the mobile apps. I’m trying to decide if we use ionic just for mobile and have a completely separate code base for our web application. Any invites would be greatly appreciated!
Basically everything that works on the web also works on mobile devices built with Ionic.
Ionic creates a WebView where javascript code runs. you can use capacitor or cordova to manage native functionality.
So if you have web developers you can do anything you could do as "Mobile Web" but in an app.
Now you can also choose whether to use react, angular or vue.
For example using Ionic with react you can use the VirtualDom and develop exactly as if you were using react on the web.
Instead, using for example React Native you will be forced to use a set of react components (or write new ones) but you will not have the VirtualDom available.
However you can also integrate native code, which Ionic doesn't support.
There are a lot of articles online that cover the subject by comparing competitors:
From Ionic
So yes, you can use all javascript libraries!

Ionic : create web app and native apps with same code?

I'am about to start learning ionic to create a project for web and mobile.
What i want is : writing code once, and having a classic website and an iOS and Android native apps.
The design is different between website and apps, so it can't just be responsive, it kinda must have different html for different platforms.
Is this possible with this version of ionic or should i create two different projects for web and apps ?
Thank you!
First of all, Ionic does not create native apps for iOS and Android, they are hybrid apps.
That being said yes, there is a way to achieve what you want but it probably isn't the best way. Ionic build does produce a plain web project inside a www/ folder which you can deploy as a website.
That however is probably not the best option if you want a great website, as web and mobile app design is quite different.
Ionic already creates hybrid applications, i would not use it as a tripartite technology and rather create a separate project for a web application.