Flutter Templates
Building a Social Networking App with Flutter and Back4App

54min
Introduction
Creating a social networking app can be a complex task, but with Flutter and Back4App, you can streamline the development process. This tutorial will guide you through building a full-featured social networking app that includes user authentication, profile management, news feeds, friend connections, messaging, and notifications.
By the end of this tutorial, you will have a functional social networking app with the following features:
User Authentication: Secure sign-up and login processes.
User Profiles: Editable profiles with user information.
News Feeds: Display posts from friends and the user.
Friend Connections: Ability to send and accept friend requests.
Messaging: Real-time chat between users.
Notifications: Push notifications for friend requests, messages, and post interactions.
Prerequisites
To follow along with this tutorial, you will need:
Flutter SDK installed on your machine. Follow the official Flutter installation guide for your operating system.
Basic knowledge of Flutter and Dart. If you're new to Flutter, review the Flutter documentation to familiarize yourself with the basics.
An IDE or text editor such as Visual Studio Code or Android Studio.
A Back4App account. Sign up for a free account at Back4App.
Parse Server SDK for Flutter added to your project. Learn how to set it up by following the Back4App Flutter SDK Guide.
Step 1 – Setting Up the Flutter Project
1.1. Create a New Flutter Project
Open your terminal and run:
Bash
flutter create social_app
flutter create social_app
﻿
Navigate to the project directory:
Bash
cd social_app
cd social_app
﻿
1.2. Add Dependencies
Open pubspec.yaml and add the following dependencies:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  provider: ^6.0.0
  image_picker: ^0.8.4+6
  cached_network_image: ^3.2.0
  firebase_messaging: ^11.2.8
  uuid: ^3.0.6
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  provider: ^6.0.0
  image_picker: ^0.8.4+6
  cached_network_image: ^3.2.0
  firebase_messaging: ^11.2.8
  uuid: ^3.0.6
﻿
Run flutter pub get to install the packages.
Note: We are using:
parse_server_sdk_flutter for Back4App integration.
provider for state management.
image_picker for selecting profile and post images.
cached_network_image for efficient image loading.
firebase_messaging for push notifications.
uuid for generating unique IDs.
Step 2 – Setting Up Back4App
2.1. Create a New Back4App Application
Log in to your Back4App dashboard.
Click on "Create new App".
Enter a name for your application, e.g., "SocialApp", and click "Create".
2.2. Set Up the Data Models
We'll need to create several classes in Back4App:
User: Built-in class for user authentication.
Profile: Stores user profile information.
Post: Stores user posts.
FriendRequest: Manages friend requests between users.
Message: Stores messages between users.
2.2.1. Profile Class
Navigate to the "Database" section.
Click on "Create a class".
In the modal:
Select "Custom".
Enter "Profile" as the class name.
Click "Create class".
Add the following columns:
user: Type Pointer<_User>
username: Type String
fullName: Type String
bio: Type String
profilePicture: Type File
2.2.2. Post Class
Create a "Post" class with the following columns:
user: Type Pointer<_User>
content: Type String
image: Type File
createdAt: Type Date
2.2.3. FriendRequest Class
Create a "FriendRequest" class with the following columns:
fromUser: Type Pointer<_User>
toUser: Type Pointer<_User>
status: Type String (Values: "pending", "accepted", "rejected")
2.2.4. Message Class
Create a "Message" class with the following columns:
fromUser: Type Pointer<_User>
toUser: Type Pointer<_User>
content: Type String
createdAt: Type Date
2.3. Obtain Application Credentials
Navigate to App Settings > Security & Keys.
Note down your Application ID and Client Key.
Step 3 – Initializing Parse in Your Flutter App
Open lib/main.dart and modify it as follows:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import 'services/auth_service.dart';
import 'screens/login_screen.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<AuthService>(
      create: (_) => AuthService(),
      child: MaterialApp(
        title: 'Social App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: LoginScreen(),
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import 'services/auth_service.dart';
import 'screens/login_screen.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<AuthService>(
      create: (_) => AuthService(),
      child: MaterialApp(
        title: 'Social App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: LoginScreen(),
      ),
    );
  }
}
﻿
Replace 'YOUR_APPLICATION_ID' and 'YOUR_CLIENT_KEY' with your Back4App credentials.
We are using ChangeNotifierProvider to manage authentication state.
Step 4 – Implementing User Authentication
4.1. Create the Authentication Service
Create a new directory called services under lib and add a file named auth_service.dart:
Dart
// lib/services/auth_service.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService with ChangeNotifier {
  ParseUser? user;

  Future<bool> signUp(String username, String password, String email) async {
    user = ParseUser.createUser(username, password, email);

    final response = await user!.signUp();

    if (response.success) {
      notifyListeners();
      return true;
    } else {
      user = null;
      return false;
    }
  }

  Future<bool> login(String username, String password) async {
    user = ParseUser(username, password, null);

    final response = await user!.login();

    if (response.success) {
      notifyListeners();
      return true;
    } else {
      user = null;
      return false;
    }
  }

  Future<void> logout() async {
    if (user != null) {
      await user!.logout();
      user = null;
      notifyListeners();
    }
  }

  bool get isAuthenticated => user != null;
}
// lib/services/auth_service.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService with ChangeNotifier {
  ParseUser? user;

  Future<bool> signUp(String username, String password, String email) async {
    user = ParseUser.createUser(username, password, email);

    final response = await user!.signUp();

    if (response.success) {
      notifyListeners();
      return true;
    } else {
      user = null;
      return false;
    }
  }

  Future<bool> login(String username, String password) async {
    user = ParseUser(username, password, null);

    final response = await user!.login();

    if (response.success) {
      notifyListeners();
      return true;
    } else {
      user = null;
      return false;
    }
  }

  Future<void> logout() async {
    if (user != null) {
      await user!.logout();
      user = null;
      notifyListeners();
    }
  }

  bool get isAuthenticated => user != null;
}
﻿
4.2. Create the Login and Signup Screens
Create a directory called screens under lib and add login_screen.dart and signup_screen.dart.
4.2.1. Login Screen
Dart
// lib/screens/login_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import 'signup_screen.dart';
import 'home_screen.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _login() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    bool success = await authService.login(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
    );

    if (success) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Social App Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(onPressed: _login, child: Text('Login')),
            TextButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => SignupScreen()),
                );
              },
              child: Text('Don\'t have an account? Sign up'),
            )
          ],
        ),
      ),
    );
  }
}
// lib/screens/login_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import 'signup_screen.dart';
import 'home_screen.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _login() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    bool success = await authService.login(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
    );

    if (success) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Social App Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(onPressed: _login, child: Text('Login')),
            TextButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => SignupScreen()),
                );
              },
              child: Text('Don\'t have an account? Sign up'),
            )
          ],
        ),
      ),
    );
  }
}
﻿
4.2.2. Signup Screen
Dart
// lib/screens/signup_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import 'home_screen.dart';

