Is there any way to show splashScreen when app is in the background or switching tabs. In ionic 6? - ionic-framework

I use privacy-screen plugin to hide content when app is in the background, but it shows just gray background. I need to set splashScreen instead. Any suggestions?
I tried splashScreen plugin, but it is not working for me.

I don't know if it's the best way but I think that using Capacitor appStateChange from #capacitor/app (documentation) you could show and hide a screen with your logo when app is in background or foreground.
import { App } from '#capacitor/app';
App.addListener('appStateChange', ({ isActive }) => {
console.log('App state changed. Is active?', isActive);
if(!isActive) showLogoScreen();
else hideLogoScreen();
});
I hope it helps :)

For iOS, I did it simply in native code: just find the "applicationWillResignActive" method in AppDelegate and insert a view on top of the window.
For Android, sadly I couldn't find a better solution. The "gray background" you described is likely the implementation of Hide screen in 'Recent Apps List', but allow screenshots

Related

ImageCache is reset to zero when I open iOS plugin by MethodChannel

I am trying to use iOS image picker plugin in my Flutter using MethodChannel.
But I found that if I open and close the image picker(My Image Picker button), ImageCache is reset to zero.
So NetworkImage gets loading again like it has never been downloaded before.
On the other hand, Flutter's image picker(Flutter Image Picker button) doesn't reset ImageCache to zero so it is fine.
Why is this happening? Did I miss something?
I have tried overriding ImageCache size like below but the problem is not solved:
overriding image cache in Flutter
Please help me...
my app home tab
my app image tab
flutter image picker
I recommend to use flutter package to make developer easier to code and even the package also use MethodChannel, inside code is also coded pretty well such as error handler etc. It is also works for IOS and Android, which is this is the function of Flutter that make developer easier to deploy IOS and Android apps.
You can explore more about this:
https://pub.dev/packages/image_picker
https://pub.dev/packages/cached_network_image/example

Change platform brigtness is triggered when 'Home' is pressed in iOS 15 Simulator

I'm having an issue after my Simulator was updated to iOS 15 in my upcoming Flutter app. When I press the 'Home' button at the top it causes my app to fire the didChangePlatformBrightness() function twice.
Seriously thinking on remove this check while the app is already open and leave it only at startup. Anyone with the same problem and any tips on how to solve it?
On Android everything works fine, just as expected.
I solved this question by monitoring the App lifecycle state. If the app is in resumed state, then I change the color scheme, otherwise I'll do nothing. It occurs because when you press the Home button, the app state changes. See the example below:
void didChangePlatformBrightness() {
if (appState == AppLifecycleState.resumed) {
//give the user a choice for restarting the app, so the colors will
//all be set correctly
showThemeChangeWarning();
setColorScheme();
super.didChangePlatformBrightness();
}
}

Flutter webview force the dark mode Solution?

I am developing an application in Flutter (with a webview) and when dark mode is activated on the device, the webview changes the colors of the web (text and background) to make it dark , creating a horrible result.
I have tried to set the entire app in light mode (themeMode: ThemeMode.light) but it doesn’t work.
i also set colour is white in my website its looks normal in Chrome. Do you know how it could be solved?
Thank you?
Add the below dependency to your gradle build:
implementation 'androidx.webkit:webkit:1.3.0'
And add the below code snippet to your webview initialization:
if(WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
WebSettingsCompat.setForceDark(myWebView.getSettings(), WebSettingsCompat.FORCE_DARK_ON);
}
Can check the Credits here

Ionic on iPhone How to Set StatusBar Transparent

Hi I'm creating an app based on ionic.
I want to set my StatusBar transparent like this
But I've tried any of codes, it always goes
Here is my app.js settings
if (window.StatusBar) {
StatusBar.overlaysWebView(true);
StatusBar.styleLightContent();
}
How can I make it right like the first picture goes?
I think you need to explicitly set the background color, like so
if (window.StatusBar) {
StatusBar.overlaysWebView(true);
StatusBar.styleLightContent();
StatusBar.backgroundColorByHexString('#14c1f3');
}
See also http://ionicframework.com/docs/v2/native/status-bar/

How to require fullscreen mode in a jQTouch application?

I'm using jQTouch to develop a version of a website optimized for safari on the iphone. The jQTouch demo helpfully shows how to show an "install this" message for users not using full screen mode and hide it for those who are. When in fullscreen mode, the body should have the class "fullscreen." So you can hide the "install this" message for people who have already added your app to their home page by adding this css rule to your stylesheet:
body.fullscreen #home .info {
display: none;
}
What I'd like to do is require users to use the app in fullscreen mode only. When viewed from the regular browser, they should only see a message asking them to install the app. That message should of course be hidden otherwise.
This ought to be really, really easy, so I must just be missing something obvious.
I thought one way to do this would be to simply test for the class "fullscreen" on the body: if it's not there, use goTo to get to another div, or hide the other divs, or something like that.
Strangely, however, this doesn't work. As a test, I've still got the original "info" message, as in the jQTouch demo, and it doesn't show up when I launch in fullscreen mode. So the body must have the fullscreen class. And yet I can't find any other trace of it: when I put this alert to test things after the document has loaded, I get nothing when launching in fullscreen mode:
alert($("body").attr("class"));
I also thought I might test for fullscreen mode by checking for the value of the fullScreen boolean. But this doesn't seem to work either. What am I missing? What is the best way to do this?
Well, I couldn't figure out why the standard way wasn't working, but someone on the jQTouch Google Group suggested this, which works:
if (window.navigator.standalone) {
alert ('Thanks for launching this app your home screen')
} else {
alert('Add this app to your home screen for the best experience')
}