Chat App using Flutter and Firebase

In this article we’ll try to build a chat app with Flutter and Firebase . Our app will have the feature.

Sign in by Google Account

Chat one to one with other users(send text, image, stickers)

1. Creating project on Firebase

First, if you would like to use Google Sign in, to get SHA-1 Key.

Remember that the keytool only accepts one parameter but two “-exportcert -list” are suggested. The “-exportcert” parameter is redundant and can be omitted from the commands.

Second , add this line import ‘package:cloud_firestore/cloud_firestore.dart’;

Start the Cloud Firestore and Storage

Then enable sign in method with Google.

signIn() async {
if (formKey.currentState.validate()) {
setState(() {
isLoading = true;
});
await authService
.signInWithEmailAndPassword(
emailEditingController.text, passwordEditingController.text)
.then((result) async {
if (result != null) {
QuerySnapshot userInfoSnapshot =
await DatabaseMethods().getUserInfo(emailEditingController.text);
HelperFunctions.saveUserLoggedInSharedPreference(true);
HelperFunctions.saveUserNameSharedPreference(
userInfoSnapshot.documents[0].data[“userName”]);
HelperFunctions.saveUserEmailSharedPreference(
userInfoSnapshot.documents[0].data[“userEmail”]);
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (context) => ChatRoom()));
} else {
setState(() {
isLoading = false;
});
}
});
}
}

2. Installing Plugins

Following These instructions to add to your project.

google_sign_in, firebase_auth, shared_preferences, random_string,cloud_firestore
google_sign_in: 4.4.3
firebase_auth: 0.15.4
shared_preferences: ^0.5.6+3
random_string: ^2.0.1
cloud_firestore: ^0.13.5

3. Layout the Main Screen

This Screen contains list of all users in our database, we’ll show info we got like nikhil, nickname and all about. if you would to chat with the person click on that person.

Get list user quite simple by using StreamBuilder like below:

Widget chatMessages(){
return StreamBuilder(
stream: chats,
builder: (context, snapshot){
return snapshot.hasData ? ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index){
return MessageTile(
message: snapshot.data.documents[index].data[“message”],
sendByMe: Constants.myName == snapshot.data.documents[index].data[“sendBy”],
);
}) : Container();
},
);
}
addMessage() {
if (messageEditingController.text.isNotEmpty) {
Map<String, dynamic> chatMessageMap = {
“sendBy”: Constants.myName,
“message”: messageEditingController.text,
‘time’: DateTime
.now()
.millisecondsSinceEpoch,
};
DatabaseMethods().addMessage(widget.chatRoomId, chatMessageMap);
setState(() {
messageEditingController.text = “”;
});
}
}
@override
void initState() {
DatabaseMethods().getChats(widget.chatRoomId).then((val) {
setState(() {
chats = val;
});
});
super.initState();
}
//Chat Room lists
Widget chatRoomsList() {
return StreamBuilder(
stream: chatRooms,
builder: (context, snapshot) {
return snapshot.hasData
? ListView.builder(
itemCount: snapshot.data.documents.length,
shrinkWrap: true,
itemBuilder: (context, index) {
return ChatRoomsTile(
userName: snapshot.data.documents[index].data['chatRoomId']
.toString()
.replaceAll("_", "")
.replaceAll(Constants.myName, ""),
chatRoomId: snapshot.data.documents[index].data["chatRoomId"],
);
})
: Container();
},
);
}

Below I am providing a GitHub repository that contain this code also.

Raghavendra149/chatapp

I would like to thank Nikhil GR with whom I have completed the task.