Home Blog Page 78

How to check if internet is connected in Flutter? | Flutter Connectivity

0
Flutter connectivity - how to check if mobile is connected to internet or no
Flutter connectivity - how to check if mobile is connected to internet or no

Hi Guys, Welcome to Proto Coders Point, In this Flutter Tutorial we gonna see how to check if Internet is Connected in flutter using Flutter Connectivity Library. And if the Internet is Connect then whether it is using Mobile data or is in Wifi Connection. how to check internet connection continuously in flutter.

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.

Final Output screen of this project

VIDEO TUTORIAL ON FLUTTER CHECK INTERNET CONNECTION

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());
      });

   
    }
  }
}

 

Recommended Tech Articles

android check internet connection continuously

fetching data in flutter and displaying in listview – http example

android php mysql login

How to create stories pages like social media ? | StoryView android

0
social media storyview android library

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.

WhatsApp like Story/status view in android

A Android Library for social media stories/status.

DEMO OF FINAL APP OUTPUT

THAT SHOWS STORY VIEW

How to add StoryView in Android Application?

Ok Then, let’s begin adding this library in our android project.

Step 1: Create new android project in android studio

offcourse you need to create  a new android project or you just open any existing android project is yu have.

In Android Studio > File > New > New Project

Give a name to this project, In my case i have named it as “Social Media StoryView”. 

Then Hit the NEXT BUTTON.

Step 2: Add maven jitpack

open built.gradle(root level) and add this maven jitpack

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }  // add this line 
    }
}

Step 3: Add the Dependencies for StoryView library

Then, Open build.gradle (App level) and add this dependencies

dependencies {
   implementation 'com.github.bxute:StoryView:v1.0'  // add this line

}

After adding both the maven and StoryView Dependencies now hit that Sync now button.

Step 4: Add the xml code in activitymain.xml file

open activitymain.xml file and add the below lines of xml code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:layout_margin="10dp"
    android:padding="10dp"
    android:orientation="horizontal">


    <xute.storyview.StoryView
        android:id="@+id/storyView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:spaceBetweenImageAndIndicator="1dp"
        app:storyImageRadius="10dp"
        app:storyItemIndicatorWidth="1dp" />   <!-- Here is the Story view preview on tap will expand and show full screen stories -->

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="15sp"
        android:paddingTop="10dp"
        android:layout_marginStart="10dp"
        android:textStyle="bold"
        android:text="My Status"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12sp"
            android:layout_marginStart="10dp"
            android:text="Today, 2.31 PM"/>
    </LinearLayout>

</LinearLayout>

Step 5: Add java code for StoryView

Then, Now open MainActivity.java file and copy paste the below lines of code in it

package com.protocoderspoint.socialmediastoryview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import java.util.ArrayList;

import xute.storyview.StoryModel;
import xute.storyview.StoryView;

public class MainActivity extends AppCompatActivity {
    StoryView storyView;   // get the object for StoryView

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       storyView = findViewById(R.id.storyView); // find the XML view using findViewById
        storyView.resetStoryVisits(); // reset the storyview
        
        ArrayList<StoryModel> StoriesList = new ArrayList<>();  // create a Array list of Stories

        StoriesList.add(new StoryModel("https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80","Status 1","Yesterday"));
        StoriesList.add(new StoryModel("https://www.bigstockphoto.com/images/homepage/module-6.jpg","Status 2","10:15 PM"));
        StoriesList.add(new StoryModel("https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg","Satus 3","Today,2:31 PM"));
        storyView.setImageUris(StoriesList);  // finally set the stories to storyview
    }
}

There you go..! your android app is ready to show Stories like any other social media application.

If you are interested in flutter check out how to show Story view in flutter app

WhatsApp Clone App UI Design using Flutter | Call Tab Page | PART 3

0
WhatsApp Clone App UI Design using Flutter Call Tab Page

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.

Chat Page Part 1 : WhatsApp Clone

Status Part 2 : WhatsApp Clone

Then, Fine let’s Start with 3rd Tab Page which is WhatsApp Calls

