Flutter I want navigate to another screen while the current screen running - firebase

I want navigate to another screen while current screen is running. If in Firestore collection new document add then app listen it and navigate to another page. Please help me...

I don't think this is possible with the traditional navigator, however, one way of "emulating" something similar is by using an IndexedStack, which keeps both widgets loaded and you can simply select an index. I've used this successfully when I needed a fancy splash screen and wanted my other widget to load early.
However, it seems to me your problem is more to do with maintaining state. I'd recommend reading Flutter's page on lifting state up. You can use something like Provider above your MaterialApp to keep your data loading even when your widget isn't on screen or simply pass your state back and forth between pages using navigator arguments (I don't recommend that).

You can try something like this
void initState() {
listenFirestore();
super.initState();
}
listenFirestore() async {
Firestore.instance
.collection('availableDates')
.snapshots()
.listen((data) => {
// here you can call navigator method
});
}
Listen to Firebase changes and call a function to navigate for a new screen.
If you are using Flutter Bloc you can do this using BlocListener.
BlocListener official doc.

Related

Using `within` in custom helpers

I'm using CodeceptJS and I'm trying to write a custom helper that asserts an text and clicks "OK". This dialog pops up as a iframe modal to consent with cookies.
If I write following steps in my scenario
I.amOnPage('/some-path');
within({frame: '#iframeID'}, () => {
I.see('Headline text for dialog');
I.click('OK');
});
// ...
...my test seems to work just fine.
But when I make an custom helper out of that and configure it properly so I can use it:
const { Helper } = codeceptjs;
class CookieConsent extends Helper {
consentWithCookies() {
const { Puppeteer } = this.helpers;
within({frame: '#iframeID'}, () => {
Puppeteer.see('Headline text for dialog');
Puppeteer.click('OK');
});
}
}
module.exports = CookieConsent;
...and use it as a step:
I.amOnPage('/some-path');
I.consentWithCookies();
// ...
...it doesn't seem to work as the consent dialog doesn't get clicked away as it was when implementing this directly in the scenario. According to some console.log() debugging the within callback doesn't get called at all. Console doesn't throw any errors about undefined within or anything suspicious.
I suspect that using within in a custom helper isn't working or I'm doing something wrong that I can't figure out from the documentation.
This warning at documentation doesn't really clarify when within is being used incorrectly, and using await doesn't help the problem.
within can cause problems when used incorrectly. If you see a weird behavior of a test try to refactor it to not use within. It is recommended to keep within for simplest cases when possible. Since within returns a Promise, it may be necessary to await the result even when you're not intending to use the return value.
iFrames can be a pain to work without when it comes down to automation. There are a number of factors that can make an iFrame unreachable to a framework such as cross-domain iFrames, commonly used for increased security on the content served.
Now to fix your issue, all you have to do is use switchTo() - Docs in CodeceptJS which is a function available for all helpers made available. The order should be
I.switchTo('your iframe');
..... some actions here;
I.switchTo(); // You do this so that you get out of the iFrame context when done

Selecting multiple images using xam.plugin.media

I'm using xam.plugin.media to get the file path of the image selected. Working with a single image is fine, but I'm having trouble selecting multiple images.
This is my code:
List<MediaFile> mediaFile;
...
private async void AddAttachments(object sender, EventArgs e) {
await CrossMedia.Current.Initialize();
if (!CrossMedia.Current.IsPickPhotoSupported) {
await DisplayAlert("Error", "Your phone does not support photo uploads. Please proceed without attachments.", "Okay");
return;
}
mediaFile = await CrossMedia.Current.PickPhotosAsync();
if (mediaFile == null) {
return;
}
}
Despite using PickPhotosAsync(), it still selects a single photo. I was expecting something where I can check images I want to upload like other mobile applications.
Unfortunately, you can't (kind of). It is supposed to be working, but there was an issue about this back in 2018-2019, which got marked as solved, even though the user kept complaining about it not working reliably/always.
Link to the feature request/issue here.
There is a new issue, that got registered recently (April 2020) here.
My advice is to subscribe to it and comment, so that the developer will know that you are experiencing some issues with this functionality also. If you can, you can also create a sample project and upload it, so that they can quickly fix it.
However, in my experience, this package hasn't been frequently updated, so you might have to wait a bit.

Flutter redux dispatch event when widget is created

I would like to load data using redux action when the widget is constructed. Let´s say for example:
User opens the app, then the HomeScreen component is rendered, on this page are some categories.
I have achieved to have AppState that supports multiple stores (yet not tested) that is populated with initial data in main() using FlutterStorage.
So in HomeScreen I am able to access data from build() using StoreConnector since in convertor i will get the store, so i can dispatch events or read app state. But this is only inside the build() which is problem, because if dispatch the LoadCategories event in the render method, then it will go into infinite loop.
In reactjs i was able to map dispatch to component (widget) properties so in componentDidMount i was able to fetch data. This seems impossible in Flutter.
Any ideas how to achieve that?
Thank you
Probably not the best answer but I have noticed that StoreConnector has a onInit property which does what I need.
#override
Widget build(BuildContext context) {
return new StoreConnector<AppState, List<Category>>(
onInit: (store) {
store.dispatch(LoadCategoriesAction());
},
builder: (context, categories) {
Your answer is correct, but there is an alternative depending on your use case. According to the doc you can use onInit or onInitialBuild.
onInit
This can be useful for dispatching actions that fetch data for your Widget when it is first displayed.
onInitialBuild
This can be useful for starting certain animations, such as showing Snackbars, after the Widget is built the first time.

FirebaseUI for Web — Auth - how to re-authenticate?

I'm using FirebaseUI for Web — Auth widget to simplify the auth workflow, and I'm stuck with a problem. Everything works OK the first time. But, after I sign in, the widget contents clears away, and the 'Sign in with ...' buttons never come back. Trying to recreate the widget brings up the error "UI Widget is already initialized on the page. Only one widget instance can be initialized per page."
This means that users need to refresh the page to get the sign-in buttons back. Is there a more elegant way?
Are you rendering the widget in a single page application? If so, this currently won't work. You will have to render the sign in widget in a popup whenever you want the user to sign in.
As bojeil stated in the first answer (May 2016), there was really a problem using it in single page applications workflows. But in more recent versions of firebase-ui you can actually reset the widget so you won't need to initialize it again.
All you need to do is to keep the widgets instance reference in a variable. Then, when you want to render it again you use the same reference, reset it and then restart it.
var ui;
if (ui) {
ui.reset();
} else {
ui = new firebaseui.auth.AuthUI(firebase.auth());
}
ui.start('#firebaseui-auth-container', uiConfig);

Preserving elements on page during Hot Code Reload

If a user is watching a video, or streaming audio on a page in my Meteor app, is there something I can use to prevent that particular player element from refreshing/stopping/closing during a Hot Code Reload when new code is pushed?
Currently, if I make a change to the code base and a user is watching/listening to something, they will be interrupted and the player will stop.
You could use the onMigrate api (undocumented) to disable a hot code push if someone is watching a video:
function onMigrate (retry) {
//Return [true, data] to allow it to hot code reload, data being anything you want to be available when the page reloads
return false;
}
Meteor._reload.onMigrate("someName", onMigrate);
// or Meteor._reload.onMigrate(onMigrate);
There's also a videocast covering this on eventedmind and a bit of a comment about it on github: https://github.com/meteor/meteor/blob/devel/packages/reload/reload.js#L81-L94

Resources