Code Monkey home page Code Monkey logo

khayyam-ahmed / chat_app Goto Github PK

View Code? Open in Web Editor NEW
0.0 0.0 0.0 751 KB

Chat App is a basic chat application built using Flutter and Firebase for various backend features. This app allows users to send and receive messages in real-time, authenticate users, store user data, and send push notifications.

Kotlin 0.16% Swift 3.23% Objective-C 0.05% Dart 35.37% CMake 24.77% C++ 31.75% C 1.87% HTML 2.79%
academind-course flutter-examples maximilian-schwarzmuller

chat_app's Introduction

FLUTTER CHAT_APP

A guided project to learn user authentication, and push notifications. Following udemy course Flutter & Dart - The Complete Guide by Maximillian Schwarzmüller. The original project source code can be found here.

Introduction:
Chat App is a basic chat application built using Flutter and Firebase for various backend features. This app allows users to send and receive messages in real-time, authenticate users, store user data, and send push notifications. Whether you want to explore how real-time messaging and user authentication work in Flutter or build your chat application, this project serves as a great starting point.

Disclaimer:

  • This project was for learning purposes.
  • And this is not a replica of Maximillian's actuall project, which you can find here

Table of Contents

Features

  • Authentication: Users can create accounts or log in using their email and password. Firebase Authentication is used for user authentication.
    // Authentication with Firebase
    await _auth.signInWithEmailAndPassword(email: _email, password: _password);
  • Real-time Messaging: Chat messages are sent and received in real-time using Firebase Cloud Firestore. Messages are ordered by creation time and displayed in a chat interface.
    // Send message to Firestore
    await _firestore.collection('chat').add({
        'text': message,
        'createdAt': Timestamp.now(),
        'userId': user.uid,
        'username': user.displayName,
        'userImage': user.photoURL,
    });
  • Image Upload: Users can upload profile images during account creation, and these images are stored in Firebase Storage.
    // Upload image to Firebase Storage
    final userRefInFbSt = FirebaseStorage.instance
        .ref()
        .child('user_images')
        .child('${userCredential.user!.uid}.jpg');
    await userRefInFbSt.putFile(_pickedImageFile!);
  • Push Notifications: The app supports push notifications using Firebase Cloud Messaging (FCM). Users are subscribed to the 'chat' topic for notifications.
    // Subscribing to the 'chat' topic for push notifications
    final fcm = FirebaseMessaging.instance;
    await fcm.requestPermission();
    fcm.subscribeToTopic('chat');

Project Structure

The project structure is organized as follows:

chat_app:
  lib:
    screens:
      auth.dart
      chat.dart
      splash_screen.dart
    utils:
      constants:
        colors.dart
        image_strings.dart
        sizes.dart
        text_strings.dart
      themes:
        theme.dart
    widgets:
      chat_messages.dart
      new_message.dart
      image_picker.dart
      message_bubble.dart
    app.dart
    firebase_options.dart
    main.dart
  pubspec.yaml
  README.md

Dependencies

The project relies on the following dependencies:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  firebase_core: ^2.20.0
  firebase_auth: ^4.12.0
  firebase_storage: ^11.4.0
  image_picker: ^1.0.4
  cloud_firestore: ^4.12.1
  firebase_messaging: ^14.7.3

Getting Started

To get started with this project, follow these steps:

  1. Clone the project to your local machine.

    git clone https://github.com/khayyam-ahmed/chat_app.git
  2. Install the Firebase SDK: Make sure you have the Firebase CLI installed, and create a new project on the Firebase console. Follow the Firebase documentation for setup instructions.

  3. Activate Authentication, Database, and Storage services in your Firebase project. Follow the Firebase documentation for setup instructions.

    • Firebase Authentication
    • Firebase Realtime Database
    • Firebase Storage
  4. Install the FlutterFire CLI:

    flutter pub global activate flutterfire_cli
  5. Login to Firebase using the CLI:

    flutterfire login
  6. Add your Firebase project to the FlutterFire CLI:

    flutterfire init
  7. Select the Firebase project you created in step 2.

  8. Select the Firebase services you activated in step 3.

  9. Configure the Firebase services using the CLI:

    flutterfire configure
  10. Install all of the project dependencies

    flutter pub get
  11. Run the app on your device or emulator:

    flutter run

Now you're ready to go. 🥳🥳🥳

Feel free to customize the app further according to your needs.

Happy coding!

Screenshots

Credits

chat_app's People

Contributors

khayyam-ahmed avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.