Step 1: Create a data model for Calls data to be shown in WhatsApp CALL Page

Under DataModels package.

Create a new dart file and name it as Call_Models.dart and paste the below dummy class calls data list.

Call_Models.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Call_Models {
  final String name;
  final String datetime;
  final Widget callicon;
  final String profilepic;

  Call_Models({this.name, this.datetime, this.callicon, this.profilepic});
}

List<Call_Models> call_dummy_data = [
  new Call_Models(
      name: "Rajat Palankar",
      datetime: "April 28, 11.50 AM",
      callicon: Icon(
        Icons.call_missed,
        color: Colors.red,
      ),
      profilepic:
          "https://pbs.twimg.com/profile_images/1243950916362895361/Z__-CJxz_400x400.jpg"),
  new Call_Models(
      name: "George",
      datetime: "April 29, 04:30 AM",
      callicon: Icon(
        Icons.call_missed,
        color: Colors.red,
      ),
      profilepic:
          "https://cdn.pixabay.com/photo/2015/06/22/08/40/child-817373__340.jpg"),
  new Call_Models(
      name: "Leo",
      datetime: "April 25, 05:30 AM",
      callicon: Icon(
        Icons.call_missed,
        color: Colors.red,
      ),
      profilepic:
          "https://cdn.pixabay.com/photo/2016/11/29/02/28/attractive-1866858__340.jpg"),
];

In the above Calls Model data class i have simple created a dummy data list of calls records.

Step 2: Designing call page and showing the calls data in list format

Open CallsScreen.dart and paste the below lines of flutter code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutterwhatsappclone/DataModels/Call_Models.dart';

class CallsScreen extends StatefulWidget {
  @override
  _CallsScreenState createState() => _CallsScreenState();
}

class _CallsScreenState extends State<CallsScreen> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: call_dummy_data.length,
      itemBuilder: (context, index) => Column(
        children: <Widget>[
          Divider(
            height: 10.0,
          ),
          ListTile(
            leading: CircleAvatar(
              radius: 27,
              foregroundColor: Theme.of(context).primaryColor,
              backgroundColor: Colors.grey,
              backgroundImage: NetworkImage(call_dummy_data[index].profilepic),
            ),
            title: Text(
              call_dummy_data[index].name,
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
            ),
            subtitle: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                call_dummy_data[index].callicon,
                Text(
                  call_dummy_data[index].datetime,
                  style: TextStyle(fontSize: 15),
                )
              ],
            ),
            trailing: Icon(
              Icons.call,
              color: Colors.green,
            ),
          )
        ],
      ),
    );
  }
}

Here i am making use of ListView.Builder Widget with ListTile as itemBuilder to show our dummy data in list format to the WhatApp Clone Users.

That’s all for PART 3, your Flutter App with Whatsapp UI is ready.

Social Media Story View Page development using Flutter

0
Social Media Story View Page development using Flutter
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

Features of StoryView Widget Library

You can add

  1. Simple Text Status story.
  2. Images Stories.
  3. GIF Images Stories.
  4. Video Stories( with caching enabled).
  5. Gesture for Previous,Next and Pause the Story.
  6. Caption for each story items.
  7. 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

WhatsApp Clone App UI Design using Flutter | Status Tab Page | PART 2

0
WhatsApp Clone App UI Design using Flutter Status Tab Page

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

Build a WhatsApp Clone App UI Design using Flutter | Material Design

FINAL RESULT OF THIS PART

Fine Then Let’s continue.

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.

Step 3 : Now Replace FloatingActionButton Widget
floatingActionButton: showFloatingB ? FloatingActionButton(
              onPressed: () {
                print("Floating Button Clicked");
              },
              backgroundColor: Theme.of(context).accentColor,
              child: Icon(
                Icons.message,
                color: Colors.white,
              ),
            )
          : null,

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.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:whatsappcloneflutter/StoryPage.dart';

class Statuspage extends StatefulWidget {
  @override
  _StatuspageState createState() => _StatuspageState();
}