class SignupScreen extends StatefulWidget {
  @override
  _SignupScreenState createState() => _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();

  void _signUp() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    bool success = await authService.signUp(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
      _emailController.text.trim(),
    );

    if (success) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Signup failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Social App Signup'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(onPressed: _signUp, child: Text('Sign Up')),
          ],
        ),
      ),
    );
  }
}
// lib/screens/signup_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import 'home_screen.dart';

class SignupScreen extends StatefulWidget {
  @override
  _SignupScreenState createState() => _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();

  void _signUp() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    bool success = await authService.signUp(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
      _emailController.text.trim(),
    );

    if (success) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Signup failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Social App Signup'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(onPressed: _signUp, child: Text('Sign Up')),
          ],
        ),
      ),
    );
  }
}
﻿
Step 5 – Setting Up User Profiles
5.1. Create Profile Service
Add a file named profile_service.dart under lib/services/:
Dart
// lib/services/profile_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/profile.dart';

class ProfileService {
  Future<void> createProfile(ParseUser user) async {
    final profile = ParseObject('Profile')
      ..set('user', user)
      ..set('username', user.username);

    await profile.save();
  }

  Future<Profile?> getProfile(ParseUser user) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Profile'))
      ..whereEqualTo('user', user);

    final response = await query.query();

    if (response.success && response.results != null) {
      final profileObject = response.results!.first;
      return Profile.fromParseObject(profileObject);
    } else {
      return null;
    }
  }

  Future<void> updateProfile(Profile profile) async {
    final profileObject = ParseObject('Profile')
      ..objectId = profile.id
      ..set('fullName', profile.fullName)
      ..set('bio', profile.bio);

    await profileObject.save();
  }
}
// lib/services/profile_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/profile.dart';

class ProfileService {
  Future<void> createProfile(ParseUser user) async {
    final profile = ParseObject('Profile')
      ..set('user', user)
      ..set('username', user.username);

    await profile.save();
  }

  Future<Profile?> getProfile(ParseUser user) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Profile'))
      ..whereEqualTo('user', user);

    final response = await query.query();

    if (response.success && response.results != null) {
      final profileObject = response.results!.first;
      return Profile.fromParseObject(profileObject);
    } else {
      return null;
    }
  }

  Future<void> updateProfile(Profile profile) async {
    final profileObject = ParseObject('Profile')
      ..objectId = profile.id
      ..set('fullName', profile.fullName)
      ..set('bio', profile.bio);

    await profileObject.save();
  }
}
﻿
5.2. Create Profile Model
Add a file named profile.dart under lib/models/:
Dart
// lib/models/profile.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Profile {
  String id;
  String username;
  String? fullName;
  String? bio;
  ParseFileBase? profilePicture;

  Profile({
    required this.id,
    required this.username,
    this.fullName,
    this.bio,
    this.profilePicture,
  });

  factory Profile.fromParseObject(ParseObject object) {
    return Profile(
      id: object.objectId!,
      username: object.get<String>('username')!,
      fullName: object.get<String>('fullName'),
      bio: object.get<String>('bio'),
      profilePicture: object.get<ParseFileBase>('profilePicture'),
    );
  }
}
// lib/models/profile.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Profile {
  String id;
  String username;
  String? fullName;
  String? bio;
  ParseFileBase? profilePicture;

  Profile({
    required this.id,
    required this.username,
    this.fullName,
    this.bio,
    this.profilePicture,
  });

  factory Profile.fromParseObject(ParseObject object) {
    return Profile(
      id: object.objectId!,
      username: object.get<String>('username')!,
      fullName: object.get<String>('fullName'),
      bio: object.get<String>('bio'),
      profilePicture: object.get<ParseFileBase>('profilePicture'),
    );
  }
}
﻿
5.3. Create Profile Screen
Add a file named profile_screen.dart under lib/screens/:
Dart
// lib/screens/profile_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/profile_service.dart';
import '../models/profile.dart';

class ProfileScreen extends StatefulWidget {
  @override
  _ProfileScreenState createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  final ProfileService _profileService = ProfileService();
  Profile? profile;
  final TextEditingController _fullNameController = TextEditingController();
  final TextEditingController _bioController = TextEditingController();

  void _loadProfile() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    Profile? fetchedProfile = await _profileService.getProfile(user);

    if (fetchedProfile == null) {
      await _profileService.createProfile(user);
      fetchedProfile = await _profileService.getProfile(user);
    }

    setState(() {
      profile = fetchedProfile;
      _fullNameController.text = profile?.fullName ?? '';
      _bioController.text = profile?.bio ?? '';
    });
  }

  void _saveProfile() async {
    if (profile != null) {
      profile!.fullName = _fullNameController.text.trim();
      profile!.bio = _bioController.text.trim();
      await _profileService.updateProfile(profile!);
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Profile updated')));
    }
  }

  @override
  void initState() {
    super.initState();
    _loadProfile();
  }

  @override
  Widget build(BuildContext context) {
    if (profile == null) {
      return Scaffold(
        appBar: AppBar(title: Text('Profile')),
        body: Center(child: CircularProgressIndicator()),
      );
    }

    return Scaffold(
      appBar: AppBar(title: Text(profile!.username)),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            // Add profile picture handling here
            TextField(
              controller: _fullNameController,
              decoration: InputDecoration(labelText: 'Full Name'),
            ),
            TextField(
              controller: _bioController,
              decoration: InputDecoration(labelText: 'Bio'),
            ),
            SizedBox(height: 20),
            ElevatedButton(onPressed: _saveProfile, child: Text('Save')),
          ],
        ),
      ),
    );
  }
}
// lib/screens/profile_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/profile_service.dart';
import '../models/profile.dart';

