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,
                ),
              ),
            ),
          ],
        ),
      ],
    ),
  );
}
}

GitHub

View Github