To study more about Connectivity Library in Flutter then visit here
Introduction to Flutter Connectivity Library
This Plugin is very useful if your app need internet connection to run the application perfectly, This Library allows your flutter Application to Discover Network Connectivity. This Flutter Library will also check if your mobile is currently using cellular mobile data or is using WiFi Connection.
This Flutter Plugin Perfectly works for Both Android and iOS devices, So it is been rated with 100 points in Flutter Library Store.
Then, let’s Start with adding this library into our Flutter Project.
Step 1: Adding Dependencies
Open pubspec.yaml file and add the following dependencies
dependencies:
connectivity: ^0.4.8+2 // add this line
After adding the dependencies just hit Pub Get, This will download all the required packages of Flutter Connectivity library into your flutter project.
Step 2 : Import the Class plackage
Then, After adding the dependencies just you need to do is import the class package wherever it’s required.
import 'package:connectivity/connectivity.dart';
Step 3 : Snippet code How to use function or method from connectivity library
How to detect internet connection in flutter.
if internet connected, then Weather it mobile Data or Wifi Connection.
var connectivityResult = await (Connectivity().checkConnectivity());
if (connectivityResult == ConnectivityResult.none) {
// Mobile is not Connected to Internet
}
else if (connectivityResult == ConnectivityResult.mobile) {
// I am connected to a mobile network.
}
else if (connectivityResult == ConnectivityResult.wifi) {
// I am connected to a wifi network.
}
If mobile connectivity is Wifi then, This is How to get Wifi details in flutter.
var wifiBSSID = await (Connectivity().getWifiBSSID());
var wifiIP = await (Connectivity().getWifiIP());network
var wifiName = await (Connectivity().getWifiName());wifi network
You can Also keep checking OnConnectivityChanged Like this :
@override
initState() {
super.initState();
subscription = Connectivity().onConnectivityChanged.listen((ConnectivityResult result) {
// Got a new connectivity status!
})
}
// Be sure to cancel subscription after you are done
@override
dispose() {
super.dispose();
subscription.cancel();
}
Complete Source Code – How to check if internet is connected in Flutter?
main.dart
Copy Paste Below Lines of Flutter Code in main.dart file
import 'package:flutter/material.dart';
import 'package:connectivity/connectivity.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeConnect(),
);
}
}
class HomeConnect extends StatefulWidget {
@override
_HomeConnectState createState() => _HomeConnectState();
}
class _HomeConnectState extends State<HomeConnect> {
var wifiBSSID;
var wifiIP;
var wifiName;
bool iswificonnected = false;
bool isInternetOn = true;
@override
void initState() {
// TODO: implement initState
super.initState();
GetConnect(); // calls getconnect method to check which type if connection it
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Connectivity..."),
),
body: isInternetOn
? iswificonnected ? ShowWifi() : ShowMobile()
: buildAlertDialog(),
);
}
AlertDialog buildAlertDialog() {
return AlertDialog(
title: Text(
"You are not Connected to Internet",
style: TextStyle(fontStyle: FontStyle.italic),
),
);
}
Center ShowWifi() {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
" Your are connected to ${iswificonnected ? "WIFI" : "MOBILE DATA"}"),
Text(iswificonnected ? "$wifiBSSID" : "Not Wifi"),
Text("$wifiIP"),
Text("$wifiName")
],
),
);
}
Center ShowMobile() {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(" Your are Connected to MOBILE DATA"),
],
),
);
}
void GetConnect() async {
var connectivityResult = await (Connectivity().checkConnectivity());
if (connectivityResult == ConnectivityResult.none) {
setState(() {
isInternetOn = false;
});
} else if (connectivityResult == ConnectivityResult.mobile) {
iswificonnected = false;
} else if (connectivityResult == ConnectivityResult.wifi) {
iswificonnected = true;
setState(() async {
wifiBSSID = await (Connectivity().getWifiBSSID());
wifiIP = await (Connectivity().getWifiIP());
wifiName = await (Connectivity().getWifiName());
});
}
}
}
Hi Guys, Welcome to Proto Coders Point, In this android Tutorial we will make use of a StoryView android library developed by Ankit Kumar bxute to show stories like social media.
Hi Guys, Welcome to Proto Coders Point, This is PART 3 of WhatsApp Clone UI using Flutter, In this part we will continue with cloning design for Call Tab Page of WhatsApp.
If you have not gone through the previous part of WhatsApp UI Clone using Flutter, Then make sure to go through it.
Social Media Story View Page development using Flutter
Hi Guys, Welcome to Proto Coders Point, In this Flutter Tutorial we will make use of a Flutter Library “Story_View” using which you can easily create a whatsapp stories or instagram stories page.
Introduction to story view package library
Story View Flutter Library Widget is very useful for the Flutter developer, By using this library you can display Social media stories pages just like WhatsApp Status Story or Instagram Status Story View.
FINAL RESULT OF THIS LIBRARY
First Story
Second Story
Third Story
Fourth Story
Features of StoryView Widget Library
You can add
Simple Text Status story.
Images Stories.
GIF Images Stories.
Video Stories( with caching enabled).
Gesture for Previous,Next and Pause the Story.
Caption for each story items.
A animated Progress indicator on top of every story views
Let’s get Started with adding this library into your flutter project
Social Media Story View Page development using Flutter
Step 1 : Adding Story View dependencies into your flutter project
Open pubspec.yaml file and add the story view dependencies under dependencies section
dependencies:
story_view: ^0.10.0 // add this line
Step 2: Import the story_view.dart file in main.dart
open main.dart file and import the class file in it
import 'package:story_view/story_view.dart';
Step 3: Creating StoryItem list and adding it to HomePage(main.dart) with widget
Create a storyController
final storyController = StoryController(); // used to control the media story
Generate a list of stories
//creating the list of Social media Storys
// Social Media Story List
List<StoryItem> storyItemsList = [
StoryItem.text("Hello Guys, 👉", Colors.blue[500]), //story 1
StoryItem.text(
"Welcome to Proto Coders Point, 👉", Colors.red[600]), //story 2
StoryItem.pageImage(
NetworkImage(
"https://pbs.twimg.com/profile_images/1243950916362895361/Z__-CJxz_400x400.jpg"),
caption: "THINK TWICE CODE ONCE"), //story 3
StoryItem.pageImage(
NetworkImage(
"https://protocoderspoint.com/wp-content/uploads/2019/10/protocoderspoint-rectangle-round-.png"),
caption: "HOPE THIS TUTORIAL HELP YOU"), //story 4
];
then, Add the storycontroller and story item list into StoryView() widget
StoryView(
storyItemsList, // this is list of StoryItems
controller: storyController,
repeat: true, // set it to false if
onComplete: () => print("STORY COMPLETED"), // what sould happen when story ends
),
Complete code Copy Paste it in main.dart file
main.dart
import 'package:flutter/material.dart';
import 'package:story_view/story_view.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
//removing debug banner
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// lets start creating Social media Story view
final storyController = StoryController(); // used to control the media story
//creating the list of Social media Storys
// Social Media Story List
List<StoryItem> storyItemsList = [
StoryItem.text("Hello Guys, 👉", Colors.blue[500]), //story 1
StoryItem.text(
"Welcome to Proto Coders Point, 👉", Colors.red[600]), //story 2
StoryItem.pageImage(
NetworkImage(
"https://pbs.twimg.com/profile_images/1243950916362895361/Z__-CJxz_400x400.jpg"),
caption: "THINK TWICE CODE ONCE"), //story 3
StoryItem.pageImage(
NetworkImage(
"https://protocoderspoint.com/wp-content/uploads/2019/10/protocoderspoint-rectangle-round-.png"),
caption: "HOPE THIS TUTORIAL HELP YOU"), //story 4
];
@override
Widget build(BuildContext context) {
return Material(
child: StoryView(
storyItemsList,
controller: storyController,
repeat: true,
onComplete: () => print("STORY COMPLETED"),
),
);
}
}
Then, your flutter application is ready to show a Story page with 4 StoryItems.
For more in detail about this Story View Page Flutter library visit official here
Hi Guys, Welcome to Proto Coders Point, This is PART 2 of WhatsApp Clone UI using Flutter, In this part we will continue with clone designing Status Tab Page.
If you have not gone through the first part of WhatsApp UI Clone using Flutter, Then make sure to go through it. Here
In last section i have forgot to remove FloatingActionButton from Other Tabs, In Other words FloatingActionButton(New Chat Button) Should be Visible only in ChatScreen, So we need to Disable the button when user navigate/swipe towords other screen.
Then, To do so Follow this steps:
Step 1: Add a bool variable
Open main.dart file or whatever you have names your homepage
bool showFloatingB = true;
Step 2: Replace the initState()
@override
void initState() {
// TODO: implement initState
super.initState();
// total tab we are creating is 4 so : length is 4 : initialIndex is set to position 1
_tabController = new TabController(length: 4, vsync: this, initialIndex: 1);
_tabController.addListener(() {
if (_tabController.index == 1) {
setState(() {
showFloatingB = true;
});
} else {
setState(() {
showFloatingB = false;
});
}
});
}
In InitState method, we are checking _tabController index using _tabController.addListener.
If _tabController.index == 1 then it’s chatScreen visible so we set the showFloatingB to true else, We set showFloatingB to false.
Here, we are setting the FloatingActionButton to be visible only if the showFloatingB is true else floatingActionButton is set to null, that means floatingActionButton is not visible.
WhatsApp Clone App UI Design using Flutter Status Tab Page | PART 2
Step 1: WhatsApp UI StatusPage Using Flutter
Now,Open StatusPage.dart file and copy paste the below lines of code in it.
Then, Now Open pubspec.yaml file, and add flutter depencencies for the story_view flutter library package.
dependencies:
story_view: ^0.10.0
Step 3: Create a new dart file StoryPage.dart
right click on lib > New > dart file and name it as StoryPage.dart
Then, Copy Paste the below lines of dart code.
import 'package:flutter/material.dart';
import 'package:story_view/story_view.dart';
class StoryPage extends StatefulWidget {
@override
_StoryPageState createState() => _StoryPageState();
}
class _StoryPageState extends State<StoryPage> {
final storycontroller = StoryController(); //a controller for your story
final List<StoryItem> storyItems = [
StoryItem.text("Hello Guys, Welcome to Proto Coders Point",Colors.blue[500]), // Story 1
StoryItem.pageImage(NetworkImage("https://protocoderspoint.com/wpcontent/uploads/2019/10/protocoderspoint-rectangle-round-.png")), //Story 2
// you can add as many as whatsapp story in this list
];
@override
Widget build(BuildContext context) {
return Material(
child: StoryView(
storyItems,
controller: storycontroller,
inline: false,
repeat: false,
onComplete: () => Navigator.pop(context), // when storys ends , the StoryPage wil be poped from the view
),
);
}
}
There you go Part 2 is Completed, your Flutter whatsapp clone Ui Design is ready to show ChatScreen and StatusScreen with WhatsApp Story Clone page.