class ProfileScreen extends StatefulWidget {
  @override
  _ProfileScreenState createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  final ProfileService _profileService = ProfileService();
  Profile? profile;
  final TextEditingController _fullNameController = TextEditingController();
  final TextEditingController _bioController = TextEditingController();

  void _loadProfile() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    Profile? fetchedProfile = await _profileService.getProfile(user);

    if (fetchedProfile == null) {
      await _profileService.createProfile(user);
      fetchedProfile = await _profileService.getProfile(user);
    }

    setState(() {
      profile = fetchedProfile;
      _fullNameController.text = profile?.fullName ?? '';
      _bioController.text = profile?.bio ?? '';
    });
  }

  void _saveProfile() async {
    if (profile != null) {
      profile!.fullName = _fullNameController.text.trim();
      profile!.bio = _bioController.text.trim();
      await _profileService.updateProfile(profile!);
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Profile updated')));
    }
  }

  @override
  void initState() {
    super.initState();
    _loadProfile();
  }

  @override
  Widget build(BuildContext context) {
    if (profile == null) {
      return Scaffold(
        appBar: AppBar(title: Text('Profile')),
        body: Center(child: CircularProgressIndicator()),
      );
    }

    return Scaffold(
      appBar: AppBar(title: Text(profile!.username)),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            // Add profile picture handling here
            TextField(
              controller: _fullNameController,
              decoration: InputDecoration(labelText: 'Full Name'),
            ),
            TextField(
              controller: _bioController,
              decoration: InputDecoration(labelText: 'Bio'),
            ),
            SizedBox(height: 20),
            ElevatedButton(onPressed: _saveProfile, child: Text('Save')),
          ],
        ),
      ),
    );
  }
}
﻿
Step 6 – Implementing News Feeds
6.1. Create Post Service
Add a file named post_service.dart under lib/services/:
Dart
// lib/services/post_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/post.dart';

class PostService {
  Future<void> createPost(String content, ParseUser user) async {
    final post = ParseObject('Post')
      ..set('user', user)
      ..set('content', content);

    await post.save();
  }

  Future<List<Post>> getPosts(ParseUser user) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Post'))
      ..orderByDescending('createdAt')
      ..includeObject(['user']);

    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results!.map((e) => Post.fromParseObject(e)).toList();
    } else {
      return [];
    }
  }
}
// lib/services/post_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/post.dart';

class PostService {
  Future<void> createPost(String content, ParseUser user) async {
    final post = ParseObject('Post')
      ..set('user', user)
      ..set('content', content);

    await post.save();
  }

