Snack Bar Internet connection action in FlutterFlow

Using internet_connection_checker with FlutterFlow

FlutterFlow can be used to build even more sophisticated apps now that it supports custom functions, widgets and actions. This additional functionality helps make apps more professional. In this article we will show the end user a Snack Bar if there is no Internet. It is a nice polished app behaviour. It is not necessary to show a snack bar if we are connected, as we hope to be. We are just trying to inform the end user that they are not connected and this serves as a hint that there may be some differences in App behaviour.

The snack bar can be implemented by setting up actions on the scaffold on each page to check the internet connection and subsequently show a snack bar if there is no connection.

TL:DR — With some effort it is straighforward to make a FlutterFlow app feel more professional for your end users. Sure there's now custom code in a low code platform but it is carefully contained in specific functions in FlutterFlow and doesnt need to get out of hand.

internet_connection_checker

This is a Pure Dart Utility library that checks for an Active Internet connection by opening a socket to a list of specified addresses, each with individual port and timeout. Defaults are provided for convenience. You can find out all about it here https://pub.dev/packages/internet_connection_checker

Custom Actions in FlutterFlow

Using the FlutterFlow Custom Actions editor, you can write dart code that uses a package that is available on pub.dev. FlutterFlow allows you to define the package, and its incoming/outgoing parameters as well as check the Custom Action for any errors from the app builder. You can read the documentation here https://docs.flutterflow.io/customizing-your-app/custom-actions

Setting up the Custom Action

Serge Middendorf outlined how to use this custom function in the legacy community forum https://legacy-community.flutterflow.io/c/community-custom-widgets/check-internetconnection so we are building on this starting point.

• Click on custom functions in FlutterFlow, select Custom Actions and click the Create button.
• Give the action a name. I chose checkInternetConnection, set the Return value to 'On' and the data type to 'Boolean' and add the required pubspec dependency internet_connection_checker: ^0.0.1
• Paste in the code. All we want is a true or false result.

  import 'package:internet_connection_checker/internet_connection_checker.dart';
  
  Future<bool> checkInternetConnection() async {
    bool result = await InternetConnectionChecker().hasConnection;
    return result;
  }

• You can ignore the errors in the code editor in FlutterFlow. FlutterFlow doesnt know how to deal with them, and ignores them. Hopefully they will eventually be suppressable.

  

• Once you have completed the Action click save. You just created a custom action using an external package dependency.

• Now we can go ahead and use the action in our FlutterFlow app.

Using the Custom Action to provide the status for a Snack Bar

You can add actions to the Scaffold of any page in FlutterFlow. A sequence of actions can build your app logic.

• Go to the page in FlutterFlow that you want to add the action to. Select the Scaffold from the Widget Tree, and click the Actions tab
• Click 'Add Action' and create the two actions required to check internet connectivity then display the Snack Bar when there is no Internet. The Scaffold has two actions, a Custom Action which is called '1 - Check Internet' and a Show Snack Bar action which is called '2 - No Internet'.

  1 - Check Internet This is an 'On Page Load' action that calls the Custom Action 'checkInternetConnection' and sets the Output Variable 'HomeScaffoldConnected'. to True if the Internet is connected. 2 - No Internet This is an 'On Page Load' action that shows a Snack Bar 'Not Connected to the Internet' and only runs on the Condition that  HomeScaffoldConnected is False

• Now you can build and test your app on a real device. Set it to Airplane mode and load your app - you should see the Snack Bar!