Home

Awesome

Stream Flutter Samples

😎 Repo Overview

This repo contains official Stream projects, guides, links to helpful resources, and excellent tutorials and samples developed by the Flutter community.

Quick Links

Chat:

Feeds:

🔎 Official Samples and Tutorials

🔮 Official Samples
<br><h3>Stream Chat Sample Application</h3>A fully fledged messaging application, demoing everything you can do with Stream Chat Flutter, using our <a href="https://pub.dev/packages/stream_chat_flutter">UI package</a>.<br><br>• Maintained to support the latest version of the SDK<br>• Combination of pre-made widgets and custom widgets<br>• Light & dark themes<br>• Localization<br>• Multiple users accounts<br>• Message search and filtering <br>• Create private and group chats <br>• View @mentions <br>• View pinned messages, files, photos and videos <br>• Base Stream Chat functionality <br><br> > Source Code<br><br><img src="https://user-images.githubusercontent.com/13705472/160582030-20a8c13e-a802-40c8-b744-e11f8d6df0b9.gif" width="320" alt="Stream Chat Flutter Sample App">
⚙️ Tutorials
<br><h3>Stream Chat Flutter Core Application</h3>> YouTube Tutorial Playlist<br><br>An ongoing, beginner friendly, series, demoing how to use the <a href ="https://pub.dev/packages/stream_chat_flutter_core">Stream Chat Flutter Core package</a> for lower level control and customization options.<br><br>• Custom UI components <br>• Lower level client integration<br>• Light & dark themes<br>• Multiple users accounts <br>• Firebase Authentication <br>• Firebase Cloud Functions to generate user tokens<br>• Create private chats <br><br> > Source Code<br><br><img src="https://user-images.githubusercontent.com/13705472/160588541-6dc3186c-848f-47d6-a8f2-a9d2f2f5da4a.gif" width="320" alt="Chatter Application Preview">
<br><h3>Instagram Clone</h3>> YouTube Tutorial<br>> Written Tutorial<br><br>A tutorial showing how to use <a href="https://github.com/GetStream/stream-feed-flutter">Stream Feed Flutter</a> to create an Instagram clone using activity feeds.<br><br>• Instagram-like animations and transitions <br>• Light & dark themes<br>• Add and change profile pictures<br>• Multiple users accounts <br>• State management with Provider<br>• Application architecture <br>• Add photo posts to your own user feed (activities)<br>• Follow/Unfollow other users' feeds <br>• Add comments and likes (reactions)<br><br> > Source Code<br><br><img src="https://camo.githubusercontent.com/f6125cca0164288544682eff5ccab8c100c22e0054ead2401a232d81c8be3f8e/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f4a6d5259656c53495a7a49306d696546774f2f67697068792e676966" width="320" alt="Chatter Application Preview">
<br><h3>iMessage Clone</h3>> Written Tutorial<br><br>This tutorial shows how to use <a href="https://pub.dev/packages/stream_chat_flutter_core">Stream Chat Flutter Core</a> to create a basic chat application, styled similar to iMessage.<br><br>• Custom chat bubbles with a custom painter <br>• Core chat components<br>• Sending attachments <br>• Chat functionality<br>• List all channels<br> > Source Code<br><br><img src="https://user-images.githubusercontent.com/13705472/160639870-37fcccc5-b5ae-4260-aad6-9d87cd2c0f9c.gif" width="320" alt="Chatter Application Preview">
<br><h3>Chess Game in Chat</h3>> Written Tutorial<br><br>A fun tutorial showing you how customizable <a href="https://pub.dev/packages/stream_chat_flutter">Stream Chat Flutter</a> is by adding a chess game to your chat app.<br><br>• Custom Stream Chat Attachments <br>• Two player, or group match<br>• Sending attachments <br>• Base chat functionality<br>• Updating messages/attachments<br> > Source Code<br><br><img src="https://user-images.githubusercontent.com/13705472/171142720-104d7b68-9bfe-4eee-81ca-82d5d45375e0.gif" width="320" alt="Chess Game Chat Preview">
⚙️ Codelabs
<br><h3>Animated Stickers And Reactions With Rive</h3>> Codelab<br><br>Add animated reactions and stickers to your chat application using <a href ="https://rive.app/">Rive</a>.<br><br>• Rive animations <br>• Custom attachments<br>• Custom reactions <br><br> > Source Code<br><br><img src="https://user-images.githubusercontent.com/13705472/164188802-a8cce134-7441-4daf-9d1d-c3fadeeb03ea.gif" width="320" alt="Animated Reactions/Stickers with Rive">

Chat Guides

See here for all our chat guides.

These guides explore our UI components in greater detail and demonstrate how to easily perform a variety of common actions using the Stream Chat Flutter SDK, such as:

Chat Tutorials

Chat tutorials that go into greater detail on certain topics:

What is Stream?

Stream allows developers to rapidly deploy scalable feeds and chat messaging with an industry-leading 99.999% uptime SLA guarantee.

With Stream's chat components, developers quickly add chat to their app for a variety of use-cases:

📕 Historic Projects

These projects are not actively maintained. They were developed using older versions of our packages and Flutter.

🛠 Requirements

Before running this project, please ensure Flutter is installed and configured on your machine. If you're new to Flutter, please check out the official guide with installation instructions for your OS.

📈 Contributing