How to perform Async await in the below code - flutter

I need clarifications about how to solve the below code using async and await and future API in dart.
void main()
{
print("Program starts");
printdart(1);
print("Program finishes");
}
printdart(int temp)
{
int i;
for(i=temp;i<=1000;i++)
{
print("dart");
if(i%10==0)
{
printangular(i+1);
break;
}
}
}
printangular(int temp)
{
int i;
for(i=temp;i<=1000;i++)
{
print("angular");
if(i%10==0)
{
printdart(i+1);
break;
}
}
}
How to implement async and await in dart

I think you need to study more how Dart deals with Threads. I can't explain everything here, but basically Dart runs only one Thread, so all your code will just block that Thread, async awit won't help you.
Dart also have Isolates, that can run in multiple threads, but since they are very isolated, it's not easy to pass and get data from them.
Async/await works best with network requests and file access, because they block once activated, so the Thread can just ignore them for now and go back there when there's a new value. Your code in the other hand doesn't block, so you can't await for it.
There's one way though, you need to refractor your code so it will yield values, and you can async await them. In this case you need to read about Async Generators and see how they work so you can reformat your code accordingly.

In the code you provided, there is no waiting for the code to do some heavy process.
Below is a modified version of your code. Here, the code will wait for some time before it is called again. In the meantime rest of the code is executed.
import 'dart:async';
void main() {
print("Program starts");
printdart();
printangular();
print("Program finishes");
}
printdart() async {
int i;
for (i = 1; i <= 4; i++) {
print("dart");
await Future.delayed(const Duration(seconds: 2));
}
}
printangular() async {
int i;
for (i = 1; i <= 4; i++) {
print("angular");
await Future.delayed(const Duration(seconds: 1));
}
}
To answer your question:
async: a keyword to tell the compiler that the function will take some time to complete but in the meantime, go back and run the next part of the program and come back when this function is done.
await: this allows waiting for the process to complete before jumping to immediate next line.

Related

How can I send multiple async requests in Flutter that is not just concurrent but parallel?

I am calling a TTS API for multiple lines of texts. Ideally I would like to have them executed in parallel, meaning that one request would not wait for the other to finish before starting, hence speeding up total runtime of the API calls.
Here is an excerpt from my code:
await Future.forEach(rounds, (round) async {
await _fetchAudioForText(
round, voiceA );
totalBytes += round.audio?.lengthInBytes ?? 0;
});
...
Future<bool> _fetchAudioForText(Round round, Voice voice) async {
round.audio =
await ttsUtils.getAudioByteStream(round.text, voice);
return true;
}
getAudioByteStream is essentially calling the TTS API using a HTTP request and has a return type of a byte stream (Uint8List).
The problem is, that it's not actually doing it in parallel. What am I missing here?
remove await in forEach
await Future.forEach(rounds, (round) async {
_fetchAudioForText(
round, voiceA );
totalBytes += round.audio?.lengthInBytes ?? 0;
});

why the dart function did not return the sub function result