class _StatuspageState extends State<Statuspage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey[300],
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Card(
            color: Colors.white,
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: ListTile(
                leading: Stack(
                  children: <Widget>[
                    CircleAvatar(
                      radius: 30,
                      backgroundImage: NetworkImage(
                          "https://cdn2.vectorstock.com/i/1000x1000/23/81/default-avatar-profile-icon-vector-18942381.jpg"),
                    ),
                    Positioned(
                      bottom: 0.0,
                      right: 1.0,
                      child: Container(
                        height: 20,
                        width: 20,
                        child: Icon(
                          Icons.add,
                          color: Colors.white,
                          size: 15,
                        ),
                        decoration: BoxDecoration(
                            color: Colors.green, shape: BoxShape.circle),
                      ),
                    ),
                  ],
                ),
                title: Text(
                  "My Status",
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                subtitle: Text("Tap to add status update"),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              "Viewed updates",
              style: TextStyle(color: Colors.grey, fontWeight: FontWeight.bold),
            ),
          ),
          Expanded(
              child: Container(
            padding: const EdgeInsets.all(8.0),
            color: Colors.white,
            child: ListView(
              children: <Widget>[
                ListTile(
                  leading: CircleAvatar(
                    radius: 30,
                    backgroundImage: NetworkImage(
                        "https://pbs.twimg.com/profile_images/1243950916362895361/Z__-CJxz_400x400.jpg"),
                  ),
                  title: Text(
                    "Rajat Palankar",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  subtitle: Text(
                    " 45 minutes ago",
                  ),
                  onTap: () => Navigator.push(context,
                      MaterialPageRoute(builder: (context) => StoryPage())),
                )
              ],
            ),
          )),
        ],
      ),
    );
  }
}

Step 2: Add Story View Flutter library

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.

Build WhatsApp Clone App UI Design using Flutter

3
Clone of whatsapp application UI Design using Flutter
Clone of whatsapp application UI Design

Hi Guys, Welcome to Proto Coders Point, In this Flutter Tutorial we will learn to build WhatsApp Clone App using Flutter – UI Design.

Final Result of this Project

whatsapp clone Ui design
whatsapp clone Ui design

Follow the below step to build/create a whatsapp clone using flutter.

or Watch the Video Tutorial on flutter whatsapp clone tutorial

Note this Article is devided in 3 parts for each tabs in whatsapp app Status bar clone, whatsapp Call Tab

Step 1: Create a new Flutter Project

OffCourse you need to create a new Flutter Project or Open any Existing Project,

In my Case, I am making use of Android Studio as my IDE to Build WhatsApp Clone UI.

How to create new Flutter Project in android Studio?

File > New > New Flutter Project > Give a name to your project ” Whatsapp Clone UI Design”

Step 2: Create new package “Data_Model” and create a “Chat_Data_Model”

Right Click on lib > New > Package name the package as “Data_Model” or anything as per your choice.

package directory creation in flutter project
package directory creation in flutter project

Then you need a class Data Model that holds list of Dummy Chat list so

Under “Data_Model” directory create a new dart file named “Chat_Data_Model.dart”

chat_data_model

Then, Paste the below code

Chat_Data_Model.dart

This contains dummy data list of whatsapp chat details like

  • name,
  • message,
  • time,
  • and profile picture
class Chat_Data_Model {
  final String name;
  final String message;
  final String time;
  final String profilepic;

  Chat_Data_Model({this.name, this.message, this.time, this.profilepic});
}

// dummy data for chats page  listview

