I have created an app on all 3 platforms: iOS, Android and Web. I also have manifest.json and other things required for PWA. I have deployed it to firebase hosting. Now what I want to do is manually trigger the Add to Home screen on tap of a button. The real problem is though all the articles shows code to be paste on JS side while I have all the UI in dart so How do I listen for beforeinstallprompt and trigger add to home screen manually ? I'm struggling with this from last 3 days but no luck. I have this package installed universal_html: ^1.2.3. If anyone knows how to do this please help me out.
What about writing those code in normal JavaScript, and then call it from Dart(flutter web).
There are many resources about that. For example, Flutter Web : How to run javascript using dart js
In addition, do not forget that, when you are writing Flutter web, you have the full control over the HTML/JS/CSS/Dart. Thus nothing can stop you from writing JS code :)
Related
I have just build a flutter web app - when running it in a safari browser I can see it has blocked one tracker UNPKG
Do you know why? I have not added any tracker my self. To recreate this, just create a standard flutter app: flutter create and build it to release for web.
Could it be some local to the app itself, loading some content?
Flutter downloads some fonts and CanvasKit on launch. It's the same reason sometimes you'll load the app and nothing will show until you refresh and the same reason Amazon's logo seems to vanish. The difference being Amazon is hosting their own stuff and if you're like me you don't want to rely on everyone and their brother to print hello world. The solution's here if you haven't already googled it: https://github.com/flutter/flutter/issues/70101
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 am trying to launch a third-party app from my flutter but I’m not getting anywhere. In this case, I am trying to open the app “Amazon Alexa” by clicking on a raised button in Flutter. Can anyone help me out?
I tried to use url_launcher but it didn’t work out with third-party apps.
yes, some packages are available but the issue is, these are still in the early stages.
so for that, you need to move to the native side.
Widgets are android native constructs that extend a view on the application screen.
Is it possible build a homescreen widget using Ionic or react native?
Not sure about React Native, but I'll answer regarding Ionic.
In one word - no, you can't.
Ionic is an HTML, CSS, JS framework but it is mostly used with Cordova which embeds the webview in your app and renders HTML, CSS, JS in it.
(Answered on Quora)
Here you can find more thorough explanation for a similar question.
I am not sure but i have found a plugin that can extend the native view to the cordova app.
You can install this plugin by
cordova plugin add cordova-plugin-ace
For more info please follow this repo link
It is possible, but you still would have to rely a lot on some Android notions. Here it is a proof of concept you can start with:
React Native Android Widget Proof of Concept
For React Native, at the moment this is not possible. There is an issue on their GitHub, and upvotes for this feature are welcome on the dedicated ProductPains page.
Probably this will eventually be implemented.
Yes it is possible and not difficult to do with my project for Android in a very simple way without plugin with nothing. What I did I created my AppWidget in Android Studio modified the way I wanted. After I created it, I went to my project Ionic I managed the android platform then just copied the class java and layouts .xml then pasted on platform/android.
With this I adapted according to my need in my case
res/xml, res/layouts, res/drawable and in folders
src/the_application_address after I just needed to hit my Manisfest.
I am using the Cordova official Facebook plugin and run into a weird issue...
The login process, which previously worked just fine for me, is now open in some native Android "black-screen" view without any styling.
The functionality works just fine - the authentication process succeeds, so there is a consistent connection with Facebook. The thing is, I am expecting a Facebook view instead of only the text content without any styling. Here is an example with Facebook native Hackbook app:
Tried running on two different devices - the issue remains.
Tried with cordova 2.2.0, then started a fresh project with 2.5.0 - the issue remains.
Please advice.
UPDATE:
Well, I have spent too much time on this issue, and it seems like this is the new Facebook SDK for Android.
I really wish I am wrong here, but here are examples from Facebook's flow for Android:
https://developers.facebook.com/docs/howtos/androidsdk/3.0/login-with-facebook/
Also - when checking the other sample apps in the SDK, all of them behave the same. The only one that shows a Facebook page is the Hackbook, and by it might be because this app is implemented with the old API (version 2):
https://developers.facebook.com/docs/getting-started/facebook-sdk-for-android/3.0/
Hackbook: another sample app demonstrating a selection of Graph API calls. Note that this sample is untouched from v2.0 of the SDK, and demonsrates the SDK's backward-compatibility.
UPDATE 2:
Ok, digging a bit more into it, it seems that there is no iframe involved here, the screen can be changed as you wish with a regular android activity theme added to the activity.
Here is an example of adding one of Androids default themes to the androidMenifest.xml (you can of course create your own Faceboke like theme ):
<activity android:name="com.facebook.LoginActivity"
android:theme="#android:style/Theme.Black.NoTitleBar"
android:label="#string/facebook_login" />