HOW TO CHECK IF USER IS ONLINE OR OFFLINE IN FLUTTER

In this tutorial, we’ll learn how to implement Online & Offline connectivity in flutter apps. Their time comes when we need to check the Internet connection. If the user doesn’t have an internet connection, then we’ll show them Drop Offline connection, which will be an Animated Container widget. It will also work both Wifi connectivity and mobile data.

Flutter is an Open Source project by Google Which allows us to Create App For Both Android & IOS Platform. So For this connectivity, we will use a Flutter package name flutter_offline. This plugin perfectly works for both Platform iOS and Android app. By using this Package You can Also check Connection for Android & IOS Platform, which is the Tinny Package.

💻 Installation

First, you will need to add package name flutter_offline:

In the dependencies: section of your pubspec.yaml, add the following lines as :

Now run Flutter package get in your terminal which we’ll install flutter_offline package.

⚡️ Import

we’re Going to Wrap offlineBuilder with Builder widget because with the help of Builder Widget so we can show OfflineBuilder

With the help of the Bool Variable, we can access Connectivity state, with the help of Connectivity State, we can implement online & offline connectivity in the flutter app.

1. //main.dart
2. import 'package:flutter/material.dart';
3. import 'package:flutter_offline/flutter_offline.dart';
5. void main() => runApp(new MyApp());
7. class MyApp extends StatelessWidget {
8. @override
9. Widget build(BuildContext context) {
10. return MaterialApp(
11. debugShowCheckedModeBanner: false,
12. home: Scaffold(
13. appBar: AppBar(
14. title: Text("Connection"),
15. ),
16. body: Builder(
17. builder: (BuildContext context) {
18. return OfflineBuilder(
19. connectivityBuilder: (BuildContext context,
20. ConnectivityResult connectivity, Widget child) {
21. final bool connected =
22. connectivity != ConnectivityResult.none;
23. return Stack(
24. fit: StackFit.expand,
25. children: [
26. child,
27. Positioned(
28. left: 0.0,
29. right: 0.0,
30. height: 32.0,
31. child: AnimatedContainer(
32. duration: const Duration(milliseconds: 300),
33. color:
34. connected ? Color(0xFF00EE44) : Color(0xFFEE4400),
35. child: connected
36. ? Row(
37. mainAxisAlignment: MainAxisAlignment.center,
38. children: <Widget>[
39. Text(
40. "OFFLINE",
41. style: TextStyle(color: Colors.white),
42. ),
44. ],
45. )
46. : Row(
47. mainAxisAlignment: MainAxisAlignment.center,
48. children: <Widget>[
49. Text(
50. "OFFLINE",
51. style: TextStyle(color: Colors.white),
52. ),
53. SizedBox(
54. width: 8.0,
55. ),
56. SizedBox(
57. width: 12.0,
58. height: 12.0,
59. child: CircularProgressIndicator(
60. strokeWidth: 2.0,
61. valueColor:
62. AlwaysStoppedAnimation<Color>(
63. Colors.white),
64. ),
65. ),
66. ],
67. ),
68. ),
69. ),
70. ],
71. );
72. },
73. child: Center(
74. child: Text("ONLINE Or OFFLINE"),
75. ),
76. );
77. },
78. )),
79. );
80. }
81. }

Continue Reading →

Add Google Admob Ads To Your Flutter APP 2020

ADD GOOGLE ADMOB ADS TO YOUR FLUTTER APP (BEST AND EASY WAY)

n this tutorial, I will show you how to Implement Admob ads in a Flutter app by using Firebase_admob packages to easily implement ads into a Flutter app. As we can say Flutter is Fast & Really Easy Way to Make Android apps. In This Tutorial, I am  Going to show Demo Ads by Admob like Banner Ads & Interstitial Ads.

Google Admob is an Easy Way to Monetize your Android and iOS apps, which will generate revenue from your app. Google Admob can be Displayed Banner Ads, Interstitial Ads & Video Ads. Google Admob is the Prime Monetization Platform for iOS and Android apps.

If you Don’t know how to Create a Flutter app, check out Getting started with Flutter official tutorial.

We’re going to begin by adding a firebase_admob package to our dependencies in our pubspec.yaml file:

And press Ctrl + S  Get flutter package get with exit code 0

Its Demo Ads. Not For Real One

This guide will explain to you understand, how to Implement Admob Ads in a flutter. It’s Important to enable Demo Ads during Development So that you can click on them without Violate ‘Admob Policy‘. Disclaimer Don’t click on your Own Real Admob Ads either it will violate Admob Policy by Google 

 For Android User, AndroidManifest changes:

You Need to Add the Following Line in the androidmanifest.xml to Avoid  crash on the launch of your Android app

<meta-data                                                    
    android:name="com.google.android.gms.ads.APPLICATION_ID"   
    android:value="[ADMOB_APP_ID]"/>                          