List<Chat_Data_Model> dummyData = [
  new Chat_Data_Model(
      name: "Rajat Palankar",
      message: " Hi... Whatsapp How are you ?",
      time: "04:30 AM",
      profilepic:
          "https://pbs.twimg.com/profile_images/1243950916362895361/Z__-CJxz_400x400.jpg"),
  new Chat_Data_Model(
      name: "Oliver Wyman",
      message: " Wassup Bro",
      time: "04:30 AM",
      profilepic:
          "https://www.oliverwyman.com/content/dam/oliver-wyman/v2/careers/profiles/scottbk-profile-460x460.jpg"),
  new Chat_Data_Model(
      name: "George",
      message: " Hi... cheerful confined.... ",
      time: "04:30 AM",
      profilepic:
          "https://cdn.pixabay.com/photo/2015/06/22/08/40/child-817373__340.jpg"),
  new Chat_Data_Model(
      name: "	Ava",
      message: " Hi... Situation admitting promotion...",
      time: "04:30 AM",
      profilepic:
          "https://cdn.pixabay.com/photo/2016/11/29/03/36/beautiful-1867093__340.jpg"),
  new Chat_Data_Model(
      name: "Grace",
      message: " Hi... Whatsapp How are you ?",
      time: "04:30 AM",
      profilepic:
          "https://cdn.pixabay.com/photo/2015/11/26/00/14/fashion-1063100__340.jpg"),
  new Chat_Data_Model(
      name: "Leo",
      message: " Hi... Total state as merit court green",
      time: "04:30 AM",
      profilepic:
          "https://cdn.pixabay.com/photo/2016/11/29/02/28/attractive-1866858__340.jpg"),
  new Chat_Data_Model(
      name: "Jack",
      message: " Hi... As he instantly on discovery concluded to.",
      time: "04:30 AM",
      profilepic:
          "https://cdn.pixabay.com/photo/2017/06/26/02/47/people-2442565__340.jpg"),
  new Chat_Data_Model(
      name: "Amelia",
      message: " Hi... Face do with in need of wife paid that be. ",
      time: "04:30 AM",
      profilepic:
          "https://cdn.pixabay.com/photo/2018/01/24/19/49/people-3104635__340.jpg"),
  new Chat_Data_Model(
      name: "Sophia",
      message: " Hi...  Given mrs she first china",
      time: "04:30 AM",
      profilepic:
          "https://cdn.pixabay.com/photo/2017/11/23/07/47/babe-2972221__340.jpg"),
  new Chat_Data_Model(
      name: "Harry",
      message: " Hi... Is post each that just leaf no....",
      time: "04:30 AM",
      profilepic:
          "https://cdn.pixabay.com/photo/2018/02/21/15/06/woman-3170568__340.jpg"),
  new Chat_Data_Model(
      name: "Isla",
      message: " Hi...Surprise not wandered speedily ...",
      time: "04:30 AM",
      profilepic:
          "https://cdn.pixabay.com/photo/2016/01/19/18/04/man-1150058__340.jpg"),
  new Chat_Data_Model(
      name: "Emily",
      message: " Hi...Extended kindness trifling remember ...",
      time: "04:30 AM",
      profilepic:
          "https://cdn.pixabay.com/photo/2015/07/31/15/01/man-869215__340.jpg"),
  new Chat_Data_Model(
      name: "Mia",
      message: " Hi...She exposed painted fifteen are noisier....",
      time: "04:30 AM",
      profilepic:
          "https://cdn.pixabay.com/photo/2016/03/24/09/10/men-1276384_960_720.jpg"),
  new Chat_Data_Model(
      name: "Poppy",
      message: " Hi... Admiration we surrounded possession ...",
      time: "04:30 AM",
      profilepic:
          "https://cdn.pixabay.com/photo/2015/07/14/06/06/homeless-844208__340.jpg"),
  new Chat_Data_Model(
      name: "Alfie",
      message: " Hi... Entire any had depend and figure winter.",
      time: "04:30 AM",
      profilepic:
          "https://cdn.pixabay.com/photo/2017/08/12/18/31/male-2634974__340.jpg"),
];

Step 3 : Create a new Package/ Directory for TabPages

Right click on lib > New >Package name the package as “TabPages”  or anything it’s left to you.

package directory creation in flutter project
package directory creation in flutter project

Create 4 dart files under TabPages folder

How to Create dart file in android Studio?

Right Click Tabpages > New > dart

like that create 4 dart file.

  1. Callspage.dart
  2. CameraPage.dart
  3. Chatpage.dart
  4. Statuspage.dart
