Code Monkey home page Code Monkey logo

chatter's Introduction

Chatter - Building a Flutter Chat Application From Scratch

Pub style: flutter lints Flutter Samples License Stream Feeds

Chatter is a demo application showing how to create a chat app from scratch using Flutter and the Stream Chat Flutter Core package.

Where To Start

If you're new to Stream Chat Flutter, we recommend taking a look at the official tutorial: https://getstream.io/chat/flutter/tutorial/

Using the Stream Chat Flutter package you'll get a full working chat experience with minimal code.

This repository demonstrates how to use the Stream Chat Flutter Core package to build your own UI components from scratch.

The video tutorials provide a step-by-step guide to understand the code in this repository: Chatter YouTube series playlist

More Samples

Looking for more Flutter content? Take a look at our samples repository to see what you can create using Stream and Flutter.

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.

In the third tutorial the application requires Firebase Authentication and Cloud Functions to be setup. From the fourth tutorial this is even easier with Stream's Firebase Extensions, see the video for more 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

Episode 04 - Migrate Version 4 & Stream Firebase Extensions

Episode 04 - Migrate Version 4 & Stream Firebase Extensions [ Video ] [ Entry Code ] [ Completed Code ] - Make use of Stream's Firebase Extensions to simplify authentication and migrate to V4 of the Stream Chat Flutter Core SDK.

chatter's People

Contributors

hayesgordon avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

chatter's Issues

[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>

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

⛔ 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└───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────<…>

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!

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

Not signing up

[ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Null check operator used on a null value
E/flutter ( 6983): #0 _SignupState._signUp (package:dialogico/home/signup.dart:38:30)
E/flutter ( 6983): #1 _InkResponseState.handleTap (package:flutter/src/material/ink_well.dart:1183:21)
E/flutter ( 6983): #2 GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:275:24)
E/flutter ( 6983): #3 TapGestureRecognizer.handleTapUp (package:flutter/src/gestures/tap.dart:652:11)
E/flutter ( 6983): #4 BaseTapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:309:5)
E/flutter ( 6983): #5 BaseTapGestureRecognizer.acceptGesture (package:flutter/src/gestures/tap.dart:279:7)
E/flutter ( 6983): #6 GestureArenaManager.sweep (package:flutter/src/gestures/arena.dart:167:27)
E/flutter ( 6983): #7 GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:492:20)
E/flutter ( 6983): #8 GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:468:22)
E/flutter ( 6983): #9 RendererBinding.dispatchEvent (package:flutter/src/rendering/binding.dart:439:11)
E/flutter ( 6983): #10 GestureBinding._handlePointerEventImmediately (package:flutter/src/gestures/binding.dart:413:7)
E/flutter ( 6983): #11 GestureBinding.handlePointerEvent (package:flutter/src/gestures/binding.dart:376:5)
E/flutter ( 6983): #12 GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:323:7)
E/flutter ( 6983): #13 GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:292:9)
E/flutter ( 6983): #14 _invoke1 (dart:ui/hooks.dart:328:13)
E/flutter ( 6983): #15 PlatformDispatcher._dispatchPointerDataPacket (dart:ui/platform_dispatcher.dart:410:7)
E/flutter ( 6983): #16 _dispatchPointerDataPacket (dart:ui/hooks.dart:262:31)
E/flutter ( 6983):

This is happening when i click signup

firebase issue

Hi,
Bro my code don't have any error I am using your code but little bit modified my firebase is connected and my user is also created in both getstream and firebase but I cant signin into my user its showing asynchronous suspension

#0 _login_pageState._signIn (package:dialogico/home/login.dart:87:16)
I/flutter ( 6203): │ #1
I/flutter ( 6203): ├┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄
I/flutter ( 6203): │ ⛔ not-found
I/flutter ( 6203): └───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
I/flutter ( 6203): ┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
I/flutter ( 6203): │ #0 _login_pageState._signIn (package:dialogico/home/login.dart:88:16)
I/flutter ( 6203): │ #1
I/flutter ( 6203): ├┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄
I/flutter ( 6203): │ ⛔ NOT_FOUND
I/flutter ( 6203): └───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
I/flutter ( 6203): ┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
I/flutter ( 6203): │ #0 _login_pageState._signIn (package:dialogico/home/login.dart:89:16)
I/flutter ( 6203): │ #1
I/flutter ( 6203): ├┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄
I/flutter ( 6203): │ ⛔ null

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.