A Flutter Course Chat App Starter
flutter_course_chat_app_starter
Getting Started
Firebase installations
1- Open Firestore
2- Click create database
3- Choose test mode
, then click Next
4 – Choose Cloud Firestore location
5 – Click Enable
Setting up Android
1- Click Click Project Overview
2- Then click the Android symbol
3- Add com.cpeskw.chatapp
in the package name field and CPES
in the App nickname field
4- Then click Register
app
5- Then click Download google-services.json
6- Click Next
7- Click Next
again and then Continue to console
8- Then move google-services.json
from the download
location to your project’s android/app
folder
9- Open android/build.gradle
10- Then add the classpath 'com.google.gms:google-services:4.3.10'
at the end of the list in the dependencies
11- Open android/app/build.gradle
12- add apply plugin: 'com.google.gms.google-services'
after the apply from
Setting up iOS
1- Click Click Project Overview
2- Click Add app
3- Then click the iOS symbol
4- Add com.cpeskw.chatapp
in the package name field and CPES
in the App nickname field
5- Then click Register
app
6- Download GoogleService-info.plist
7- Click Next
8- Click Next
again and then Continue to console
9- Move the GoogleService-info.plist
file to the ios/Runner
folder
10- Then open ios/Runner.xcworkspace
in Xcode
11- Add GoogleService-info.plist
file to the Runner
folder (Make sure you have Copy items if needed
checked)
Packages
1- Add these packages inside pubspec.yaml
file
firebase_core: ^1.10.6
cloud_firestore: ^3.1.5
2- Replace main
method with
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
MessageTile widget
import 'package:flutter/material.dart';
import 'package:timeago/timeago.dart' as timeago;
class MessageTile extends StatelessWidget {
final String email;
final String text;
final DateTime date;
MessageTile({
required this.email,
required this.text,
required this.date,
});
@override
Widget build(BuildContext context) {
return Card(
elevation: 2,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.all(8),
child: Text(
'$text',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: EdgeInsets.all(8),
child: Text(
'$email',
style: TextStyle(
fontSize: 10,
color: Colors.grey,
fontWeight: FontWeight.bold,
),
),
),
Container(
padding: EdgeInsets.all(8),
child: Text(
timeago.format(date),
style: TextStyle(
fontSize: 10,
color: Colors.grey,
fontWeight: FontWeight.bold,
),
),
),
],
),
],
),
);
}
}