Tabpages for whats app clone tabs

Then Just Copy below dart page code in those dart file you have created just now

1. CallsPage.dart

import 'package:flutter/material.dart';

class CallsPage extends StatefulWidget {
  @override
  _CallsPageState createState() => _CallsPageState();
}

class _CallsPageState extends State<CallsPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("Call Page"),
    );
  }
}

2. CameraPage.dart

import 'package:flutter/material.dart';

class CameraPage extends StatefulWidget {
  @override
  _CameraPageState createState() => _CameraPageState();
}

class _CameraPageState extends State<CameraPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("Camera Page"),
    );
  }
}

3. Statuspage.dart

import 'package:flutter/material.dart';

class Statuspage extends StatefulWidget {
  @override
  _StatuspageState createState() => _StatuspageState();
}

class _StatuspageState extends State<Statuspage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("Status Page"),
    );
  }
}

4. ChatsPage.dart

import 'package:flutter/material.dart';
import 'package:whatsappcloneflutter/Data_Model/Chat_Data_Model.dart';

class ChatPage extends StatefulWidget {
  @override
  _ChatPageState createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: dummyData.length,
      itemBuilder: (context, index) => Column(
        children: <Widget>[
          Divider(
            height: 10.0,
          ),
          ListTile(
            leading: CircleAvatar(
              radius: 20,
              foregroundColor: Theme.of(context).primaryColor,
              backgroundColor: Colors.grey,
              backgroundImage: NetworkImage(dummyData[index].profilepic),
            ),
            title: new Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  dummyData[index].name,
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                Text(
                  dummyData[index].time,
                  style: TextStyle(fontSize: 14.0),
                ),
              ],
            ),
            subtitle: Container(
              padding: const EdgeInsets.only(top: 5.0),
              child: Text(
                dummyData[index].message,
                style: TextStyle(color: Colors.grey, fontSize: 16.0),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Step 4 : At Last open main.dart file and paste the below code

main.dart

import 'package:flutter/material.dart';
//importing all the whatsapp clone tab pages 
import 'package:whatsappcloneflutter/TabPages/CallsPage.dart';
import 'package:whatsappcloneflutter/TabPages/CameraPage.dart';
import 'package:whatsappcloneflutter/TabPages/ChatPage.dart';
import 'package:whatsappcloneflutter/TabPages/Statuspage.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'WhatApp Clone Example',
      theme: ThemeData(
          primaryColor: Color(0XFF075E54),
          accentColor: Color(0XFF25D366) // green color for whatapp clone theme
          ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

  @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);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("WhatsApp Clone app UI"),
        elevation: 0.5,
        bottom: TabBar(
          controller: _tabController,
          indicatorColor: Colors.white,
          tabs: <Widget>[
            // here we are creating 4 Tabs
            Tab(icon: Icon(Icons.camera_alt)),
            Tab(
              text: "CHATS",
            ),
            Tab(
              text: "STATUS",
            ),
            Tab(text: "CALLS")
          ],
        ),
        //we need 2 menu icons on app bar : search and more setting
        actions: <Widget>[
          Icon(Icons.search),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 7),
          ),
          Icon(Icons.more_vert)
        ],
      ),
      body: TabBarView(
        //this will work similar to fragment in android app
        controller: _tabController,
        //loading 4 pages in tabs
        children: <Widget>[CameraPage(), ChatPage(), Statuspage(), CallsPage()],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          print("Floating Button Clicked");
        },
        backgroundColor: Theme.of(context).accentColor,
        child: Icon(
          Icons.message,
          color: Colors.white,
        ),
      ),
    );
  }
}

There you go your Flutter app is now ready to show  WhatsApp UI Design Clone.

NOTE : Here we have just Created a Dummy Data for Chat Page, In upcoming updates we will create update data for status page and calls pages too.

If you face any kind of problem feel free to comment below. I will Replay in less then 12 hours Sure.

Thank you

Recommended Post

flutter instagram ui clone