Home Blog Page 31

Flutter Dart – How to use async await in loops example

0
How to use async await in loops
using await in for loop flutter

Hi Guy’s Welcome to Proto Coders Point. In this Flutter dart article, let’s checkout how to preform asynchronous operation in loops using async await and by using Future.forEach function.

Synchronous vs Asynchronous programming

  • synchronous: In simple words, When you execute code synchronously then you need to wait for it to finish task 1 before you move to task 2.
  • asynchronous: When you execute code asynchronously, then you can continue to execute the next task, no need to wait for the previous task to complete, but in case if task 1 & task 2 are related like, talk 2 get data from task 1 then you need to make use of async & await in a flutter.

Learn More about Flutter Future, Async & Await

Flutter await foreach – set duration between each loop iteration

Example 1: dart async for loops using Future.forEach function

The below code is a count down program, it will print numbers from 10 – 1 as listed in the array, After every print the program will wait for 1 second and then print the next iteration for the for loop.

In forEach loop I have make use of async await keywords to preform asynchronous operation with delay in loop.

// protocoderspoint.com
void main() async {
  final items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  Iterable inReverse = items.reversed;
  await Future.forEach(inReverse, (item) async {
    print(item);
    await Future.delayed(const Duration(seconds: 1));
    // wait for 1 second before next iteration
  });
}

Example 2: using for in loop with async await

// protocoderspoint.com
void main() async {
  final items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
   Iterable inReverse = items.reversed;
  for (int item in inReverse) {
    print(item);
    await Future.delayed(const Duration(seconds: 1));
  }
}

Recommended Flutter dart articles

Dart Calculate product/multiplication on 2 number.

Print pattern star, number, character in dart.

Get sum of all values in map.

AnyViewer – Best Free Remote Desktop Software | Remote Access | Remote File Transfer

0
best remote desktop connection tool
Anyviewer remote desktop program

Hi Guy’s Welcome to Proto Coders Point.

AnyViewer

In this Article, let’s talk about AnyViewer a remote software tools using which you can Remote Access & control any remote computer or cloud computer. Anyviewer is one of the best remote desktop software which is fully free to use for basic desktop access feature & remote desktop copy files/file transfer from or to remote PC.

Step to use AnyViewer Remote Desktop connection software

AnyViewer supports severals ways to achieve remote connection and file transfer.

Video Tutorial

AnyViewer Remote connection: 

1. Unattended remote connection: log in to the same account > go to Device > one-click control

2. Use partner ID – send a request / input security code

File transfer:

1. direct file transfer: log in the same account > go to Device > file transfer

2. use partner ID, enter partner ID and tick file transfer

3. transfer files in a remote session from the uper toolbar

Besides, we also supports remote access computers from Android and iOS devices,

Flutter remove debug banner

0
Flutter Remove Debug Banner
Flutter Remove Debug Banner

Hi Guy’s Welcome to ProtoCodersPoint. In this Flutter article let’s check out how to remove debug banner that appears at top right corner of flutter application when you run flutter app on Emulator or physical device.

Many Flutter learner who have recently started learning flutter app development, have question in mind that why is this debug banner been shown and how to remove it.

Solution to remove debug banner flutter

It quite simple to hide debug banner from flutter app while developing.

So when you make use of MaterialApp class Widget, Property of MaterialApp i.e. debugShowCheckedModeBanner is been set to true by default, All you need to do it set debugShowCheckedModeBanner to false.

MaterialApp(
      debugShowCheckedModeBanner: false,   // add this line.
      title: 'KindaCode.com',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
 )

Recommended Flutter Article

Flutter 2.5 – Show Material Banner – Scafforl Messenger.

Check flutter app size using dev tools.

Mobile screen mirror using scrcpy

flutter remove # from url

Flutter admob google ads integration

Flutter disable landscape mode – Orientation portrait only

0
flutter app orientation portrait mode or landscape mode only

Hi Guy’s Welcome to Proto Coders Point. In this Flutter article let’s check out how to disable landscape mode in flutter, so that your flutter application orientation is portrait only on disable app screen rotation.

