MOBILE APPLICATION DEVELOPMENT

Facebook-Clone

Session 2021-2025

Project Documentation

Submitted To
Sir Waseem

Submitted By
Abdullah Mazher 2021-CS-198

Department of Computer Science,

University of Engineering and Technology,
Lahore
Table of Contents
1. Introduction .................................................................................................................................. 3
1.1 Description .............................................................................................................................. 3
1.2 Features ................................................................................................................................... 3
1.3 Technology Used ...................................................................................................................... 3

2. Project Snapshots ......................................................................................................................... 4

3. Project Diagrams ........................................................................................................................... 5
3.1 Class Diagram........................................................................................................................... 5
3.2 Architecture Diagram .............................................................................................................. 6

4. Project Code.................................................................................................................................. 7
4.1 Interface.dart ........................................................................................................................... 7
4.2 Profile.dart ............................................................................................................................ 10

4.3 CreateAccount.dart ............................................................................................................... 12

4.4 Privacy.dart ........................................................................................................................... 15

4.5 User.dart ............................................................................................................................... 19

2|Pag e
1. Introduction
1.1 Project Description

In response to the challenges faced by individuals with visual impairments, the

Flutter app navigation system has been meticulously designed to offer a sophisticated,
yet intuitive, solution for seamless navigation. With a primary focus on accessibility,
this application integrates cutting-edge features such as voice input and output, text
input and output, and advanced shortest path navigation algorithms. The overarching
goal is to empower users with visual impairments, fostering independence and
confidence in their ability to navigate diverse environments

1.2 Features

 Create Account
 Login to account
 Edit Bio, Profile Picture, Email
 View Users
 Send & Receive Requests
 View and upload Posts
 Save the last profile information
 Audit Tables

3|Pag e
 1.3 Technology Used

The technology used is flutter .dart framework configured with mongoose

database model integrated with node.js backend server which helps manage data
smoothly. To handle server-side operations, we integrated a Node.js backend server.
These technologies work together to make our Facebook clone user-friendly and
efficient

2. Project Snapshots and Code Snippets

1-Create Account 2-Interface

4|Pag e
 3- Profile 4- Profile Update

5- Pricacy 6- Interface

5|Pag e
3. Project Diagrams
3.1 Class Diagram

3.2 Architecture Diagram

6|Pag e
4. Some Snippets of Code
3.1. Interface.dart
@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: loggedInUser != null

? Row(

children: [

CircleAvatar(

backgroundImage: AssetImage('assets/im/abd.jpeg'),

),

SizedBox(width: 8.0),

Text(loggedInUser!.name),

],

: Text('Home'),

actions: [

IconButton(

icon: Icon(Icons.menu),

onPressed: () {

_showOptionsMenu();

},

7|Pag e
 ),

IconButton(

icon: Icon(Icons.person),

onPressed: loadrequests,

),

IconButton(

icon: Icon(Icons.logout),

onPressed: () {

Navigator.pop(context);

},

),

],

),

body: Column(

children: [

Padding(

padding: const EdgeInsets.all(8.0),

child: Row(

children: [

Expanded(

child: TextField(

controller: _textEditingController,

decoration: InputDecoration(

hintText: 'Type something...',

),

),

8|Pag e
 ),

IconButton(

icon: Icon(Icons.attach_file),

onPressed: () {

// Call the function here

},

),

IconButton(

icon: Icon(Icons.send),

onPressed: () => _postMessage(),

),

IconButton(

icon: Icon(Icons.post_add),

onPressed: () {},

),

],

),

),

SizedBox(height: 16.0),

Expanded(

child: posts.isNotEmpty

? ListView.separated(

itemCount: posts.length,

separatorBuilder: (context, index) => Divider(),

itemBuilder: (context, index) {

final post = posts[index];

9|Pag e
 return _buildPost(post);

},

: Center(

child: Text('No posts yet.'),

),

),

],

),

floatingActionButton: FloatingActionButton(

onPressed: () {

Navigator.push(

context,

MaterialPageRoute(builder: (context) => ProfilePage()),

);

},

child: Icon(Icons.person),

),

),

);

3.2. Profile.dart
@override

Widget build(BuildContext context) {

return Scaffold(

10 | P a g e
appBar: AppBar(

title: Text('Profile'),

),

body: Padding(

padding: const EdgeInsets.all(16.0),

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

CircleAvatar(

radius: 70,

backgroundImage: _selectedImage != null

? FileImage(_selectedImage!)

: AssetImage(UserData.profilePic) as ImageProvider,

),

SizedBox(height: 15),

IconButton(onPressed: _pickImage, icon: Icon(Icons.camera_alt)),

SizedBox(height: 10),

// Text fields for changing name, password, and bio

_buildTextField("Name", _nameController),

_buildTextField("Password", _passwordController),

_buildTextField("Bio", _bioController),

SizedBox(height: 20),

ElevatedButton(

onPressed: () {

updateProfile(UserData.username, _bioController.text);

//keeprecord(UserData.username, UserData.bio);

11 | P a g e
 print("done");

// Update the user profile and invoke the onSave callback

UserData.name = _nameController.text;

UserData.bio = _bioController.text;

UserData.profilePic =

_selectedImage?.path ?? UserData.profilePic;

// Navigate back to the previous screen (ProfilePage)

Navigator.pop(context);

},

child: Text('Save Changes'),

),

],

),

),

);

