GetStream.io Implementation Example

Integrating GetStream with Flutter: A Practical Guide

GetStream provides comprehensive documentation, which you can find for their Flutter SDK here and for their Node.js backend here. In this post, I'll discuss integrating GetStream into a Flutter project using FlutterFlow for customization and backend functionality.

Preparing Your Environment

Before diving into the technical details, ensure you are comfortable—or willing to get comfortable—with custom coding, particularly editing the main.dart file. Depending on your project's requirements, additional custom files outside FlutterFlow may be necessary. The workflow described by FlutterFlow regarding managing custom code in GitHub will be crucial. Given the complexity of this workflow, I recommend integrating GetStream later in your development process to avoid slowing it down.

Custom Code and GetStream Integration

For successful integration, you'll need to be adept at writing cloud functions, as your frontend will rely on these to fetch user tokens for GetStream authentication. I've also implemented functions for updating user profiles, registering Firebase Cloud Messaging device tokens, and other utilities. Although GetStream offers a Firebase extension for user creation, it seems to be phasing out, so plan to handle user creation manually in the future.

Understanding GetStream's Pricing

GetStream's pricing has evolved. While they offer a free tier, the limits are now tighter, potentially necessitating an upgrade to their Start plan, which costs $400/month. Key cost drivers include concurrent connections, which represent the number of users connected to their service via WebSocket. For a typical app where chat functionality is secondary, expect 3-5% of your user base to constitute concurrent connections.

Implementation Strategies

To start, choose your implementation approach by referring to the options described in the GetStream documentation here. I opted for the Option 1 and Connect/Disconnect User method because it required minimal code changes to the standard FlutterFlow setup. This method keeps the FlutterFlow code largely intact, which is beneficial for updates and reduces potential conflicts.

Implementation Steps:

1. Channel List Page Setup:

   • Create a custom widget

   • Add the GetStream SDK to your widget

   • Create a custom widget in FlutterFlow for the channel list page, adding the necessary dependencies.

   • Implement an onChannelTap action to navigate to the channel page.

   • Now add the boiler plate code, then add the import statement to add the UI components

   • Stop here with this “skeleton code”

   

   Step 1 (cont): Channel Page

   • Ok now lets repeat that and create a skeleton channel page, you can ignore my other custom variables as these are for my custom implementation, but you will need a channelId as a string and add the import statement above your code

   

   Step 1 (cont): build your widgets in FF or Vs Code

   • (Optional) Ok now sync this code over to github or similar use the branching method described by flutterflow to begin working in your develop branch

   • I prefer at this point to sync over to VS Code to build the widgets, follow the GetStream documentation, I will not show my code here because I have highly re-factored custom code which would be very confusing and not where you should start

   • Once your widgets are built, create pages in your app to hold the new widgets and drop them on the page

   • One note is that since you are passing a String channelId to the channel page, which by default requires a GetStream channel, you will need to take the string and init the channel final channel = client.channel(channelType, id: channelId); , you can read on how and when to do this

   

2. Main.dart Adjustments:

   • Initialize the GetStream client.

   • Inject the client into your app.

   • Wrap your app with the StreamChat widget to ensure all GetStream widgets can access the client.

Connecting Users:

• Consider connecting users immediately upon login, adding the necessary code to your main.dart. This approach keeps the user connected throughout the app usage, simplifying connection management. Note that connection behavior differs between mobile and web platforms—on mobile, the app disconnects when backgrounded and reconnects upon return, whereas on web, the connection persists.

• Once you are up and running you may decided to connect/disconnect based on if the user is chat at the moment, this is more complicated and can lead to multiple connections, so be careful and test.

• I ended up going this route but i had to create a connection manager singleton and i registered each widget that was connected by their hash code, then when a widget was disposed of removed each hash code and if there were not hash codes i would disconnect. This is because i have chat accessible from multiple parts of my app.

Summary

Integrating GetStream with FlutterFlow is feasible but demands significant custom coding outside the standard FlutterFlow capabilities. Given the limitations of the free tier and the potential complexities of a robust implementation, particularly for web apps, careful planning and implementation are critical for production readiness. GetStream provides good functionality but I would only recommend it for production apps.

In the future if there is a lot of interest i may make a more robust tutorial from a scratch project so i can share more code in context that isn't already re-factored and as complex as the point where I ended up in my current project. So upvote or comment if that would be helpful.

Feel free to ask questions or share your experiences with GetStream in the comments below.