Snack Bar Internet connection action in FlutterFlow

Snack Bar Internet Connection Action in FlutterFlow (2026 Update)

FlutterFlow has matured considerably as a low-code platform, and in 2026 it supports custom functions, widgets, and actions with a level of polish that makes building production-ready apps genuinely achievable. One hallmark of a well-crafted app is graceful handling of connectivity loss. In this article we walk through showing the end user a Snack Bar when there is no internet connection — a small but meaningful UX detail that separates a rough prototype from something that feels finished. We only surface the Snack Bar when connectivity is absent; there is no need to interrupt a user who is already online.

The approach uses a custom action on the Scaffold of each relevant page, calling the internet_connection_checker package to determine connectivity status and conditionally triggering a Snack Bar. The steps below reflect FlutterFlow's current interface and the latest stable version of the package.

TL:DR – With a small amount of custom Dart code, carefully contained inside FlutterFlow's Custom Actions system, you can give your app a noticeably more professional feel. The custom code stays isolated, manageable, and well away from the visual builder.

What's changed in 2026

When this technique was first documented, FlutterFlow's custom code tooling was relatively basic and the community relied heavily on workarounds shared in the legacy forum. Several things have shifted since then:

• FlutterFlow's Custom Code editor has improved significantly. Syntax highlighting, inline error reporting, and a dedicated testing panel make writing and validating custom actions faster. Many of the rough edges that required ignoring editor errors in earlier versions have been smoothed out.
• The internet_connection_checker package has been updated. The package has seen active maintenance and the version pinning in older tutorials is now outdated. You should reference the latest stable version on pub.dev rather than hardcoding ^0.0.1.
• A newer companion package, internet_connection_checker_plus, is now widely used. It extends the original with additional address checks and slightly better reliability on mobile networks. Both packages remain valid choices; the core implementation is nearly identical.
• FlutterFlow's Action Flow Editor is now more visual. The sequence-based action builder has been refined with clearer conditional branching, making the two-step pattern described below easier to configure without ambiguity.
• The legacy community forum referenced in older versions of this article has been retired. FlutterFlow's official community and documentation have moved to the main FlutterFlow community platform and updated docs site.

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 an individual port and timeout. Sensible defaults are provided so you can get started without any configuration. You can find the package and its documentation at https://pub.dev/packages/internet_connection_checker. If you want the extended feature set, the companion package internet_connection_checker_plus is worth reviewing — the API is almost identical, so switching between them is straightforward.

It is worth noting that neither package checks whether your backend or API is actually reachable — they confirm that the device has a route to the internet. For most Snack Bar notification use cases this is exactly the right level of signal.

Custom Actions in FlutterFlow

FlutterFlow's Custom Actions editor lets you write Dart code that references any package available on pub.dev. You define the package dependency, declare input and output parameters, and FlutterFlow integrates the action into its visual Action Flow Editor as a first-class step. The official documentation is kept up to date at https://docs.flutterflow.io/customizing-your-app/custom-actions and is the best reference for the current interface.

Setting up the Custom Action

The steps below reflect FlutterFlow as it stands in 2026. The interface labels and panel layout may differ slightly from older screenshots you find elsewhere.

• Navigate to Custom Code in the FlutterFlow left sidebar, select the Custom Actions tab, and click + Add to create a new action.
• Name the action checkInternetConnection. Set the return value to Boolean. Under Pubspec Dependencies, add the package. Use the current stable version from pub.dev rather than a pinned old version — at the time of writing this looks like:

  internet_connection_checker_plus: ^2.0.0

  Always verify the latest stable version on pub.dev before pinning.
• Paste in the action code. The logic is intentionally simple — all we need is a boolean result:

  import 'package:internet_connection_checker_plus/internet_connection_checker_plus.dart';
  
  Future<bool> checkInternetConnection() async {
    bool result = await InternetConnection().hasInternetAccess;
    return result;
  }

  If you prefer to stick with the original internet_connection_checker package, replace the import and class name accordingly — the pattern is the same.
• Use the Check Errors button in the Custom Code editor. In recent versions of FlutterFlow the editor resolves package imports more reliably than it once did, so genuine errors are now worth investigating rather than dismissing.
• Click Save. Your custom action is now available throughout the project's Action Flow Editor.

Using the Custom Action to power a Snack Bar

Actions attached to a page's Scaffold run on page load, making them ideal for connectivity checks. Here is how to wire up the two-step sequence.

• Open the page you want to add the check to. In the Widget Tree, select the Scaffold, then open the Actions panel on the right.
• Add the first action — 1 · Check Internet:
  • Trigger: On Page Load
  • Action type: Custom Action → select checkInternetConnection
  • Output variable: create a local page variable, for example isConnected, of type Boolean
• Add the second action — 2 · No Internet:
  • Trigger: On Page Load (chained after the first)
  • Action type: Show Snack Bar
  • Message: something user-friendly such as "No internet connection — some features may be unavailable."
  • Condition: only run this action when isConnected equals false. Set this using the Conditional toggle in the Action Flow Editor.
• Save the page and run a test build. On a physical device, enable Airplane mode before launching the app — the Snack Bar should appear within a second or two of the page loading.

Applying this across multiple pages

If your app has several pages where connectivity matters, repeating this setup manually on each Scaffold is tedious. A cleaner approach available in FlutterFlow today is to encapsulate the logic in a reusable component or use FlutterFlow's App State combined with a global action triggered from your initial route. That way the connectivity check runs once and the result is available project-wide. For simpler apps, per-page Scaffold actions remain perfectly adequate.

A note on tone and user experience

The Snack Bar is a low-friction way to communicate connectivity status without blocking the user. Keep the message brief and constructive — tell the user what is happening and, where possible, what they can still do. Avoid alarmist language. If your app has a meaningful offline mode, the Snack Bar is also a good place to direct users toward it with an action button.

This small detail — surfacing a clear, calm message when connectivity is lost — is one of those refinements that users rarely notice when it is present, but immediately feel when it is absent. It is worth the modest effort to add it to every page that depends on a live connection.