3.3. CreateAccount.dart
@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Create-Account'),

),

body: Center(

child: Container(

padding: const EdgeInsets.all(16.0),

12 | P a g e
child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Icon(

Icons.facebook,

size: 40.0,

color: Colors.blue,

),

Text(

'Facebook-Clone',

style: TextStyle(

color: Colors.blue,

fontSize: 30.0,

fontWeight: FontWeight.w900,

),

),

SizedBox(height: 16.0),

NameTextBox(controller: nameController),

SizedBox(height: 16.0),

EmailTextBox(controller: emailController),

SizedBox(height: 16.0),

PasswordTextBox(controller: passwordController),

SizedBox(height: 16.0),

ConfirmPasswordBox(controller: passwordController),

SizedBox(height: 16.0),

ElevatedButton(

13 | P a g e
 onPressed: () {

String name = nameController.text;

String email = emailController.text;

String password = passwordController.text;

addbio(email);

registerUser(name, email, password);

displayMessage(context,

'Account has been created $name, $email, $password');

},

style: ElevatedButton.styleFrom(

primary: Colors.white,

side: BorderSide(

color: Colors.blue,

width: 2.0,

),

),

child: Text(

'Create Account',

style: TextStyle(

color: Colors.blue,

),

),

),

],

),

),

14 | P a g e
 ),

);

3.4 Privacy.dart
@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Privacy'),

),

body: Padding(

padding: const EdgeInsets.all(16.0),

child: Column(

crossAxisAlignment: CrossAxisAlignment.start,

children: [

Text(

'Account Visibility',

style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),

),

Row(

children: [

Radio(

value: true,

groupValue: isAccountPublic,

onChanged: (value) {

15 | P a g e
 setState(() {

isAccountPublic = true;

});

},

),

Text('Public'),

SizedBox(width: 20),

Radio(

value: false,

groupValue: isAccountPublic,

onChanged: (value) {

setState(() {

isAccountPublic = false;

});

},

),

Text('Private'),

],

),

SizedBox(height: 20),

Text(

'Messaging Permissions',

style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),

),

CheckboxListTile(

title: Text('Receive Messages'),

16 | P a g e
 value: canReceiveMessages,

onChanged: (value) {

setState(() {

canReceiveMessages = value!;

});

},

),

CheckboxListTile(

title: Text('Receive Requests'),

value: canReceiveMessages,

onChanged: (value) {

setState(() {

canReceiveMessages = value!;

});

},

),

CheckboxListTile(

title: Text('Receive Notifications'),

value: canReceiveMessages,

onChanged: (value) {

setState(() {

canReceiveMessages = value!;

});

},

),

SizedBox(height: 20),

17 | P a g e
Text(

'Post Interaction Permissions',

style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),

),

CheckboxListTile(

title: Text('Like Comments'),

value: canLikeComments,

onChanged: (value) {

setState(() {

canLikeComments = value!;

});

},

),

CheckboxListTile(

title: Text('Comment on Posts'),

value: canCommentOnPosts,

onChanged: (value) {

setState(() {

canCommentOnPosts = value!;

});

},

),

CheckboxListTile(

title: Text('Share Posts'),

value: canSharePosts,

onChanged: (value) {

18 | P a g e
 setState(() {

canSharePosts = value!;

});

},

),

SizedBox(height: 20),

ElevatedButton(

onPressed: () {

// Handle save button press, save the privacy settings

},

child: Text('Save'),

),

],

),

),

);

3.5 Users.dart
@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Users'),

),

body: users.isEmpty

19 | P a g e
 ? Center(

child: CircularProgressIndicator(),

: ListView.builder(

itemCount: users.length,

itemBuilder: (context, index) {

return _buildUserCard(users[index]);

},

),

);

Widget _buildUserCard(Map<String, dynamic> user) {

bool isRequestSent =

sentRequests.contains(user['id']); // Check if request is sent

return Card(

margin: EdgeInsets.symmetric(vertical: 8, horizontal: 16),

child: ListTile(

leading: CircleAvatar(

radius: 30,

),

title: Text(user['name'] ?? 'Unknown'),

subtitle: Text(user['email'] ?? 'No email'),

trailing: ElevatedButton(

onPressed: isRequestSent

? null // Disable button if request is already sent

20 | P a g e
 : () {

// logic to send friend request here

_sendFriendRequest(user['email'].toString(), user['name']);

setState(() {

sentRequests.add(user['_id']);

});

},

child: Text(isRequestSent ? 'Request Sent' : 'Send Request'),

),

),

);

21 | P a g e