How to show 'No Internet' notifier

Hello Koders! In this guide, I’m going to show you how to show No Internet notifier.

It is actually very easy to implement it in your app. I saw one of the post yesterday where a user wanted to implement this in his app but did not not get the solution, so I tried to make a simple guide for all the beginners. :slight_smile:

What’s the use of it?

It will make your app look more professional and give it an edge over basic apps.

How to implement it?

Components required:

  1. Network component (available in Kodular)
  2. Layouts

Follow the steps:

i) On the screen initialization, we will use if-then block to check if the device is connected to the internet or not. If the device is connected to the internet, then it will show the layout which works online, else, it will show the custom dialog(which can be created using notifier component). See the blocks. :point_down: :point_down: :point_down:

ii) The ‘Retry’ button available in the dialog can be used to check the current network state. See the blocks for button:

iii) This block will again refresh the screen if the device is connected to the internet.

Annotation 2020-08-27 110158

So these are few steps to show the ‘No Internet’ notifier.

You can also use Clock component to check if the device is currently connected to the internet or not, but the clock will affect the main thread and the app may lag a bit.

Update:

@bestprintsf suggested to add a procedure about how to webview when there is no connection

Here is what you can do:

As you can in the above steps that there one layout named ‘online’. If you want to hide the webview, whenever there is no internet connection, just add replace that online layout with WebView layout and set it to false. :slight_smile:

If you want me to add a clock guide, drop your vote here.

  • Add a clock guide.
  • It is sufficient for me.

0 voters

Hope it helps. :slight_smile:

5 Likes

Good guide !!!
Can i make a suggestion ?
Add how to hide a webview so that it does not show when there is no connection

Nice Guide

When calling notifier add there block webview.visible to false

:rofl: :rofl:
Yes… i know that I just suggested @golumaths100 to add it to the guide for beginners !!!

1 Like

Ohhh…I thought you were asking :grin::sweat_smile:

2 Likes

Okay. I will add it. Thanks for your suggestion. :sweat_smile:

Maybe because I put ‘?’ at the end. :grimacing:

1 Like

Great guide.

1 Like

thanks @golumaths100 very helpful…

1 Like