For iOS User, Info.plist changes:

You Need to Add the Following line Info.plist  to Avoid Crash on the launch of your iOS App

<key>GADApplicationIdentifier</key>                           
<string>[ADMOB_APP_ID]</string>                               

Add import 'package:firebase_admob/firebase_admob.dart';

into main.dart just below material.dart line.

Create one const String variable & give an Empty Space Or Write 'Mobile_id'

const String testDevice = 'Mobile_id';

Okay After that Create  MobileAdTargetingInfo for implementing Keyword, test devices & nonPersonalizedAds.

After that, We Created Two Variables First BannerAd & Second Variable For Interstitial Ads

	static const MobileAdTargetingInfo targetingInfo = MobileAdTargetingInfo(
	testDevices: testDevice != null ? <String>[testDevice] : null,
	nonPersonalizedAds: true,
	keywords: <String>['Game', 'Mario'],
	);
	BannerAd _bannerAd;
	InterstitialAd _interstitialAd;
	//Banner Ads
	BannerAd createBannerAd() {
	return BannerAd(
	adUnitId: BannerAd.testAdUnitId,
	//Change BannerAd adUnitId with Admob ID
	size: AdSize.banner,
	targetingInfo: targetingInfo,
	listener: (MobileAdEvent event) {
	print("BannerAd $event");
	});
	}
	//Interstitial Ads
	InterstitialAd createInterstitialAd() {
	return InterstitialAd(
	adUnitId: InterstitialAd.testAdUnitId,
	//Change Interstitial AdUnitId with Admob ID
	targetingInfo: targetingInfo,
	listener: (MobileAdEvent event) {
	print("IntersttialAd $event");
	});
	}

view rawmain.dart hosted with ❤ by GitHub

After that, We are going to create initState for initializing Our Banners Ads whenever User Open Flutter apps it will automatically Initialize Banner ads in the Bottom Bar

	@override
	void initState() {
	FirebaseAdMob.instance.initialize(appId: BannerAd.testAdUnitId);
	//Change appId With Admob Id
	_bannerAd = createBannerAd()
	..load()
	..show();
	super.initState();
	}
	@override
	void dispose() {
	_bannerAd.dispose();
	_interstitialAd.dispose();
	super.dispose();
	}

view rawmain.dart hosted with ❤ by GitHub

After Creating InitState We need to implement RaisedButton where we are going to initialized Interstitial Ads

In the RaisedButton, On Onpressed button add Properties like to Load Interstitial Ads

Admob Ads

Full Code:

	import 'package:flutter/material.dart';
	import 'package:firebase_admob/firebase_admob.dart';
	const String testDevice = 'MobileId';
	void main() => runApp(MyApp());
	class MyApp extends StatefulWidget {
	@override
	_MyAppState createState() => _MyAppState();
	}
	class _MyAppState extends State<MyApp> {
	static const MobileAdTargetingInfo targetingInfo = MobileAdTargetingInfo(
	testDevices: testDevice != null ? <String>[testDevice] : null,
	nonPersonalizedAds: true,
	keywords: <String>['Game', 'Mario'],
	);
	BannerAd _bannerAd;
	InterstitialAd _interstitialAd;
	BannerAd createBannerAd() {
	return BannerAd(
	adUnitId: BannerAd.testAdUnitId,
	//Change BannerAd adUnitId with Admob ID
	size: AdSize.banner,
	targetingInfo: targetingInfo,
	listener: (MobileAdEvent event) {
	print("BannerAd $event");
	});
	}
	InterstitialAd createInterstitialAd() {
	return InterstitialAd(
	adUnitId: InterstitialAd.testAdUnitId,
	//Change Interstitial AdUnitId with Admob ID
	targetingInfo: targetingInfo,
	listener: (MobileAdEvent event) {
	print("IntersttialAd $event");
	});
	}
	@override
	void initState() {
	FirebaseAdMob.instance.initialize(appId: BannerAd.testAdUnitId);
	//Change appId With Admob Id
	_bannerAd = createBannerAd()
	..load()
	..show();
	super.initState();
	}
	@override
	void dispose() {
	_bannerAd.dispose();
	_interstitialAd.dispose();
	super.dispose();
	}
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	debugShowCheckedModeBanner: false,
	title: 'Flutter Demo',
	theme: ThemeData(),
	home: Scaffold(
	appBar: AppBar(
	title: Text("Demo App"),
	),
	body: Center(
	child: RaisedButton(
	child: Text('Click on Ads'),
	onPressed: () {
	createInterstitialAd()
	..load()
	..show();
	},
	)),
	),
	);
	}
	}

view rawmain.dart hosted with ❤ by GitHub

You can see the full source code of the project here.

Enjoyed the Tutorial? Please leave a LIKE 👍 to show your support and appreciation

💬 If you have a question about anything, I’ll do my best to answer it.

Continue Reading →