Flutter disable landscape mode – disable app rotation

In your flutter project implement below code to disable landscape and turn on only portrait mode.

1. Import services.dart file in main.dart

Open your flutter code from where your flutter application start runApp(); mostly it will be main.dart.

In main.dart file above import services.dart.

import 'package:flutter/services.dart';

services.dart is an inbuild library, so no need to install any external package.


2. Add SystemChrome setPreferedOrientations snippet

Now, just before starting your flutter app i.e. above runApp(MyApp()); add below 2 lines of code as shown in screenshot.

// add these lines
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
flutter disable landscape mode code
flutter disable landscape mode code

3. Run the app on device or emulator

If your app is already running on device, by hot reloading Device Orientation will not work. So you need to stop the running app and rebuild & run.


Alternatively if you want your flutter app device orientation only in landscape mode and disable portrait mode then use below snippet code

 // add these lines
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations(
      [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);

Video Tutorial on Flutter Set Preferred Orientation (portrait or landscape mode)

How to Concat List in Dart – merge/combine list in flutter dart

0
concat list in dart flutter

Hi Guy’s Welcome to Proto Coders Point. In this flutter dart article let’s have a look into different way to concatenate 2 list in dart(how to join 2 list in flutter).

1. Using dart list class addAll() method

In Flutter dart, list class has a method addAll() using which we can easily combine 2 lists or join it and concat it as a single list.

Example:

void main() {
  
   List listOne = [9,8,7];
   List listTwo = [6,5,4];
  
   listOne.addAll(listTwo);
  
   print('Output: ${listOne}');
  
}

Here listOne.addAll(listTwo), all the data in listTwo will get added in listOne.

Output:

add 2 list using addAll() method dart

2. Combine 2 list using (+) addition operation in dart

You can simply make use of Addition operator (+) to concat/add 2 list in one.

Example:

void main() {
  
   List num1 = [1,4,3];
   List num2 = [2,6,9];
  
   final List numList = num1 + num2;
  
   print('Output: ${numList}');
  
}

Output:

concat 2 list using addition operator

3. Concat 2 list using spread operator in flutter dart

By using spread operator you can merge 2 array list in one, “…” 3 dots indicate spread operator in flutter dart as so called as Cascade Operator. by using “…” you can combine/join 2 list data into one.

Example:

void main() {
  
   List pets = ['dog','cat','horse','fish'];
   List birds = ['crow','pegion','peacock'];
  
   final List animalList = [...pets,...birds];
  
   print('Output: ${animalList}');
  
}

Output:

concat list using spread operator

Recommended dart articles

dart convert list to set or vice versa

dart program to calculate product

Basic of dart program – Learn dart

How to automatically restart node server on crash – Nodemon/pm2

0
Automatically restart node server on crash Nodemon pm2

Hi Guy’s Welcome to Proto Coders Point. In this nodejs article let’s look into how to make nodemon automatically get restart when the program crash without waiting for file changes.

Basically many Nodejs Developer makes use of Nodemon while developing & testing nodejs application so that they can make use of feature i.e. Nodemon automatically restart the application when it finds any code file changes.

However, If the nodejs program crashes due to some error, Nodemon will stop and give use this error on console screen:

nodemon app crashed - waiting for file changes before starting

The above info about app crash update on screen it very useful for developer to understand at which line of code nodejs is getting crashed.

support if the nodemon auto restart immediately after showing above error message “nodemon app crashed” on screen, the developer will never be able to debug the issue and code will run with endless error loop.


How to make nodemon automatically get restart when the program crash without waiting for file changes.

Suppose you are aware of this & want’s nodemon to automatically restart the nodejs application on crash, then you can simple run node application by using below command:

Windows

nodemon -x 'node index.js || copy /b index.js +,,'

Linux / Mac

nodemon -x 'node index.js || touch index.js'

pm2 restart node script on crash

Many nodejs developer make use of pm2 (process manager for node.js) in production, To keep their node application script running in background.

if you use pm2 to run you nodejs application and want’s it to auto restart on crash then use below command:

pm2 start index.js --watch