Chatter - Building a Flutter chat application from scratch

Related tags

Example Apps chatter
Overview

Chatter - Building a Flutter chat application from scratch

See the relevant branch for the tutorial you'd like to follow. The main branch has the latest source code.

Installation instructions

git clone https://github.com/HayesGordon/chatter.git

Check out the required branch

git checkout {branch-name}

Install dependencies

flutter pub get

Generate the needed platform folders (Android, iOS). Some of the branches may have these already included.

flutter create .

Further Setup

Add your Stream app's key in lib/app.dart.

From episode 3 the application requires Firebase Authentication and Cloud Functions to be setup. See the third tutorial video for complete information.

Episodes / Tutorials

Episode 1 - Design/UI

Episode 01 - Design/UI [ Video ] [ Entry Code ] [ Completed Code ] - Create the UI and structure for the application.

Episode 02 - Stream API

Episode 02 - Stream API [ Video ] [ Entry Code ] [ Completed Code ] - Connect to the Stream API with basic chat functionality

Episode 03 - Firebase Auth and Functions

Episode 03 - Firebase Auth and Functions [ Video ] [ Entry Code ] [ Completed Code ] - Use Firebase Authentication and Cloud Function to generate Stream API user tokens

Comments
  • ⛔ Sign up error<…>

    ⛔ Sign up error<…>

    Hi, the problem that i am facing is that whenever i sign up a new account, it will display an error has occurred and doesn't direct me to the home screen. however, if i sign in or hot restart, i will be able to go to the home screen. i have the logs below but am not sure what is going wrong. any help would be greatly appreciated.

    firebase_functions/unauthenticated] UNAUTHENTICATED<…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m<…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m#0      StandardMethodCodec.decodeEnvelope (package:flutter/src/services/message_codecs.dart:607:7)<…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m#1      MethodChannel._invokeMethod (package:flutter/src/services/platform_channel.dart:167:18)<…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m<asynchronous suspension><…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m#2      MethodChannelHttpsCallable.call (package:cloud_functions_platform_interface/src/method_channel/method_channel_https_callable.dart:23:24)<…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m<asynchronous suspension><…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m#3      HttpsCallable.call (package:cloud_functions/src/https_callable.dart:49:37)<…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m<asynchronous suspension><…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m#4      _SignUpScreenState._signUp (package:ibchat/screens/sign_up_screen.dart:368:25)<…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m<asynchronous suspension><…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m<…>
    flutter: \^[[38;5;196m├┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄<…>
    flutter: \^[[38;5;196m│ #0   StandardMethodCodec.decodeEnvelope (package:flutter/src/services/message_codecs.dart:607:7)<…>
    flutter: \^[[38;5;196m│ #1   MethodChannel._invokeMethod (package:flutter/src/services/platform_channel.dart:167:18)<…>
    flutter: \^[[38;5;196m│ #2   <asynchronous suspension><…>
    flutter: \^[[38;5;196m│ #3   MethodChannelHttpsCallable.call (package:cloud_functions_platform_interface/src/method_channel/method_channel_https_callable.dart:23:24)<…>
    flutter: \^[[38;5;196m│ #4   <asynchronous suspension><…>
    flutter: \^[[38;5;196m│ #5   HttpsCallable.call (package:cloud_functions/src/https_callable.dart:49:37)<…>
    flutter: \^[[38;5;196m│ #6   <asynchronous suspension><…>
    flutter: \^[[38;5;196m│ #7   _SignUpScreenState._signUp (package:ibchat/screens/sign_up_screen.dart:368:25)<…>
    flutter: \^[[38;5;196m├┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄<…>
    flutter: \^[[38;5;196m│ ⛔ Sign up error<…>
    flutter: \^[[38;5;196m└───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────<…>
    
    opened by deandrehaijiel 6
  • [firebase_functions/internal] Response is not valid JSON object.

    [firebase_functions/internal] Response is not valid JSON object.

    I am getting an error when executing the callable. My code is identical to yours, so I'm not sure where to start:

    final callable = FirebaseFunctions.instance
                .httpsCallable('createStreamUserAndGetToken');
    final results = await callable();
    

    Here is the call stack:

    #0      StandardMethodCodec.decodeEnvelope (package:flutter/src/services/message_codecs.dart:607:7)
    #1      MethodChannel._invokeMethod (package:flutter/src/services/platform_channel.dart:177:18)
    <asynchronous suspension>
     #2      MethodChannelHttpsCallable.call (package:cloud_functions_platform_interface/src/method_channel/method_channel_https_callable.dart:23:24)
     <asynchronous suspension>
     #3      HttpsCallable.call (package:cloud_functions/src/https_callable.dart:49:37)
     <asynchronous suspension>
     #4      FirebaseService.joinWithEmailAndPassword (package:thrills/util/firebase_service.dart:359:25)
     <asynchronous suspension>
     #5      _JoinState.build.<anonymous closure> (package:thrills/screens/join/join.dart:285:33)
     <asynchronous suspension>
    
    opened by SoftDevCHD 2
  • AppBar Title Text Color

    AppBar Title Text Color

    Hi, the AppBar Title Text Color does not change color at all. When in light mode, the text is white, making it hard to see. However, since it doesn't change at all, there is no problem in seeing it when in dark mode. Ive tried tweaking around with appBarTheme but to no avail. Ive just finished the part 1 of the chat app series and was only having this problem. Do hope you can address this soon. Thank you!

    opened by deandrehaijiel 0
  • Another exception was thrown: Bad state: No element

    Another exception was thrown: Bad state: No element

    I am getting this when I swap between screens that use ChannelListView with different filters. It is as if stream returns the last reference to a channel list before applying the new filters. For example, I am in my direct messages, I display a set of channels with a certain filter, then I leave the page to go on a different page that has a ChannelListView. I will get a red screen error, then after a second, the error goes away and the proper widget is shown. The issue I am seeing is twofold, when I go to direct messages, the previous ChannelListView is shown for a second, then updates, and when I go to the other screen, I get red screen error. Here is the widget in one screen (Direct Messages)

    Expanded(
                  child: ChannelListView(
                    
                    filter: Filter.and(
                      [
                        Filter.equal('type', 'messaging'),
                        Filter.in_(
                          'members',
                          [
                            StreamChat.of(context).currentUser!.id,
                          ],
                        ),
                        Filter.equal('event', false),
                      ],
                    ),
                    emptyBuilder: (context) => noMessages(),
                    errorBuilder: (context, error) => MessagesError(
                      error: error,
                    ),
                    loadingBuilder: (BuildContext context) =>
                        const Center(child: CircularProgressIndicator()),
                    listBuilder: (context, channels) => ListView.builder(
                      itemCount: channels.length,
                      itemBuilder: (BuildContext context, int index) =>
                          ChannelTile(channel: channels[index], uid: uid),
                    ),
                  ),
                ),
    

    Here is the widget in the other screen

    return stream.ChannelListView(
                  filter: stream.Filter.raw(
                    value: {
                      'cid': {
                        r'$in': events.map((e) => "messaging:${e.eid}").toList(),
                      },
                      'event': true,
                      'type': 'messaging',
                    },
                  ),
                  loadingBuilder: (BuildContext context) =>
                      const Center(child: CircularProgressIndicator()),
                  emptyBuilder: (context) => noHostedEvents(),
                  errorBuilder: (context, error) => MessagesError(
                    error: error,
                  ),
                  listBuilder: (context, channels) {
                    return ListView.builder(
                      itemCount: channels.length,
                      itemBuilder: (BuildContext context, int index) =>
                          EventChannelTile(
                        algoliaEvent: events.firstWhere(
                          (element) => element.eid == channels[index].id,
                        ),
                        channel: channels[index],
                      ),
                    );
                  },
                );
    
    opened by SoftDevCHD 2
  • getting different errors from client.dart

    getting different errors from client.dart

    hello i m trying to learn the same course and project and i m getting diffrent errors..@HayesGordon

    Error: The getter 'accessToken' isn't defined for the class 'Future'. ../…/client/client.dart:290

    • 'Future' is from 'dart:async'.
    • 'ConnectGuestUserResponse' is from 'package:stream_chat/src/core/api/responses.dart' ('../../../Documents/flutter/.pub-cache/hosted/pub.dartlang.org/stream_chat-3.3.1/lib/src/core/api/responses.dart'). package:stream_chat/…/api/responses.dart:1 Try correcting the name to the name of an existing getter, or defining a getter or field named 'accessToken'. final guestUserToken = Token.fromRawValue(guestUser.accessToken); ^^^^^^^^^^^

    : Error: The getter 'user' isn't defined for the class 'Future'. ../…/client/client.dart:292

    • 'Future' is from 'dart:async'.

    • 'ConnectGuestUserResponse' is from 'package:stream_chat/src/core/api/responses.dart' ('../../../Documents/flutter/.pub-cache/hosted/pub.dartlang.org/stream_chat-3.3.1/lib/src/core/api/responses.dart'). package:stream_chat/…/api/responses.dart:1 Try correcting the name to the name of an existing getter, or defining a getter or field named 'user'. guestUser.user,

                ^^^^
      

    : Error: A value of type 'Future' can't be assigned to a variable of type 'OwnUser?'. ../…/client/client.dart:330

    • 'Future' is from 'dart:async'.

    • 'OwnUser' is from 'package:stream_chat/src/core/models/own_user.dart' ('../../../Documents/flutter/.pub-cache/hosted/pub.dartlang.org/stream_chat-3.3.1/lib/src/core/models/own_user.dart'). package:stream_chat/…/models/own_user.dart:1 return state.currentUser = connectedUser;

                                 ^
      

    : Error: The getter 'me' isn't defined for the class 'Future<Event?>'. ../…/client/client.dart:334

    • 'Future' is from 'dart:async'.

    • 'Event' is from 'package:stream_chat/src/core/models/event.dart' ('../../../Documents/flutter/.pub-cache/hosted/pub.dartlang.org/stream_chat-3.3.1/lib/src/core/models/event.dart'). package:stream_chat/…/models/event.dart:1 Try correcting the name to the name of an existing getter, or defining a getter or field named 'me'. if (event != null) return ownUser.merge(event.me);

                                                      ^^
      

    : Error: A non-null value must be returned since the return type 'OwnUser' doesn't allow null. ../…/client/client.dart:342

    • 'OwnUser' is from 'package:stream_chat/src/core/models/own_user.dart' ('../../../Documents/flutter/.pub-cache/hosted/pub.dartlang.org/stream_chat-3.3.1/lib/src/core/models/own_user.dart'). package:stream_chat/…/models/own_user.dart:1

      Future openConnection() async { ^ 2

    FAILURE: Build failed with an exception.

    • Where: Script 'C:\Users\admin\Documents\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 1070

    • What went wrong:

    • Execution failed for task ':app:compileFlutterBuildDebug'.

    Process 'command 'C:\Users\admin\Documents\flutter\bin\flutter.bat'' finished with non-zero exit value 1

    • Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

    • Get more help at https://help.gradle.org

    BUILD FAILED in 1m 0s Exception: Gradle task assembleDebug failed with exit code 1

    opened by pankaj-vaishnaw 8
Owner
Gordon
Developer Advocate @GetStream · Creator of @funwithflutter
Gordon
Flutter Chat Socket - using Flutter for develop a realtime chat app

Flutter Chat Socket - using Flutter for develop a realtime chat app

Rois Khoiron 4 Dec 7, 2022
A flutter app when dealing with building UIs with flutter Widgets for beginners

mi_card A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Trần Văn Nguyên 1 Nov 15, 2021
Building a WhatsApp Clone in Flutter.

Flutter WhatsAppClone Building a WhatsApp Clone in Flutter. Show some ❤️ and star the repo to support the project Screenshots Watch the video tutorial

Pawan Kumar 1.5k Jan 7, 2023
A minimalist Flutter framework for rapidly building custom designs.

Show some ❤️ and star the repo. VelocityX is a 100% free Flutter open-source minimalist UI Framework built with Flutter SDK to make Flutter developmen

Pawan Kumar 1.2k Jan 8, 2023
Building an app using AWS Amplify and Flutter

aws-amplify-flutter This repository is for building an app using AWS Amplify and Flutter. Module 0 - prerequisites [✓] Flutter (Channel stable, 2.5.3,

Adrian Mudzwiti 0 Oct 31, 2021
Flutter Building LinkedIn Clone App responsive

Flutter LinkedIn Clone App Show some and star the repo to support the project Screenshots Web mobile Watch Flutter LinkedIn Clone App - Responsive com

Md Shazib Ahmed 2 Dec 2, 2021
Building Flutter UI App for intermediates

bmi_calculator A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started i

Trần Văn Nguyên 1 Nov 17, 2021
Building a Cupertino App with Flutter

Building a Cupertino App with Flutter Flutter allows us creating Cupertino (iOS-style) apps that look and feel like native iOS apps. To achieve that,

Max Shemetov 0 Jan 5, 2022
This repository contains all the code written throughout the 1ManStartup YouTube tutorials for building a travel budget app using Flutter

Travel Treasury Download The Live App This repository contains all the code written throughout the 1ManStartup YouTube tutorials for building a travel

Dave Faliskie 249 Dec 27, 2022
Counter - A simple flutter app to count how many people are in a store/building

People counter made with Flutter Summary About the app Preview of the finished a

Luan Silva da Silva 1 Feb 12, 2022
Building a simple Flutter app for practicing and understanding the GetX State Management and Route Management.

GetX State Management Demo with full understanding of State Management (with GetBuiler, GetX, Obx), Route Management and SnackBar.

TAD 4 Oct 2, 2022
In this tutorial we will be reviewing Stateful and Stateless Widgets as well as learning about the fundamental building blocks of Object Oriented Programming (OOP

In this tutorial we will be reviewing Stateful and Stateless Widgets as well as learning about the fundamental building blocks of Object Oriented Programming (OOP) - Classes and Objects.

pedrozopayares 0 Oct 3, 2021
A simple chat application in flutter made with stream.

chat_app A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Samuel Adekunle 18 Oct 11, 2022
PyChat: Chat Application made in Flutter using Firebase

PyChat Chat Application made in Flutter using Firebase. Also added animated splash screen with Pychat logo. Languages and Tools Used: Flutter Dart Fir

Vaibhav Shukla 2 Nov 10, 2021
Flutter Chat Application with location integration using GetStream

Chat Location Generated by the Very Good CLI ?? A chat application built with Flutter using the Stream Chat SDK. Check out the full tutorial. Getting

Very Good Ventures 77 Jan 4, 2023
Realtime chat application interface using Socket.IO for Flutter GDSC event

flutter_socket_chatapp Simplet multi user chat app using Socket.IO and API calls Getting Started This project is a starting point for a Flutter applic

Soorya Senthil Rajan 1 Jun 15, 2022
Flutter chat room app made with firebase cloud firestore

Flutter chat room app made with firebase cloud firestore

Berke 2 Jul 6, 2022
Flutter Chat Components for Combase • Powered By Stream

combase_flutter A new Flutter package project. Getting Started This project is a starting point for a Dart package, a library module containing code t

Stream 4 Feb 24, 2021