I am relatively new to flutter and app development. I noticed that whenever a new flutter project is created, there are many default plugins pre-loaded into the project and this makes the app take up a minimum of 80 Mb. Could i get a summary on which plugins are actually important in order to run any app in general?
Flutter provides almost all the basic things like themeing, icons, routing etc out of the box.
You can have any other package if you need more functionality like fetching data from internet and so on.
The important thing is the size you see is the debug build which is large as it contains the VM for hot reload to work at such speed. When you build the release version it is the minimum version which goes for about <5Mb on bare-bone app.
Currently my debug app stands at around 80mb on emulator but the release version is < 6mb.
So to answer your question,
it is the debug size,not the final version
Flutter requires no extra plugin for an offline app with basic functionality. Core components + testing is provided out of the box.
Nothing useless is shipped by default,
NOTE: there is a section called dev_dependencies in pubspec.yaml which means the packages listed under this won't go into the release build and are only for development purpose.
Related
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.
To be more precise, I already have a huge app writen in Ionic and now we're considering to migrate it to flutter, but we can't rewrite it from scratch, both ionic and flutter should coexist.
So my question is: can I have a flutter app as a "host" and import / run the ionic app inside it? Something like a micro frontend.
Until now I was able to build the target ionic app and import it on the flutter app, under android folder, but it does not feels like a productive way to approach the problem.
I also googled a little bit about this integration, but did not find anything that solves this problem.
I appreciate any help on this topic.
Yes, it is possible, but very cumbersome.
I did it for a project and embedded 3 ionic apps inside flutter.
I'll not list every problem that i faced but just go through some points to give you an idea.
You will need to take care of some cordova plugins that use native code, for Android copy and paste some folders like CordovaLib,cordova and use it as a library. For iOS you must add the plugin files like *.h to the compiles list inside Xcode and create an Pod to get the cordova resources (that's the way i did)
To "launch" the app for android you need to start the cordova activity and for iOS you need to play with UINavigationController and FlutterViewController, and of course create a method channel to be possible to call it from Flutter.
For multiple apps, you have to mess inside de cordova code to get the app from the right www folder and be sure to equalize every plugin version between apps.
Some packages from flutter may clash with ionic/cordova libs
Every change you do to your ionic application it must be tested outside flutter and within it to see if there's any mismatch behavior that you didn't expect, specially when adding new plugins.
Maybe some permission issues will arrive between applications like camera or localization.
I know thats not the answer, but when searching on how to do it, i stumbled upon this question a few months ago and it still without any answer on this problem.
But my final take is that the effort of joining together all pieces using multiple languages and frameworks together with the job of maintaining this spaghetti behemoth is not worth it and you'll save yourself of a tremendous headache.
I really hope I'm doing something wrong. I've added crosswalk to a project and have had some serious app size increase. To test I've done the following.
created a new ionic project
added my app code to /www/
added ngcordova and various plugins
Ran ionic build and drop the apk onto a Genymotion emulator. The app was very slow but had a app size of 8.01mb (once installed - checked with app manager).
Then I deleted the app from the emulator
Ran ionic browser add crosswalk
Ran ionic run android which installed the correct .apk on the emulator. On checking in manage apps the app size is now 79.36mb!!! Thats a 71mb increase! Most places say 20mb at most but 71mb!!!
Can someone tell me what I've done wrong?
When I added the Android SDK I did add all the tools ad platforms availabe in the SDK manager, did that have some effect?
If this isn's fixable it's a show stopper for me, which is a shame after spending weeks developing an app...
Please help!
I'm also running into that issue. Unfortunately using crosswalk will definitely increase your apk size. However, I found some way to at least reduce the apk size. For instance you could make use of the crosswalk lite. It may reduce your apk size for about 15 MB (see crosswalk lite).
You can also specify that you don't want to build the projects for two architectures (explained here).
Same problem here. I think promissed size of 20Mb is for the apk file which is compressed, you are looking at installed size on device.
You can check generated APK size on platforms/android/build/outputs/apk/ or platforms/android/ant-build/
I think the problem you're encountering though Crosswalk related, it's emulation related. I've tried emulators from both Android Studio versions and Genymotion. They both didn't work well for hybrid app testing.
My advice is to try Chrome Device Inspector along with actual device testing. I don't think anyone will argue that's the best way to ensure performance. AWS Device Farm is just one of many offerings that will spit out physical devices for testing. There's even services that let you outsource testing on different devices by real people, just can't think of the name of it right now...
My current favorite is Cordova Tools for Visual Studio Code, but it has been buggy for me lately.
However, I'm in the early stages of a fleet of Cordova apps and was alarmed at the overhead Crosswalk has. ~20MB extra to your APKs, and ~70MB to the installed size of your application. That's pretty alarming, considering the apps we use it with, with resource assets (images, etc.) are about 1/10th the size of this one plugin!
We have one app that has actually degraded with Crosswalk. My theory is that Crosswalk doesn't do a good job parsing non-standard HTML which is a core feature we have since we have XSLT transformed XML which winds up being non-standard HTML. Traversing it is extremely slow compared to the default WebView. We do a lot of manipulation with raw DocumentNode objects, so maybe that's it. That said, I'm so surprised that if it's slow traversing/appending HTML via vanilla JavaScript that these other apps are seeing performance gains!
I also learned last night there is Shared Mode with Crosswalk which allows multiple applications that use Crosswalk to share one instance.
I am developing mobile web app using ionic sidemenu, but it is not as smooth as it should be. When I open sidemenu using slide left/right, I am getting less than 30 FPS as shown in figure.
How can I improve the performance?
Reaching 60 FPS would be great!
AppGyver's Steroids tooling also provides you with access to Crosswalk on Android. You can run it in your Ionic project directly without modifying any files.
Also, Supersonic's sidemenu/drawer is fully native, so if you're up for migrating, it'll run way faster. :)
(Disclaimer: I'm a programmer for AppGyver.)
My advice is to use Crosswalk instead of the Cordova as the webview for the app.
While both share the same end goal, they are different:
Cordova, from the Apache Foundation, uses the regular (pre-lollipop) Android webview, which is based on Android's stock browser since its inception.
The Crosswalk Project, created on the Intel Open Source Technology Center, is different. It wraps your app with Chromium, the open-source base code that gave birth to Google Chrome, which brings numerous performance enhancements: css3 transitions, animations, 3d transformations, html5 support, remote debugging and much better javascript support and performance.
At the time of writing, the Ionic team is already working on a beta version (1.3.0-beta1) that uses Crosswalk instead of Cordova. Not really stable just yet, but a huge promise.
In any case, you can use Crosswalk today, by manually copying your Ionic project's 'www'
folder content to the project folder inside Crosswalk folder and run it. You'll need to setup some manifest files previously, so read the docs.
In any case, it's not hard at all to try, and I'll recommend it everyday for all projects pre-Lollipop. If you're targeting Lollipop/Android 5 versions, you don't need it, because the default Webview in these versions is already Chrome-based.
Hope it helps.
I was trying to build an android apk using Intel XDK.I just want to know if there is an option to set the splash screen, icons, application title in some build properties file rather than choosing it everytime you build the apk.
In the current build system the build menu is the only way to specify these assets. However, each time you build your app it will reuse the assets you provided initially. If you create a new project you'll have to provide them again.
In the Cordova build option you provide these assets by specifying them in an intelxdk.config.xml file. This is probably closer to what you are looking for. In the next major release we'll also be providing a way to provide those directly in the XDK, rather than on-line, but only for Cordova build options. However, there will be more flexibility in how you provide those assets, which will be easier to explain once that version of the XDK "hits the streets."
Sorry, but company policy does not allow me to provide a release date. All I can say is that it will be coming in the near future.