Skip to content

Latest commit

 

History

History
446 lines (353 loc) · 11.5 KB

README.md

File metadata and controls

446 lines (353 loc) · 11.5 KB

Quick Chat

Description

  • A chat app made by Flutter and Firebase(Firebase Cloud Firestore) having beautiful splash screen.
  • Support login with google account, chat with any user, send text, emojis.
  • Firebase Cloud Firestore as well as the Firebase authentication package is used to equip the chat app with a cloud based NoSQL database and secure authentication methods.

Documentation and References

Animations

For further documentation: Link

class _WelcomeScreenState extends State<WelcomeScreen>
    with SingleTickerProviderStateMixin {
  get isLoaded => null;

  late Animation<double> animation;
  late AnimationController controller;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    controller =
        AnimationController(duration: const Duration(seconds: 7), vsync: this);
    animation = Tween<double>(begin: 60, end: 150).animate(controller)
      ..addListener(() {
        setState(() {
          // The state that has changed here is the animation object’s value.
        });
      });
    controller.forward();
    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        controller.reverse(from: 150);
      } else if (status == AnimationStatus.dismissed) {
        controller.forward();
      }
    });
  }

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

animated_text_kit 4.2.2

Link

A flutter package which contains a collection of some cool and awesome text animations.

Installation:

Use this package as a library

Depend on it

Run this command:

With Flutter:

flutter pub add animated_text_kit

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  animated_text_kit: ^4.2.2

Import it

Now in your Dart code, you can use:

import 'package:animated_text_kit/animated_text_kit.dart';

firebase_core 2.7.1

Link

A Flutter plugin to use the Firebase Core API, which enables connecting to multiple Firebase apps.

Installation:

Use this package as a library

Depend on it

Run this command:

With Flutter:

flutter pub add firebase_core

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  firebase_core: ^2.7.1

Import it

Now in your Dart code, you can use:

import 'package:firebase_core/firebase_core.dart';

firebase_auth 4.2.10

Link

A Flutter plugin to use the Firebase Authentication API.

Installation:

Use this package as a library

Depend on it

Run this command:

With Flutter:

flutter pub add firebase_auth

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  firebase_auth: ^4.2.10

Import it

Now in your Dart code, you can use:

import 'package:firebase_auth/firebase_auth.dart';

cloud_firestore 4.4.4

Link

A Flutter plugin to use the Cloud Firestore API.

Installation:

Use this package as a library

Depend on it

Run this command:

With Flutter:

flutter pub add cloud_firestore

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  cloud_firestore: ^4.4.4

Import it

Now in your Dart code, you can use:

import 'package:cloud_firestore/cloud_firestore.dart';

modal_progress_hud_nsn 0.3.0

Link

A simple widget wrapper to enable modal progress HUD (a modal progress indicator, HUD = Heads Up Display)

Installation:

Use this package as a library

Depend on it

Run this command:

With Flutter:

flutter pub add modal_progress_hud_nsn

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  modal_progress_hud_nsn: ^0.3.0

Import it

Now in your Dart code, you can use:

import 'package:modal_progress_hud_nsn/modal_progress_hud_nsn.dart';

Authenticate with Firebase using Password-Based Accounts on Flutter

Link

Before you begin

If you haven't already, follow the steps in the Get started guide.

Enable Email/Password sign-in:

In the Firebase console's Authentication section, open the Sign in method page. From the Sign in method page, enable the Email/password sign-in method and click Save.

Create a password-based account

onPressed: () async {
                   
                    try {
                      final credential = await FirebaseAuth.instance
                          .createUserWithEmailAndPassword(
                        email: email,
                        password: password,
                      );
                      if (credential != null) {
                        Navigator.pushNamed(context, ChatScreen.id);
                        
                      }
                    } catch (e) {
                      print(e);
                    }
                  },

Sign in a user with an email address and password

onPressed: () async {
                    
                    try {
                      final credential = await FirebaseAuth.instance
                          .signInWithEmailAndPassword(
                              email: email, password: password);
                      if (credential != null) {
                        Navigator.pushNamed(context, ChatScreen.id);
                        
                      }
                    } catch (e) {
                      print(e);
                    }
                  },