  Future<List<Post>> getPosts(ParseUser user) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Post'))
      ..orderByDescending('createdAt')
      ..includeObject(['user']);

    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results!.map((e) => Post.fromParseObject(e)).toList();
    } else {
      return [];
    }
  }
}
﻿
6.2. Create Post Model
Add a file named post.dart under lib/models/:
Dart
// lib/models/post.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Post {
  String id;
  String content;
  ParseUser user;
  DateTime createdAt;

  Post({
    required this.id,
    required this.content,
    required this.user,
    required this.createdAt,
  });

  factory Post.fromParseObject(ParseObject object) {
    return Post(
      id: object.objectId!,
      content: object.get<String>('content')!,
      user: object.get<ParseUser>('user')!,
      createdAt: object.createdAt!,
    );
  }
}
// lib/models/post.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Post {
  String id;
  String content;
  ParseUser user;
  DateTime createdAt;

  Post({
    required this.id,
    required this.content,
    required this.user,
    required this.createdAt,
  });

  factory Post.fromParseObject(ParseObject object) {
    return Post(
      id: object.objectId!,
      content: object.get<String>('content')!,
      user: object.get<ParseUser>('user')!,
      createdAt: object.createdAt!,
    );
  }
}
﻿
6.3. Create Home Screen
Modify home_screen.dart under lib/screens/:
Dart
// lib/screens/home_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/post_service.dart';
import '../models/post.dart';
import 'profile_screen.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final PostService _postService = PostService();
  List<Post> posts = [];
  final TextEditingController _postController = TextEditingController();

  void _loadPosts() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    List<Post> fetchedPosts = await _postService.getPosts(user);

    setState(() {
      posts = fetchedPosts;
    });
  }

  void _createPost() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    await _postService.createPost(_postController.text.trim(), user);
    _postController.clear();
    _loadPosts();
  }

  @override
  void initState() {
    super.initState();
    _loadPosts();
  }

  @override
  Widget build(BuildContext context) {
    final authService = Provider.of<AuthService>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Social App'),
        actions: [
          IconButton(
            icon: Icon(Icons.person),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => ProfileScreen()),
              );
            },
          ),
          IconButton(
            icon: Icon(Icons.logout),
            onPressed: () async {
              await authService.logout();
              Navigator.pushReplacementNamed(context, '/');
            },
          ),
        ],
      ),
      body: Column(
        children: [
          TextField(
            controller: _postController,
            decoration: InputDecoration(
              hintText: 'What\'s on your mind?',
              contentPadding: EdgeInsets.all(16),
            ),
          ),
          ElevatedButton(onPressed: _createPost, child: Text('Post')),
          Expanded(
            child: ListView.builder(
              itemCount: posts.length,
              itemBuilder: (context, index) {
                final post = posts[index];
                return ListTile(
                  title: Text(post.user.username ?? 'Unknown'),
                  subtitle: Text(post.content),
                  trailing: Text(
                    post.createdAt.toLocal().toString(),
                    style: TextStyle(fontSize: 12),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
// lib/screens/home_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/post_service.dart';
import '../models/post.dart';
import 'profile_screen.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final PostService _postService = PostService();
  List<Post> posts = [];
  final TextEditingController _postController = TextEditingController();

  void _loadPosts() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    List<Post> fetchedPosts = await _postService.getPosts(user);

    setState(() {
      posts = fetchedPosts;
    });
  }

  void _createPost() async {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    await _postService.createPost(_postController.text.trim(), user);
    _postController.clear();
    _loadPosts();
  }

  @override
  void initState() {
    super.initState();
    _loadPosts();
  }

  @override
  Widget build(BuildContext context) {
    final authService = Provider.of<AuthService>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Social App'),
        actions: [
          IconButton(
            icon: Icon(Icons.person),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => ProfileScreen()),
              );
            },
          ),
          IconButton(
            icon: Icon(Icons.logout),
            onPressed: () async {
              await authService.logout();
              Navigator.pushReplacementNamed(context, '/');
            },
          ),
        ],
      ),
      body: Column(
        children: [
          TextField(
            controller: _postController,
            decoration: InputDecoration(
              hintText: 'What\'s on your mind?',
              contentPadding: EdgeInsets.all(16),
            ),
          ),
          ElevatedButton(onPressed: _createPost, child: Text('Post')),
          Expanded(
            child: ListView.builder(
              itemCount: posts.length,
              itemBuilder: (context, index) {
                final post = posts[index];
                return ListTile(
                  title: Text(post.user.username ?? 'Unknown'),
                  subtitle: Text(post.content),
                  trailing: Text(
                    post.createdAt.toLocal().toString(),
                    style: TextStyle(fontSize: 12),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
﻿
Step 7 – Adding Friend Connections
In this step, we will implement friend connections between users. Users can send friend requests, accept or reject them, and view their list of friends. We will modify the data models, create services, and update the UI to support this functionality.
7.1. Update the Data Model
We have already created the FriendRequest class in Back4App with the following columns:
fromUser: Pointer to _User
toUser: Pointer to _User
status: String (Values: "pending", "accepted", "rejected")
Additionally, we need to track a user's list of friends. We can do this by adding a friends relation in the _User class.
7.1.1. Add Friends Relation to User Class
In Back4App, go to the User class.
Click on the "+" button to add a new column.
Name the column "friends" and set the type to Relation <_User>.
7.2. Create Friend Request Service
Create a file named friend_service.dart under lib/services/:
Dart
// lib/services/friend_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class FriendService {
  Future<bool> sendFriendRequest(ParseUser fromUser, ParseUser toUser) async {
    final friendRequest = ParseObject('FriendRequest')
      ..set('fromUser', fromUser)
      ..set('toUser', toUser)
      ..set('status', 'pending');

    final response = await friendRequest.save();
    return response.success;
  }

  Future<List<ParseObject>> getPendingRequests(ParseUser user) async {
    final query = QueryBuilder<ParseObject>(ParseObject('FriendRequest'))
      ..whereEqualTo('toUser', user)
      ..whereEqualTo('status', 'pending')
      ..includeObject(['fromUser']);

    final response = await query.query();
    if (response.success && response.results != null) {
      return response.results!;
    } else {
      return [];
    }
  }

  Future<bool> acceptFriendRequest(ParseObject friendRequest) async {
    friendRequest.set('status', 'accepted');
    final response = await friendRequest.save();

    if (response.success) {
      // Add each user to the other's friends relation
      final fromUser = friendRequest.get<ParseUser>('fromUser')!;
      final toUser = friendRequest.get<ParseUser>('toUser')!;

      fromUser.setAdd('friends', [toUser]);
      toUser.setAdd('friends', [fromUser]);

      await fromUser.save();
      await toUser.save();

      return true;
    }
    return false;
  }

  Future<bool> rejectFriendRequest(ParseObject friendRequest) async {
    friendRequest.set('status', 'rejected');
    final response = await friendRequest.save();
    return response.success;
  }

  Future<List<ParseUser>> getFriends(ParseUser user) async {
    final relation = user.getRelation<ParseUser>('friends');
    final query = relation.query();

    final response = await query.query();
    if (response.success && response.results != null) {
      return response.results!.cast<ParseUser>();
    } else {
      return [];
    }
  }
}
// lib/services/friend_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class FriendService {
  Future<bool> sendFriendRequest(ParseUser fromUser, ParseUser toUser) async {
    final friendRequest = ParseObject('FriendRequest')
      ..set('fromUser', fromUser)
      ..set('toUser', toUser)
      ..set('status', 'pending');

    final response = await friendRequest.save();
    return response.success;
  }

  Future<List<ParseObject>> getPendingRequests(ParseUser user) async {
    final query = QueryBuilder<ParseObject>(ParseObject('FriendRequest'))
      ..whereEqualTo('toUser', user)
      ..whereEqualTo('status', 'pending')
      ..includeObject(['fromUser']);

    final response = await query.query();
    if (response.success && response.results != null) {
      return response.results!;
    } else {
      return [];
    }
  }

  Future<bool> acceptFriendRequest(ParseObject friendRequest) async {
    friendRequest.set('status', 'accepted');
    final response = await friendRequest.save();

    if (response.success) {
      // Add each user to the other's friends relation
      final fromUser = friendRequest.get<ParseUser>('fromUser')!;
      final toUser = friendRequest.get<ParseUser>('toUser')!;

      fromUser.setAdd('friends', [toUser]);
      toUser.setAdd('friends', [fromUser]);

      await fromUser.save();
      await toUser.save();

      return true;
    }
    return false;
  }

  Future<bool> rejectFriendRequest(ParseObject friendRequest) async {
    friendRequest.set('status', 'rejected');
    final response = await friendRequest.save();
    return response.success;
  }

  Future<List<ParseUser>> getFriends(ParseUser user) async {
    final relation = user.getRelation<ParseUser>('friends');
    final query = relation.query();

    final response = await query.query();
    if (response.success && response.results != null) {
      return response.results!.cast<ParseUser>();
    } else {
      return [];
    }
  }
}
﻿
7.3. Update the UI
7.3.1. Add Search Users Screen
Create a file named search_users_screen.dart under lib/screens/:
Dart
// lib/screens/search_users_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/friend_service.dart';

class SearchUsersScreen extends StatefulWidget {
  @override
  _SearchUsersScreenState createState() => _SearchUsersScreenState();
}

class _SearchUsersScreenState extends State<SearchUsersScreen> {
  final TextEditingController _searchController = TextEditingController();
  List<ParseUser> users = [];
  final FriendService _friendService = FriendService();

  void _searchUsers() async {
    final query = QueryBuilder<ParseUser>(ParseUser.forQuery())
      ..whereContains('username', _searchController.text.trim())
      ..whereNotEqualTo('objectId', Provider.of<AuthService>(context, listen: false).user!.objectId);

    final response = await query.query();
    if (response.success && response.results != null) {
      setState(() {
        users = response.results!.cast<ParseUser>();
      });
    } else {
      setState(() {
        users = [];
      });
    }
  }

  void _sendFriendRequest(ParseUser toUser) async {
    final fromUser = Provider.of<AuthService>(context, listen: false).user!;
    bool success = await _friendService.sendFriendRequest(fromUser, toUser);
    if (success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Friend request sent')));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Failed to send friend request')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search Users'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              controller: _searchController,
              decoration: InputDecoration(
                hintText: 'Search by username',
                suffixIcon: IconButton(
                  icon: Icon(Icons.search),
                  onPressed: _searchUsers,
                ),
              ),
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: users.length,
              itemBuilder: (context, index) {
                final user = users[index];
                return ListTile(
                  title: Text(user.username ?? 'Unknown'),
                  trailing: ElevatedButton(
                    onPressed: () => _sendFriendRequest(user),
                    child: Text('Add Friend'),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
// lib/screens/search_users_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/friend_service.dart';

class SearchUsersScreen extends StatefulWidget {
  @override
  _SearchUsersScreenState createState() => _SearchUsersScreenState();
}

class _SearchUsersScreenState extends State<SearchUsersScreen> {
  final TextEditingController _searchController = TextEditingController();
  List<ParseUser> users = [];
  final FriendService _friendService = FriendService();

  void _searchUsers() async {
    final query = QueryBuilder<ParseUser>(ParseUser.forQuery())
      ..whereContains('username', _searchController.text.trim())
      ..whereNotEqualTo('objectId', Provider.of<AuthService>(context, listen: false).user!.objectId);

    final response = await query.query();
    if (response.success && response.results != null) {
      setState(() {
        users = response.results!.cast<ParseUser>();
      });
    } else {
      setState(() {
        users = [];
      });
    }
  }

  void _sendFriendRequest(ParseUser toUser) async {
    final fromUser = Provider.of<AuthService>(context, listen: false).user!;
    bool success = await _friendService.sendFriendRequest(fromUser, toUser);
    if (success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Friend request sent')));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Failed to send friend request')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search Users'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              controller: _searchController,
              decoration: InputDecoration(
                hintText: 'Search by username',
                suffixIcon: IconButton(
                  icon: Icon(Icons.search),
                  onPressed: _searchUsers,
                ),
              ),
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: users.length,
              itemBuilder: (context, index) {
                final user = users[index];
                return ListTile(
                  title: Text(user.username ?? 'Unknown'),
                  trailing: ElevatedButton(
                    onPressed: () => _sendFriendRequest(user),
                    child: Text('Add Friend'),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
﻿
7.3.2. Add Friend Requests Screen
Create a file named friend_requests_screen.dart under lib/screens/:
Dart
// lib/screens/friend_requests_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/friend_service.dart';

class FriendRequestsScreen extends StatefulWidget {
  @override
  _FriendRequestsScreenState createState() => _FriendRequestsScreenState();
}

class _FriendRequestsScreenState extends State<FriendRequestsScreen> {
  final FriendService _friendService = FriendService();
  List<ParseObject> friendRequests = [];

  void _loadFriendRequests() async {
    final user = Provider.of<AuthService>(context, listen: false).user!;
    final requests = await _friendService.getPendingRequests(user);
    setState(() {
      friendRequests = requests;
    });
  }

  void _acceptRequest(ParseObject request) async {
    bool success = await _friendService.acceptFriendRequest(request);
    if (success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Friend request accepted')));
      _loadFriendRequests();
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Failed to accept friend request')));
    }
  }

  void _rejectRequest(ParseObject request) async {
    bool success = await _friendService.rejectFriendRequest(request);
    if (success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Friend request rejected')));
      _loadFriendRequests();
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Failed to reject friend request')));
    }
  }

  @override
  void initState() {
    super.initState();
    _loadFriendRequests();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Friend Requests'),
      ),
      body: ListView.builder(
        itemCount: friendRequests.length,
        itemBuilder: (context, index) {
          final request = friendRequests[index];
          final fromUser = request.get<ParseUser>('fromUser')!;
          return ListTile(
            title: Text(fromUser.username ?? 'Unknown'),
            subtitle: Text('Sent you a friend request'),
            trailing: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                IconButton(
                  icon: Icon(Icons.check, color: Colors.green),
                  onPressed: () => _acceptRequest(request),
                ),
                IconButton(
                  icon: Icon(Icons.close, color: Colors.red),
                  onPressed: () => _rejectRequest(request),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}
// lib/screens/friend_requests_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import '../services/friend_service.dart';

class FriendRequestsScreen extends StatefulWidget {
  @override
  _FriendRequestsScreenState createState() => _FriendRequestsScreenState();
}

class _FriendRequestsScreenState extends State<FriendRequestsScreen> {
  final FriendService _friendService = FriendService();
  List<ParseObject> friendRequests = [];

  void _loadFriendRequests() async {
    final user = Provider.of<AuthService>(context, listen: false).user!;
    final requests = await _friendService.getPendingRequests(user);
    setState(() {
      friendRequests = requests;
    });
  }

  void _acceptRequest(ParseObject request) async {
    bool success = await _friendService.acceptFriendRequest(request);
    if (success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Friend request accepted')));
      _loadFriendRequests();
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Failed to accept friend request')));
    }
  }

  void _rejectRequest(ParseObject request) async {
    bool success = await _friendService.rejectFriendRequest(request);
    if (success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Friend request rejected')));
      _loadFriendRequests();
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Failed to reject friend request')));
    }
  }

  @override
  void initState() {
    super.initState();
    _loadFriendRequests();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Friend Requests'),
      ),
      body: ListView.builder(
        itemCount: friendRequests.length,
        itemBuilder: (context, index) {
          final request = friendRequests[index];
          final fromUser = request.get<ParseUser>('fromUser')!;
          return ListTile(
            title: Text(fromUser.username ?? 'Unknown'),
            subtitle: Text('Sent you a friend request'),
            trailing: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                IconButton(
                  icon: Icon(Icons.check, color: Colors.green),
                  onPressed: () => _acceptRequest(request),
                ),
                IconButton(
                  icon: Icon(Icons.close, color: Colors.red),
                  onPressed: () => _rejectRequest(request),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}
﻿
7.3.3. Update Home Screen Navigation
In home_screen.dart, add navigation to the search users and friend requests screens:
Dart
// Inside AppBar actions
IconButton(
  icon: Icon(Icons.person_add),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => SearchUsersScreen()),
    );
  },
),
IconButton(
  icon: Icon(Icons.notifications),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => FriendRequestsScreen()),
    );
  },
),
// Inside AppBar actions
IconButton(
  icon: Icon(Icons.person_add),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => SearchUsersScreen()),
    );
  },
),
IconButton(
  icon: Icon(Icons.notifications),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => FriendRequestsScreen()),
    );
  },
),
﻿
7.4. Update News Feed to Show Friends' Posts
Modify the getPosts method in post_service.dart to fetch posts from the user and their friends.
Dart
// lib/services/post_service.dart
Future<List<Post>> getPosts(ParseUser user) async {
  // Get friends
  final relation = user.getRelation<ParseUser>('friends');
  final friendsQuery = relation.query();

  final friendsResponse = await friendsQuery.query();

  List<String> userIds = [user.objectId!];
  if (friendsResponse.success && friendsResponse.results != null) {
    final friends = friendsResponse.results!.cast<ParseUser>();
    userIds.addAll(friends.map((friend) => friend.objectId!));
  }

  // Fetch posts from user and friends
  final query = QueryBuilder<ParseObject>(ParseObject('Post'))
    ..whereContainedIn('user', userIds.map((id) => ParseUser(null, null, null)..objectId = id).toList())
    ..orderByDescending('createdAt')
    ..includeObject(['user']);

  final response = await query.query();

  if (response.success && response.results != null) {
    return response.results!.map((e) => Post.fromParseObject(e)).toList();
  } else {
    return [];
  }
}
// lib/services/post_service.dart
Future<List<Post>> getPosts(ParseUser user) async {
  // Get friends
  final relation = user.getRelation<ParseUser>('friends');
  final friendsQuery = relation.query();

  final friendsResponse = await friendsQuery.query();

  List<String> userIds = [user.objectId!];
  if (friendsResponse.success && friendsResponse.results != null) {
    final friends = friendsResponse.results!.cast<ParseUser>();
    userIds.addAll(friends.map((friend) => friend.objectId!));
  }

  // Fetch posts from user and friends
  final query = QueryBuilder<ParseObject>(ParseObject('Post'))
    ..whereContainedIn('user', userIds.map((id) => ParseUser(null, null, null)..objectId = id).toList())
    ..orderByDescending('createdAt')
    ..includeObject(['user']);

  final response = await query.query();

  if (response.success && response.results != null) {
    return response.results!.map((e) => Post.fromParseObject(e)).toList();
  } else {
    return [];
  }
}
﻿
Step 8 – Implementing Messaging
In this step, we'll add real-time messaging between users using Live Queries.
8.1. Enable Live Queries in Back4App
In your Back4App app dashboard, go to App Settings > Server Settings.
Under Server URL, note down your server URL (e.g., https://YOUR_APP_NAME.back4app.io).
Live Queries are enabled by default on Back4App.
8.2. Set Up Live Queries in Flutter
The parse_server_sdk_flutter package includes Live Query support.
8.3. Create Messaging Service
Create a file named message_service.dart under lib/services/:
Dart
// lib/services/message_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/message.dart';

class MessageService {
  ParseLiveList<Message>? liveMessageList;

  Future<void> sendMessage(ParseUser fromUser, ParseUser toUser, String content) async {
    final message = ParseObject('Message')
      ..set('fromUser', fromUser)
      ..set('toUser', toUser)
      ..set('content', content);

    await message.save();
  }

  Future<void> subscribeToMessages(ParseUser user, ParseUser otherUser, Function(List<Message>) onMessagesUpdated) async {
    final queryBuilder = QueryBuilder<ParseObject>(ParseObject('Message'))
      ..whereEqualTo('fromUser', user)
      ..whereEqualTo('toUser', otherUser)
      ..orderByAscending('createdAt')
      ..includeObject(['fromUser', 'toUser']);

    liveMessageList = ParseLiveList<Message>(queryBuilder, listenOnAllSubItems: true);

    liveMessageList!.stream.listen((event) {
      onMessagesUpdated(liveMessageList!.items);
    });
  }

  Future<void> dispose() async {
    await liveMessageList?.dispose();
  }
}
// lib/services/message_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/message.dart';

class MessageService {
  ParseLiveList<Message>? liveMessageList;

  Future<void> sendMessage(ParseUser fromUser, ParseUser toUser, String content) async {
    final message = ParseObject('Message')
      ..set('fromUser', fromUser)
      ..set('toUser', toUser)
      ..set('content', content);

    await message.save();
  }

  Future<void> subscribeToMessages(ParseUser user, ParseUser otherUser, Function(List<Message>) onMessagesUpdated) async {
    final queryBuilder = QueryBuilder<ParseObject>(ParseObject('Message'))
      ..whereEqualTo('fromUser', user)
      ..whereEqualTo('toUser', otherUser)
      ..orderByAscending('createdAt')
      ..includeObject(['fromUser', 'toUser']);

    liveMessageList = ParseLiveList<Message>(queryBuilder, listenOnAllSubItems: true);

    liveMessageList!.stream.listen((event) {
      onMessagesUpdated(liveMessageList!.items);
    });
  }

  Future<void> dispose() async {
    await liveMessageList?.dispose();
  }
}
﻿
8.4. Create Message Model
Add a file named message.dart under lib/models/:
Dart
// lib/models/message.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Message extends ParseObject implements ParseCloneable {
  Message() : super('Message');

  Message.clone() : this();

  @override
  clone(Map<String, dynamic> map) => Message.clone()..fromJson(map);

  ParseUser get fromUser => get<ParseUser>('fromUser')!;
  ParseUser get toUser => get<ParseUser>('toUser')!;
  String get content => get<String>('content')!;
}
// lib/models/message.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Message extends ParseObject implements ParseCloneable {
  Message() : super('Message');

  Message.clone() : this();

  @override
  clone(Map<String, dynamic> map) => Message.clone()..fromJson(map);

  ParseUser get fromUser => get<ParseUser>('fromUser')!;
  ParseUser get toUser => get<ParseUser>('toUser')!;
  String get content => get<String>('content')!;
}
﻿
8.5. Create Chat Screen
Add a file named chat_screen.dart under lib/screens/:
Dart
// lib/screens/chat_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import '../models/message.dart';
import '../services/auth_service.dart';
import '../services/message_service.dart';

class ChatScreen extends StatefulWidget {
  final ParseUser otherUser;

  ChatScreen({required this.otherUser});

  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final MessageService _messageService = MessageService();
  List<Message> messages = [];
  final TextEditingController _messageController = TextEditingController();

  void _sendMessage() {
    final authService = Provider.of<AuthService>(context, listen: false);
    final fromUser = authService.user!;
    final toUser = widget.otherUser;

    _messageService.sendMessage(fromUser, toUser, _messageController.text.trim());
    _messageController.clear();
  }

  void _onMessagesUpdated(List<Message> updatedMessages) {
    setState(() {
      messages = updatedMessages;
    });
  }

  @override
  void initState() {
    super.initState();
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    _messageService.subscribeToMessages(user, widget.otherUser, _onMessagesUpdated);
  }

  @override
  void dispose() {
    _messageService.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;

    return Scaffold(
      appBar: AppBar(title: Text(widget.otherUser.username ?? 'Chat')),
      body: Column(
        children: [
          Expanded(
            child: ListView(
              children: messages.map((message) {
                bool isMe = message.fromUser.objectId == user.objectId;
                return ListTile(
                  title: Align(
                    alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
                    child: Container(
                      padding: EdgeInsets.all(10),
                      color: isMe ? Colors.blueAccent : Colors.grey[300],
                      child: Text(
                        message.content,
                        style: TextStyle(color: isMe ? Colors.white : Colors.black),
                      ),
                    ),
                  ),
                );
              }).toList(),
            ),
          ),
          Divider(height: 1),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 8.0),
            color: Theme.of(context).cardColor,
            child: Row(
              children: [
                Flexible(
                  child: TextField(
                    controller: _messageController,
                    decoration: InputDecoration.collapsed(hintText: 'Send a message'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: _sendMessage,
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}
// lib/screens/chat_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import '../models/message.dart';
import '../services/auth_service.dart';
import '../services/message_service.dart';

class ChatScreen extends StatefulWidget {
  final ParseUser otherUser;

  ChatScreen({required this.otherUser});

  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final MessageService _messageService = MessageService();
  List<Message> messages = [];
  final TextEditingController _messageController = TextEditingController();

  void _sendMessage() {
    final authService = Provider.of<AuthService>(context, listen: false);
    final fromUser = authService.user!;
    final toUser = widget.otherUser;

    _messageService.sendMessage(fromUser, toUser, _messageController.text.trim());
    _messageController.clear();
  }

  void _onMessagesUpdated(List<Message> updatedMessages) {
    setState(() {
      messages = updatedMessages;
    });
  }

  @override
  void initState() {
    super.initState();
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;
    _messageService.subscribeToMessages(user, widget.otherUser, _onMessagesUpdated);
  }

  @override
  void dispose() {
    _messageService.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final authService = Provider.of<AuthService>(context, listen: false);
    final user = authService.user!;

    return Scaffold(
      appBar: AppBar(title: Text(widget.otherUser.username ?? 'Chat')),
      body: Column(
        children: [
          Expanded(
            child: ListView(
              children: messages.map((message) {
                bool isMe = message.fromUser.objectId == user.objectId;
                return ListTile(
                  title: Align(
                    alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
                    child: Container(
                      padding: EdgeInsets.all(10),
                      color: isMe ? Colors.blueAccent : Colors.grey[300],
                      child: Text(
                        message.content,
                        style: TextStyle(color: isMe ? Colors.white : Colors.black),
                      ),
                    ),
                  ),
                );
              }).toList(),
            ),
          ),
          Divider(height: 1),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 8.0),
            color: Theme.of(context).cardColor,
            child: Row(
              children: [
                Flexible(
                  child: TextField(
                    controller: _messageController,
                    decoration: InputDecoration.collapsed(hintText: 'Send a message'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: _sendMessage,
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}
﻿
8.6. Update UI to Initiate Chat
You can initiate the chat from the friends list or search users screen.
In the friends list, when displaying friends, add a button to start a chat:
Dart
// Inside the ListTile for a friend
trailing: IconButton(
  icon: Icon(Icons.chat),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => ChatScreen(otherUser: friend)),
    );
  },
),
// Inside the ListTile for a friend
trailing: IconButton(
  icon: Icon(Icons.chat),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => ChatScreen(otherUser: friend)),
    );
  },
),
﻿
Step 9 – Adding Push Notifications
Implementing push notifications involves setting up Firebase Cloud Messaging (FCM) and integrating it with Back4App.
9.1. Configure Firebase Cloud Messaging
9.1.1. Set Up Firebase Project
Go to Firebase Console and create a new project.
Add an Android and/or iOS app to your project.
For Android, you need the package name (applicationId).
For iOS, you need the Bundle Identifier.
9.1.2. Download Configuration Files
For Android: Download google-services.json and place it in android/app/.
For iOS: Download GoogleService-Info.plist and add it to your Xcode project under Runner.
9.2. Add firebase_messaging Package
Ensure you have added firebase_messaging to your pubspec.yaml:
YAML
dependencies:
  firebase_messaging: ^11.2.8
dependencies:
  firebase_messaging: ^11.2.8
﻿
Run flutter pub get to install.
9.3. Initialize Firebase in Flutter
Modify main.dart:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:firebase_core/firebase_core.dart';
// Other imports

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // Initialize Parse as before

  runApp(MyApp());
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:firebase_core/firebase_core.dart';
// Other imports

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // Initialize Parse as before

  runApp(MyApp());
}
﻿
9.4. Configure Firebase Messaging
Create a file named push_notification_service.dart under lib/services/:
Dart
// lib/services/push_notification_service.dart
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class PushNotificationService {
  final FirebaseMessaging _fcm = FirebaseMessaging.instance;

  Future<void> init() async {
    // Request permissions (iOS)
    await _fcm.requestPermission();

    // Get the token
    String? token = await _fcm.getToken();

    if (token != null) {
      // Save the token to Parse Installation
      final installation = await ParseInstallation.currentInstallation();
      installation.set('deviceToken', token);
      await installation.save();
    }

    // Handle foreground messages
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Received a message in the foreground!');
      // Handle the message
    });
  }
}
// lib/services/push_notification_service.dart
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class PushNotificationService {
  final FirebaseMessaging _fcm = FirebaseMessaging.instance;

  Future<void> init() async {
    // Request permissions (iOS)
    await _fcm.requestPermission();

    // Get the token
    String? token = await _fcm.getToken();

    if (token != null) {
      // Save the token to Parse Installation
      final installation = await ParseInstallation.currentInstallation();
      installation.set('deviceToken', token);
      await installation.save();
    }

    // Handle foreground messages
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Received a message in the foreground!');
      // Handle the message
    });
  }
}
﻿
9.5. Update main.dart to Initialize Push Notifications
In main.dart, after initializing Parse, initialize the PushNotificationService:
Dart
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // Initialize Parse as before

  // Initialize Push Notifications
  PushNotificationService _pushNotificationService = PushNotificationService();
  await _pushNotificationService.init();

  runApp(MyApp());
}
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // Initialize Parse as before

  // Initialize Push Notifications
  PushNotificationService _pushNotificationService = PushNotificationService();
  await _pushNotificationService.init();

  runApp(MyApp());
}
﻿
9.6. Sending Push Notifications from Back4App
You can send push notifications using Cloud Code or directly from your server.
9.6.1. Sending Notification on Friend Request
When a user sends a friend request, you can send a push notification to the recipient.
In friend_service.dart, modify the sendFriendRequest method:
Dart
Future<bool> sendFriendRequest(ParseUser fromUser, ParseUser toUser) async {
  // Existing code to create friend request

  // Send push notification
  final pushQuery = QueryBuilder<ParseInstallation>(ParseInstallation.forQuery())
    ..whereEqualTo('user', toUser);

  await ParsePush().send(
    PushPayload(
      query: pushQuery,
      notification: ParseNotification(
        title: 'New Friend Request',
        alert: '${fromUser.username} sent you a friend request',
      ),
    ),
  );

  return response.success;
}
Future<bool> sendFriendRequest(ParseUser fromUser, ParseUser toUser) async {
  // Existing code to create friend request

  // Send push notification
  final pushQuery = QueryBuilder<ParseInstallation>(ParseInstallation.forQuery())
    ..whereEqualTo('user', toUser);

  await ParsePush().send(
    PushPayload(
      query: pushQuery,
      notification: ParseNotification(
        title: 'New Friend Request',
        alert: '${fromUser.username} sent you a friend request',
      ),
    ),
  );

  return response.success;
}
﻿
Note: Ensure that you have associated the installation with the user.
9.7. Associate Installation with User
When a user logs in, associate their installation with their user account.
In auth_service.dart, after successful login:
Dart
Future<bool> login(String username, String password) async {
  user = ParseUser(username, password, null);

  final response = await user!.login();

  if (response.success) {
    // Associate installation with user
    final installation = await ParseInstallation.currentInstallation();
    installation.set('user', user);
    await installation.save();

    notifyListeners();
    return true;
  } else {
    user = null;
    return false;
  }
}
Future<bool> login(String username, String password) async {
  user = ParseUser(username, password, null);

  final response = await user!.login();

  if (response.success) {
    // Associate installation with user
    final installation = await ParseInstallation.currentInstallation();
    installation.set('user', user);
    await installation.save();

    notifyListeners();
    return true;
  } else {
    user = null;
    return false;
  }
}
﻿
Note: Push notifications require additional setup on both the client and server sides. You need to handle different scenarios, such as background notifications and user permissions, which are beyond the scope of this tutorial.
﻿
Conclusion
Congratulations! You've built the foundation of a social networking app using Flutter and Back4App. This app includes user authentication, profile management, and a news feed feature. While implementing full friend connections, messaging, and notifications is beyond this tutorial's scope, you now have the necessary structure to continue expanding your app.
Next Steps
Friend Connections: Implement friend request functionalities.
Messaging: Add real-time chat features using Live Queries.
Notifications: Integrate push notifications for user engagement.
UI Enhancements: Improve the user interface and user experience.
Security: Ensure data security and privacy by setting appropriate ACLs in Back4App.
Additional Resources
﻿Back4App Documentation﻿
﻿Parse SDK for Flutter Guide﻿
﻿Flutter Official Documentation﻿
﻿Provider Package Documentation﻿
Happy Coding!
Updated 14 Sep 2024
Did this page help you?
How to Build an AI Voice Translator App Using Flutter and Back4App
Building a Blogging Platform SPA with ReactJS and Back4App