{"id":4902,"date":"2021-11-07T19:55:25","date_gmt":"2021-11-07T18:55:25","guid":{"rendered":"https:\/\/duskosavic.com\/blog\/?p=4902"},"modified":"2021-11-18T10:12:35","modified_gmt":"2021-11-18T09:12:35","slug":"flutter-bloc-example-and-data-connection-checker-plugin","status":"publish","type":"post","link":"https:\/\/duskosavic.com\/blog\/flutter\/flutter-bloc-example-and-data-connection-checker-plugin\/","title":{"rendered":"Flutter BLoC Example and Data Connection Checker Plugin"},"content":{"rendered":"
This entry is part 2 of 2 in the series Developing Flutter Apps with BLoC Pattern<\/a><\/div>
\"Flutter<\/a>

Flutter BLoC Example Connectivity<\/p><\/div>\n

Flutter BLoC Example for Checking Data Connectivity<\/h1>\n

Checking whether there is Internet connection at any given time is a hallmark of a professionally crafted Flutter app. Here is a Flutter BLoC example using a well known DataConnectionChecker<\/a> plugin.<\/p>\n

In What Types of Apps Can We Use this Flutter BLoC Example for Checking Connectivity<\/h2>\n

Some apps have checking of the Internet signal as definitive requirement. For instance, the app for fishing tournaments<\/strong>: anglers go to the middle of the lake or river, catch the fish, make a photo of it and then release. The tournament consists of sending the images of the fish to the server, where the judges approve or ban each particular image, for each angler. It is unlikely that there will be Internet connection in the middle of the lake, so the app should store the images on the device for later use. Once the device is in the reach, the app will upload the images and the corresponding geographical coordinates automatically.<\/p>\n

Survey apps<\/strong> require similar functionality. The survey may take place in the heart of the forest, with no Internet in sight (literally). Again, once the device is in the reach, it should upload the surveys automatically.<\/p>\n

Data Connection Checker and BLoC<\/h2>\n

In general, all Flutter apps will benefit from the type of code presented in this article. Wrap each API call with this code and your app will not stop working if there is no Internet connection. Instead, it will send an appropriate message and continue working in offline mode until the connection is present again.<\/p>\n

We shall use a check connectivity plugin called DataConnectionChecker<\/a> (data_connection_checker<\/em>) in conjunction with BLoC — Business Logic Components.<\/p>\n

From BLoCs, we obtain<\/p>\n

— readable source code,<\/p>\n

— data accessible from various parts of the app,<\/p>\n

— UI elements to show the state of the connectivity, with<\/p>\n

— automatic refreshment of the screen.<\/p>\n

The complete code is here: Use BLoC and Data Connection Checker Plugin in Flutter to See Whether The Device is Connected to the Internet Or Not<\/a><\/p>\n

The DataConnectionChecker will send http request to some of the most stable IP addresses, like the ones in Google, and if there is at least one positive ping, it is maintained that the device is online. The plugin does not check wi-fi access, as all by itself, it is not a guarantee that there is Internet connection behind it.<\/p>\n

The BLoC + DataConnectionChecker App That We Are Making<\/h2>\n

Here is what it looks like when running. On the left, the device is connected to the Internet and the green circle and text Online is present. Middle screen — we are turning AirPlane mode on, meaning there will be no Internet connection until we turn that switch Off again. The third screen shows the state of Internet connection when Airplane mode is off — the red circle and word Offline.<\/p>\n\n\n\n
\n

\n

\n

\"\"<\/a>

Disconnected from the Internet<\/p><\/div><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

main.dart<\/h2>\n

Here is the code for the main part of the app. The MultiBlocProvider part is crucial: we can have as many BlocProviders in it as we want; here, we have just one, NetwordBloc, in its separate BlocProvider. We make NetworkBloc active by add a listen connection, and as its child, we show ConnectivityShow as the next screen.<\/p>\n

\r\nimport 'package:bloc_connectivity\/packages\/network\/network_bloc.dart';\r\nimport 'package:bloc_connectivity\/packages\/network\/network_event.dart';\r\nimport 'package:bloc_connectivity\/packages\/network\/network_main.dart';\r\nimport 'package:flutter\/material.dart';\r\n\r\nimport 'package:flutter_bloc\/flutter_bloc.dart';\r\n\r\nvoid main() {\r\n  runApp(MultiBlocProvider(\r\n        providers: [\r\n          BlocProvider(\r\n            create: (context) =&gt; NetworkBloc()..add(ListenConnection()),\r\n            child: ConnectivityShow(),\r\n          ),\r\n        ],\r\n        child: const MyApp(),\r\n      ),\r\n    );\r\n}\r\n\r\nclass MyApp extends StatelessWidget {\r\n  const MyApp({Key key}) : super(key: key);\r\n\r\n  @override\r\n  Widget build(BuildContext context) {\r\n    return MaterialApp(\r\n      debugShowCheckedModeBanner: false,\r\n      title: 'BLoC and Connectivity Demo',\r\n      theme: ThemeData(\r\n        primarySwatch: Colors.blue,\r\n      ),\r\n      home: const MyHomePage(title: 'BLoC and Connectivity Demo'),\r\n    );\r\n  }\r\n}\r\n\r\nclass MyHomePage extends StatefulWidget {\r\n  const MyHomePage({Key key, this.title}) : super(key: key);\r\n\r\n  final String title;\r\n\r\n  @override\r\n  State&lt;MyHomePage&gt; createState() =&gt; _MyHomePageState();\r\n}\r\n\r\nclass _MyHomePageState extends State&lt;MyHomePage&gt; {\r\n\r\n  @override\r\n  Widget build(BuildContext context) {\r\n\r\n    String onLineText = 'Online';\r\n    String offLineText = 'Offline';\r\n    return Scaffold(\r\n      appBar: AppBar(\r\n        title: Text(widget.title),\r\n      ),\r\n      body: Center(\r\n        child: Column(\r\n          mainAxisAlignment: MainAxisAlignment.center,\r\n          children: &lt;Widget&gt;[\r\n            const Text(\r\n              'Status of connectivity',\r\n              style:TextStyle(color: Colors.black, fontSize: 21)\r\n            ),\r\n          Container(height: 20,),\r\n          ConnectivityShow(\r\n              onLineText: onLineText, offLineText: offLineText),\r\n          ],\r\n        ),\r\n      ),\r\n    );\r\n  }\r\n}\r\n\r\n<\/pre>\n
ConnectivityShow.dart<\/h2>\n
In this file we present the results to the screen, as seen in the above text.<\/p>\n
\r\nimport 'package:bloc_connectivity\/packages\/network\/network_bloc.dart';\r\nimport 'package:bloc_connectivity\/packages\/network\/network_event.dart';\r\nimport 'package:bloc_connectivity\/packages\/network\/network_state.dart';\r\nimport 'package:flutter\/material.dart';\r\nimport 'package:flutter_bloc\/flutter_bloc.dart';\r\n\r\nvoid main() {\r\n  runApp(Connectivity());\r\n}\r\n\r\nclass Connectivity extends StatelessWidget {\r\n  @override\r\n  Widget build(BuildContext context) {\r\n    return Scaffold(\r\n      body: BlocProvider(\r\n        create: (context) =&gt; NetworkBloc()..add(ListenConnection()),\r\n        child: ConnectivityShow(onLineText: 'Online', offLineText: 'Offline'),\r\n      ),\r\n    );\r\n  }\r\n}\r\n\r\nclass ConnectivityShow extends StatelessWidget {\r\n  String onLineText = 'Online';\r\n  String offLineText = 'Offline';\r\n\r\n  ConnectivityShow({Key key, this.offLineText, this.onLineText})\r\n      : super(key: key);\r\n\r\n  @override\r\n  Widget build(BuildContext context) {\r\n    String onlineImageAddress = 'assets\/drawable\/online.png';\r\n    String offlineImageAddress = 'assets\/drawable\/offline.png';\r\n    return Center(\r\n      child: BlocBuilder&lt;NetworkBloc, NetworkState&gt;(\r\n        builder: (context, state) {\r\n          if (state is ConnectionFailure) {\r\n            return buildRow(offlineImageAddress, offLineText);\r\n          }\r\n          if (state is ConnectionSuccess) {\r\n            return buildRow(onlineImageAddress, onLineText);\r\n          } else {\r\n            return const Text("Error");\r\n          }\r\n        },\r\n      ),\r\n    );\r\n  }\r\n\r\n  Row buildRow(String offlineImageAddress, String text) {\r\n    return Row(\r\n        mainAxisAlignment: MainAxisAlignment.center,\r\n        mainAxisSize: MainAxisSize.max,\r\n        crossAxisAlignment: CrossAxisAlignment.center,\r\n        children: &lt;Widget&gt;[\r\n          Container(\r\n              height: 20,\r\n              width: 20,\r\n              margin: const EdgeInsets.only(right: 10),\r\n              decoration: BoxDecoration(\r\n                  shape: BoxShape.circle,\r\n                  image: DecorationImage(\r\n                      fit: BoxFit.fill,\r\n                      image: AssetImage(\r\n                        offlineImageAddress,\r\n                      )))),\r\n          Align(\r\n            child: Container(\r\n                margin: const EdgeInsets.only(right: 10),\r\n                height: 20,\r\n                child: Text(text,\r\n                    style: const TextStyle(color: Colors.black, fontSize: 18))),\r\n          ),\r\n        ]);\r\n  }\r\n}\r\n\r\n<\/pre>\n
BlocBuilder<\/strong> connects NetworkBloc<\/strong> with NetworkState<\/strong>, and the state can be ConnectionFailure<\/strong> or ConnectionSuccess<\/strong>. In the if statement, we decide whether to show green or red circle — device is connected or it is not.<\/p>\n
Definition of BLoC for Connectivity<\/h2>\n
A BLoC in Flutter is a collection of at least three files, the names of which end in _bloc.dart<\/em>, _event.dart<\/em> and _state.dart<\/em>. In this case, we decided to start these names with “connect<\/em>“, so the files are network_bloc.dart<\/strong>, network _event.dart<\/strong> and network_state.dart<\/strong>. Here they are:<\/h3>\n
network_event.dart<\/p>\n
\r\nimport 'package:bloc_connectivity\/packages\/network\/network_state.dart';\r\n\r\nabstract class NetworkEvent {}\r\n\r\nclass ListenConnection extends NetworkEvent {}\r\n\r\nclass ConnectionChanged extends NetworkEvent {\r\n  NetworkState connection;\r\n  ConnectionChanged(this.connection);\r\n}\r\n<\/pre>\n
In all bloc files, we will first define an abstract class, followed by classes that inherit it. The extended classes can — but do not have to — have internal states. In this case, ListenConnection<\/strong> has not internal variable, while ConnectionChanged<\/strong> has one internal variable, connection<\/strong> of type NetworkState<\/strong>.<\/p>\n
network _bloc.dart<\/h3>\n
\r\nimport 'dart:async';\r\nimport 'package:bloc_connectivity\/packages\/network\/network_event.dart';\r\nimport 'package:bloc_connectivity\/packages\/network\/network_state.dart';\r\nimport 'package:data_connection_checker\/data_connection_checker.dart';\r\nimport 'package:flutter_bloc\/flutter_bloc.dart';\r\n\r\nclass NetworkBloc extends Bloc&lt;NetworkEvent, NetworkState&gt; {\r\n  NetworkBloc({this.subscription}) : super(ConnectionInitial());\r\n\r\n  StreamSubscription subscription;\r\n\r\n  @override\r\n  Stream&lt;NetworkState&gt; mapEventToState(NetworkEvent event) async* {\r\n    if (event is ListenConnection) {\r\n      subscription = DataConnectionChecker().onStatusChange.listen((status) {\r\n        add(ConnectionChanged(status == DataConnectionStatus.disconnected\r\n            ? ConnectionFailure()\r\n            : ConnectionSuccess()));\r\n      });\r\n    }\r\n    if (event is ConnectionChanged) yield event.connection;\r\n  }\r\n\r\n  @override\r\n  Future&lt;void&gt; close() {\r\n    subscription?.cancel();\r\n    return super.close();\r\n  }\r\n}\r\n<\/pre>\n
The “bloc” part of BLoC pattern is where the action happens. It connects events to states, in this case, it uses the DataConnectionChecker<\/strong> plugin to listen to its state. If connected, the state becomes ConnectionSuccess<\/strong> and vice versa, if disconnected, the state becomes ConnectionFailure<\/strong>. It is these states that we check in file ConnectivityShow<\/strong>.dart.<\/p>\n
network _state.dart<\/h3>\n
\r\nabstract class NetworkState {}\r\n\r\nclass ConnectionInitial extends NetworkState {}\r\n\r\nclass ConnectionSuccess extends NetworkState {}\r\n\r\nclass ConnectionFailure extends NetworkState {}<\/pre>\n
The NetworkState<\/strong> class is also abstract and contains the three most basic states — “initial”, “success” and “failure”. Many blocs wil have at least five or six states, for example, the authentication bloc could have states<\/p>\n\n\n\n\n\n
AuthenticationInitial<\/strong><\/td>\nAuthenticationResetPassword<\/strong><\/td>\n<\/tr>\n
AuthenticationFailure<\/strong><\/td>\nAuthenticationInProgress<\/strong><\/td>\n<\/tr>\n
AuthenticationSuccess<\/strong><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
and so on.<\/p>\n","protected":false},"excerpt":{"rendered":"
This entry is part 2 of 2 in the series Developing Flutter Apps with BLoC Pattern<\/a><\/div>
Flutter BLoC Example for Checking Data Connectivity Checking whether there is Internet connection at any given time is a hallmark of a professionally crafted Flutter app. Here is a Flutter BLoC example using a well known DataConnectionChecker plugin. In What … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[572,1],"tags":[698,700,699,4,702,573,673,188,701],"series":[705],"class_list":["post-4902","post","type-post","status-publish","format-standard","hentry","category-flutter","category-programming","tag-bloc","tag-connectivity","tag-dataconnectionchecker","tag-duskosaviccom","tag-fishing-tournement","tag-flutter","tag-mobile-apps","tag-programming-2","tag-survery","series-developing-flutter-apps-with-bloc-pattern"],"yoast_head":"\nFlutter BLoC Example and Data Connection Checker Plugin - DuskoSavic.com<\/title>\n<meta name=\"description\" content=\"Flutter BLoC example, using DataConnectionChecker plugin to show whether the device has Internet connection.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/duskosavic.com\/blog\/flutter\/flutter-bloc-example-and-data-connection-checker-plugin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flutter BLoC Example and Data Connection Checker Plugin - DuskoSavic.com\" \/>\n<meta property=\"og:description\" content=\"Flutter BLoC example, using DataConnectionChecker plugin to show whether the device has Internet connection.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/duskosavic.com\/blog\/flutter\/flutter-bloc-example-and-data-connection-checker-plugin\/\" \/>\n<meta property=\"og:site_name\" content=\"DuskoSavic.com\" \/>\n<meta property=\"article:published_time\" content=\"2021-11-07T18:55:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-18T09:12:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/flutter_bloc-300x255.png\" \/>\n<meta name=\"author\" content=\"Dusko\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dusko\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/flutter-bloc-example-and-data-connection-checker-plugin\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/flutter-bloc-example-and-data-connection-checker-plugin\\\/\"},\"author\":{\"name\":\"Dusko\",\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/#\\\/schema\\\/person\\\/5c90e82c5c70eaeee96d0b2efbfd4396\"},\"headline\":\"Flutter BLoC Example and Data Connection Checker Plugin\",\"datePublished\":\"2021-11-07T18:55:25+00:00\",\"dateModified\":\"2021-11-18T09:12:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/flutter-bloc-example-and-data-connection-checker-plugin\\\/\"},\"wordCount\":1393,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/#\\\/schema\\\/person\\\/5c90e82c5c70eaeee96d0b2efbfd4396\"},\"image\":{\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/flutter-bloc-example-and-data-connection-checker-plugin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/flutter_bloc-300x255.png\",\"keywords\":[\"BLoC\",\"connectivity\",\"DataConnectionChecker\",\"duskosavic.com\",\"fishing tournement\",\"flutter\",\"mobile apps\",\"programming\",\"survery\"],\"articleSection\":[\"Flutter\",\"Programming\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/flutter-bloc-example-and-data-connection-checker-plugin\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/flutter-bloc-example-and-data-connection-checker-plugin\\\/\",\"url\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/flutter-bloc-example-and-data-connection-checker-plugin\\\/\",\"name\":\"Flutter BLoC Example and Data Connection Checker Plugin - DuskoSavic.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/flutter-bloc-example-and-data-connection-checker-plugin\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/flutter-bloc-example-and-data-connection-checker-plugin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/flutter_bloc-300x255.png\",\"datePublished\":\"2021-11-07T18:55:25+00:00\",\"dateModified\":\"2021-11-18T09:12:35+00:00\",\"description\":\"Flutter BLoC example, using DataConnectionChecker plugin to show whether the device has Internet connection.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/flutter-bloc-example-and-data-connection-checker-plugin\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/flutter-bloc-example-and-data-connection-checker-plugin\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/flutter-bloc-example-and-data-connection-checker-plugin\\\/#primaryimage\",\"url\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/flutter_bloc.png\",\"contentUrl\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/flutter_bloc.png\",\"width\":1057,\"height\":897,\"caption\":\"Flutter BLoC Example Connectivity\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/flutter\\\/flutter-bloc-example-and-data-connection-checker-plugin\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flutter BLoC Example and Data Connection Checker Plugin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/\",\"name\":\"DuskoSavic.com\",\"description\":\"Rapid Mobile Apps Development With Flutter\",\"publisher\":{\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/#\\\/schema\\\/person\\\/5c90e82c5c70eaeee96d0b2efbfd4396\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/duskosavic.com\\\/blog\\\/#\\\/schema\\\/person\\\/5c90e82c5c70eaeee96d0b2efbfd4396\",\"name\":\"Dusko\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d249b8ea0c85e62fd0339dd1412b99f721f072408db9a9a546efe3a86a93b667?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d249b8ea0c85e62fd0339dd1412b99f721f072408db9a9a546efe3a86a93b667?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d249b8ea0c85e62fd0339dd1412b99f721f072408db9a9a546efe3a86a93b667?s=96&d=mm&r=g\",\"caption\":\"Dusko\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d249b8ea0c85e62fd0339dd1412b99f721f072408db9a9a546efe3a86a93b667?s=96&d=mm&r=g\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flutter BLoC Example and Data Connection Checker Plugin - DuskoSavic.com","description":"Flutter BLoC example, using DataConnectionChecker plugin to show whether the device has Internet connection.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/duskosavic.com\/blog\/flutter\/flutter-bloc-example-and-data-connection-checker-plugin\/","og_locale":"en_US","og_type":"article","og_title":"Flutter BLoC Example and Data Connection Checker Plugin - DuskoSavic.com","og_description":"Flutter BLoC example, using DataConnectionChecker plugin to show whether the device has Internet connection.","og_url":"https:\/\/duskosavic.com\/blog\/flutter\/flutter-bloc-example-and-data-connection-checker-plugin\/","og_site_name":"DuskoSavic.com","article_published_time":"2021-11-07T18:55:25+00:00","article_modified_time":"2021-11-18T09:12:35+00:00","og_image":[{"url":"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/flutter_bloc-300x255.png","type":"","width":"","height":""}],"author":"Dusko","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dusko","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/duskosavic.com\/blog\/flutter\/flutter-bloc-example-and-data-connection-checker-plugin\/#article","isPartOf":{"@id":"https:\/\/duskosavic.com\/blog\/flutter\/flutter-bloc-example-and-data-connection-checker-plugin\/"},"author":{"name":"Dusko","@id":"https:\/\/duskosavic.com\/blog\/#\/schema\/person\/5c90e82c5c70eaeee96d0b2efbfd4396"},"headline":"Flutter BLoC Example and Data Connection Checker Plugin","datePublished":"2021-11-07T18:55:25+00:00","dateModified":"2021-11-18T09:12:35+00:00","mainEntityOfPage":{"@id":"https:\/\/duskosavic.com\/blog\/flutter\/flutter-bloc-example-and-data-connection-checker-plugin\/"},"wordCount":1393,"commentCount":0,"publisher":{"@id":"https:\/\/duskosavic.com\/blog\/#\/schema\/person\/5c90e82c5c70eaeee96d0b2efbfd4396"},"image":{"@id":"https:\/\/duskosavic.com\/blog\/flutter\/flutter-bloc-example-and-data-connection-checker-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/flutter_bloc-300x255.png","keywords":["BLoC","connectivity","DataConnectionChecker","duskosavic.com","fishing tournement","flutter","mobile apps","programming","survery"],"articleSection":["Flutter","Programming"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/duskosavic.com\/blog\/flutter\/flutter-bloc-example-and-data-connection-checker-plugin\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/duskosavic.com\/blog\/flutter\/flutter-bloc-example-and-data-connection-checker-plugin\/","url":"https:\/\/duskosavic.com\/blog\/flutter\/flutter-bloc-example-and-data-connection-checker-plugin\/","name":"Flutter BLoC Example and Data Connection Checker Plugin - DuskoSavic.com","isPartOf":{"@id":"https:\/\/duskosavic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/duskosavic.com\/blog\/flutter\/flutter-bloc-example-and-data-connection-checker-plugin\/#primaryimage"},"image":{"@id":"https:\/\/duskosavic.com\/blog\/flutter\/flutter-bloc-example-and-data-connection-checker-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/flutter_bloc-300x255.png","datePublished":"2021-11-07T18:55:25+00:00","dateModified":"2021-11-18T09:12:35+00:00","description":"Flutter BLoC example, using DataConnectionChecker plugin to show whether the device has Internet connection.","breadcrumb":{"@id":"https:\/\/duskosavic.com\/blog\/flutter\/flutter-bloc-example-and-data-connection-checker-plugin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/duskosavic.com\/blog\/flutter\/flutter-bloc-example-and-data-connection-checker-plugin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/duskosavic.com\/blog\/flutter\/flutter-bloc-example-and-data-connection-checker-plugin\/#primaryimage","url":"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/flutter_bloc.png","contentUrl":"https:\/\/duskosavic.com\/blog\/wp-content\/uploads\/2021\/11\/flutter_bloc.png","width":1057,"height":897,"caption":"Flutter BLoC Example Connectivity"},{"@type":"BreadcrumbList","@id":"https:\/\/duskosavic.com\/blog\/flutter\/flutter-bloc-example-and-data-connection-checker-plugin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/duskosavic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Flutter BLoC Example and Data Connection Checker Plugin"}]},{"@type":"WebSite","@id":"https:\/\/duskosavic.com\/blog\/#website","url":"https:\/\/duskosavic.com\/blog\/","name":"DuskoSavic.com","description":"Rapid Mobile Apps Development With Flutter","publisher":{"@id":"https:\/\/duskosavic.com\/blog\/#\/schema\/person\/5c90e82c5c70eaeee96d0b2efbfd4396"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/duskosavic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/duskosavic.com\/blog\/#\/schema\/person\/5c90e82c5c70eaeee96d0b2efbfd4396","name":"Dusko","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/d249b8ea0c85e62fd0339dd1412b99f721f072408db9a9a546efe3a86a93b667?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/d249b8ea0c85e62fd0339dd1412b99f721f072408db9a9a546efe3a86a93b667?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d249b8ea0c85e62fd0339dd1412b99f721f072408db9a9a546efe3a86a93b667?s=96&d=mm&r=g","caption":"Dusko"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/d249b8ea0c85e62fd0339dd1412b99f721f072408db9a9a546efe3a86a93b667?s=96&d=mm&r=g"}}]}},"_links":{"self":[{"href":"https:\/\/duskosavic.com\/blog\/wp-json\/wp\/v2\/posts\/4902","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/duskosavic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/duskosavic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/duskosavic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/duskosavic.com\/blog\/wp-json\/wp\/v2\/comments?post=4902"}],"version-history":[{"count":35,"href":"https:\/\/duskosavic.com\/blog\/wp-json\/wp\/v2\/posts\/4902\/revisions"}],"predecessor-version":[{"id":4943,"href":"https:\/\/duskosavic.com\/blog\/wp-json\/wp\/v2\/posts\/4902\/revisions\/4943"}],"wp:attachment":[{"href":"https:\/\/duskosavic.com\/blog\/wp-json\/wp\/v2\/media?parent=4902"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/duskosavic.com\/blog\/wp-json\/wp\/v2\/categories?post=4902"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/duskosavic.com\/blog\/wp-json\/wp\/v2\/tags?post=4902"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/duskosavic.com\/blog\/wp-json\/wp\/v2\/series?post=4902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}