For SignOut

await FirebaseAuth.instance.signOut();

Login with Current User

@override
  void initState() {
    // TODO: implement initState
    super.initState();
    getCurrentUser();
  }

  void getCurrentUser() async {
    try {
      final user = await _auth.currentUser;
      if (user != null) {
        loggedInUser = user;
      }
    } catch (e) {
      print(e);
    }
  }

Get data from firestore to flutter app using the StreamBuilder

For references : Link

class MessagesStream extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: _firestore
          .collection('messages')
          .orderBy('sender', descending: false)
          .snapshots(),
      builder: (context, AsyncSnapshot snapshot) {
        if (!snapshot.hasData) {
          return const Center(
            child: CircularProgressIndicator(
              backgroundColor: Colors.lightBlueAccent,
            ),
          );
        }
        final messages = snapshot.data!.docs;

        List<MessageBubble> messageBubbles = [];
        for (var message in messages) {
          final messageText = message['text'];
          final messageSender = message['sender'];

          final messageBubble = MessageBubble(
            sender: messageSender,
            text: messageText,
            isMe: loggedInUser.email == messageSender,
          );
          messageBubbles.add(messageBubble);
        }
        List<MessageBubble> finalmessages = [];
        finalmessages = messageBubbles.reversed.toList();
        return Expanded(
          child: ListView(
            reverse: true,
            padding:
                const EdgeInsets.symmetric(horizontal: 10.0, vertical: 20.0),
            children: messageBubbles,
          ),
        );
      },
    );
  }
}

Get the Message Bubble

class MessageBubble extends StatelessWidget {
  MessageBubble({required this.sender, required this.text, required this.isMe});

  var sender;
  var text;
  bool isMe;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(2.0),
      child: Column(
        crossAxisAlignment:
            isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
        children: [
          Text(
            sender,
            style: TextStyle(
              fontSize: 9,
              fontWeight: FontWeight.bold,
              color: Colors.grey,
              fontStyle: FontStyle.italic,
            ),
          ),
          SizedBox(height: 3.5),
          Container(
            decoration: BoxDecoration(
              color: isMe ? Color(0xFFe81cff) : Color(0xFF40c9ff),
              borderRadius: isMe
                  ? BorderRadius.only(
                      topLeft: Radius.circular(30.0),
                      topRight: Radius.circular(30.0),
                      bottomLeft: Radius.circular(30.0),
                    )
                  : BorderRadius.only(
                      topLeft: Radius.circular(30.0),
                      topRight: Radius.circular(30.0),
                      bottomRight: Radius.circular(30.0),
                    ),
            ),
            margin: isMe
                ? EdgeInsets.only(left: 45.0)
                : EdgeInsets.only(right: 45.0),
            child: Text(
              text,
              style: TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.normal,
                color: isMe ? Colors.white : Color(0xFF103783),
                fontStyle: FontStyle.normal,
              ),
              textAlign: isMe ? TextAlign.right : TextAlign.right,
            ),
            padding: EdgeInsets.all(18.0),
          ),
          SizedBox(height: 18.0),
        ],
      ),
    );
  }
}

Data/chats are shown in ListView

Get started with Cloud Firestore Security Rules

Link

Security rules version 2

As of May 2019, version 2 of the Cloud Firestore security rules is now available. Version 2 of the rules changes the behavior of recursive wildcards {name=**}. You must use version 2 if you plan to use collection group queries. You must opt-in to version 2 by making rules_version = '2'; the first line in your security rules:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {

Writing rules

Auth required

// Allow read/write access on all documents to any user signed in to the application
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Screenshots

Splash Screen

WhatsApp Image 2023-03-11 at 12 19 05 AM

Home Screen

WhatsApp Image 2023-03-11 at 12 19 05 AM (1)

Login Page

WhatsApp Image 2023-03-11 at 12 19 06 AM

Chat Screen

WhatsApp Image 2023-03-11 at 12 19 06 AM (1)

Video

WhatsApp.Video.2023-03-11.at.12.19.08.AM.mp4