I am now using this functon to fetch new music in flutter:
class QuietPlayQueueInterceptor extends PlayQueueInterceptor {
#override
Future<List<MusicMetadata>> fetchMoreMusic(BackgroundPlayQueue queue, PlayMode playMode) async {
if (queue.queueId == kFmPlayQueueId) {
final musics = await (neteaseRepository!.getPersonalFmMusicsFromQueue() as FutureOr<List<Music>>);
final musicListExt= musics.toMetadataList();
return musicListExt;
}
return super.fetchMoreMusic(queue, playMode);
}
}
and this is the function getPersonalFmMusicsFromQueue define:
Future<List<Music>?> getPersonalFmMusicsFromQueue() async {
if(fmPlayQueue.isEmpty){
return getPersonalFmMusics();
}else{
final Music music = fmPlayQueue.first;
final List<Music> musics = List.empty(growable: true);
musics.add(music);
return Future.value(musics);
}
}
what makes me confusing is that the getPersonalFmMusicsFromQueue function did not return any result. I make a breakpoint on the line final musicListExt= musics.toMetadataList(); but did not hited. The console is no error output. where am I doing wrong? what should I do to fix this problem?
getPersonalFmMusics looks asynchronous? Perhaps you're not awaiting
Future<List<Music>?> getPersonalFmMusicsFromQueue() async {
if(fmPlayQueue.isEmpty){
return await getPersonalFmMusics();
}
// ...
I would also advise against casting unless you're sure you need it. Instead, have the return type of getPersonalFmMusicsFromQueue return a FutureOr
(neteaseRepository!.getPersonalFmMusicsFromQueue() as FutureOr<List<Music>>); // Remove FutureOr<List<Music>>
// and make the function signature instead look like this:
FutureOr<List<Music>> getPersonalFmMusicsFromQueue(); // Force unwrapping with a `!` but also throwing proper exceptions when null.
The reason being is that casting usually hides errors the compiler would otherwise be warning you about.
Another idea I have if the above isn't the issue is the .first call.
final Music music = fmPlayQueue.first;
If this is a first getter on a stream then that need to be awaited and it likely isn't working because it's just indefinitely waiting for the stream to output a value.

Flutter stopwatchtimer doesn't respond to changing time

I use this package https://pub.dev/packages/stop_watch_timer in my app to keep track of the music that is playing. However if I want to change the song by changing the time on the stopwatch it says that I have to reset the timer first which I have already done. If I press the button for the second time it works. This is the code:
final StopWatchTimer _stopWatchTimer = StopWatchTimer(
mode: StopWatchMode.countUp,
onChangeRawSecond: (value) => print('onChangeRawSecond $value'),
);
void change_timer_value(int song_index) {
int new_time = TimerState(
song_index: song_index,
record_side: current_side_list(
record_sides[selectedValue], widget.album_data))
.get_start_value();
print(new_time);
_stopWatchTimer.onExecute.add(StopWatchExecute.reset);
_stopWatchTimer.setPresetSecondTime(new_time); // this is where I set new time
}
I don't know how to get around this. I have already created an issue on the creators GitHub but no response. So there's somebody who can help me here
As you mentioned in the github issue, it looks like the root cause of your issue is that the reset action takes place asynchronously, and so hasn't gone through yet by the time you try to set the time.
One way to get around this is to define your own async function which resets the stopwatch, then waits for the action to complete before returning:
Future<void> _resetTimer() {
final completer = Completer<void>();
// Create a listener that will trigger the completer when
// it detects a reset event.
void listener(StopWatchExecute event) {
if (event == StopWatchExecute.reset) {
completer.complete();
}
}
// Add the listener to the timer's execution stream, saving
// the sub for cancellation
final sub = _stopWatchTimer.execute.listen(listener);
// Send the 'reset' action
_stopWatchTimer.onExecute.add(StopWatchExecute.reset);
// Cancel the sub after the future is fulfilled.
return completer.future.whenComplete(sub.cancel);
}
Usage:
void change_timer_value(int song_index) {
int new_time = TimerState(
song_index: song_index,
record_side: current_side_list(
record_sides[selectedValue], widget.album_data))
.get_start_value();
print(new_time);
_resetTimer().then(() {
_stopWatchTimer.setPresetSecondTime(new_time);
});
}
Or (with async/await):
void change_timer_value(int song_index) async {
int new_time = TimerState(
song_index: song_index,
record_side: current_side_list(
record_sides[selectedValue], widget.album_data))
.get_start_value();
print(new_time);
await _resetTimer();
_stopWatchTimer.setPresetSecondTime(new_time);
}

Flutter multi threading save file to local

for(var item in list)
{
var body = (await api.get(item.url)).bodyBytes;
await file.writeAsBytes(body);
}
How can I change this code to multi threading. This code is very slow. Any examples?
It's slow because you're forcing your application to wait for every api request and every file write before starting the next iteration.
Start every request at the same time and wait for them all simultaneously. Multithreading will not speed up tasks that are just slow and it would not be practical in Dart.
await Future.wait(list.map((item) async {
var body = (await api.get(item.url)).bodyBytes;
await file.writeAsBytes(body);
}));
Or with a more verbose, but maybe clearer syntax:
List<Future> futures = [];
for(var item in list) {
futures.add(Future(() async {
var body = (await api.get(item.url)).bodyBytes;
await file.writeAsBytes(body);
}));
}
Future.wait(futures);
I'm not really sure why you're doing await file.writeAsBytes(body); with the same file every iteration, but it appears to be a mistake to me. Just be aware.

Protractor tests are inconsistent even with browser.wait and helper functions

I am looking for some advice. I have been using protractor for a few weeks and just cannot get my tests to be consistent unless I use browser.sleep. I have tried helper functions as well as browser.wait(expectedCondition). I have reduced browser.sleep immensely, but protractor still just goes way to fast. I can never successfully run multiple tests unless I have a few browser.sleeps just so protractor can relax for a second. Here is an example:
The Test I need to select a user, delete that user and wait for a success message. Then I click the same user and click the activate button.
Outcome: Unless I have browser.sleep, my success messages do not even appear after deletion/activation. The tests fail because protractor is moving way too fast. Even with the expected conditions. My main problem is that protractor moves to fast for the angular web page. I have tried ifCLickable or isDisplayed but they do not fix the issue entirely. Here is the code:
async deleteUser() {
await sendClick(this.getNewUser());
await sendClick(this.getDelete());
await waitTillPresent(this.getDeleteConfirm());
await sendClick(this.getDeleteConfirm());
await waitTillPresent(this.getSuccessMsg())
expect(await page.getSuccessMsg().isDisplayed()).toBeTruthy();
}
async activateUser() {
await sendClick(this.getNewUser());
await waitTillPresent(this.getEditBtn())
await sendClick(this.getActive());
await waitTillPresent(this.getSuccessMsg())
expect(await page.getSuccessMsg().isDisplayed()).toBeTruthy();
}
Functions:
export async function sendClick(element: ElementFinder): Promise<boolean> {
try {
if(!await element.isDisplayed()) {
return false;
}
await browser.executeScript('arguments[0].click();', await element.getWebElement());
return true;
}
catch (err) {
return false;
}
}`
export async function waitTillPresent (element: ElementFinder, timeout: number = 10000) {
return browser.wait(() => {
return element.isPresent();
}, timeout);
}
My Question: Am I handling this correctly? Is there a better to ensure my tests are consistent? Before these tests, I visit a non-angular webpage. So I have to include the line browser.waitForAngularEnabled(false)
Does this mess with the async nature of angular? Thank you.
I worked the last few months on our e2e test suite to make it stable. I did not believe it's possible but I made it using correct wait functions and sometimes browser.sleep() as a last resort.
You have a correct approach for waiting for elements. But there are 2 problems regarding your implementation:
1) The function waitTillPresent() does exactly what its name stands for. But if you only wait until the element is present on the page it does not mean it's clickable or displayed. An element can be hidden and at the same time still be present. Please rename waitTillPresent() to waitTillDisplayed() and change it as follows:
export async function waitTillDisplayed(element: ElementFinder, timeout: number = 20000): Promise<boolean> {
let result = await browser.wait(() => element.isPresent(), timeout);
if(!result) {
return false;
}
return await browser.wait(element.isDisplayed(), timeout);
}
2) You should exceed the default timeout. Set it a bit higher like 20 to 25 seconds. Just play with it.
Unfortunately, I don't know how browser.waitForAngularEnabled(false) changes test behavior. We do not use it :)
Note:
These functions are all exactly the same:
function foo() { return 'hello world'; }
var foo = () => { return 'hello world'; };
var foo = () => 'hello world';
Play with arrow functions, it's syntactic sugar.
Cheers and gl!