# Stream Flutter Samples

![](https://raw.githubusercontent.com/GetStream/flutter-samples/master/images/sdk_hero_v4.png)

## 😎 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

- [Register For a Free Account](https://getstream.io/try-for-free/)
- [Stream Flutter YouTube Playlist](https://www.youtube.com/playlist?list=PLNBhvhkAJG6t-BxkRAnSqa67lm5C1mpKk)

**Chat:**
- [Flutter Chat Tutorial](https://getstream.io/chat/flutter/tutorial/)
- [Flutter Chat SDK Repo](https://github.com/GetStream/stream-chat-flutter)
- [Flutter Chat Client Documentation](https://getstream.io/chat/docs/flutter-dart/?language=dart)
- [Flutter Chat UI Documentation and Helpful Guides](https://getstream.io/chat/docs/sdk/flutter/)
- [Chat UI Kit](https://getstream.io/chat/ui-kit/)

**Feeds:**
- [Flutter Feed Tutorial](https://getstream.io/activity-feeds/sdk/flutter/tutorial/)
- [Flutter Feed SDK Repo](https://github.com/GetStream/stream-feed-flutter)
- [Flutter Feed Client Documentation](https://getstream.io/activity-feeds/docs/flutter-dart/?language=dart)



🔎  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](packages/stream_chat_v1)**<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](https://www.youtube.com/playlist?list=PLNBhvhkAJG6sH7dkmwt4BiCclFkMoXq4r)**<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](https://github.com/HayesGordon/chatter)**<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](https://youtu.be/fHRB6KGoaV0)**<br>**[> Written Tutorial](https://getstream.io/blog/instagram-clone-flutter/)**<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](https://github.com/GetStream/flutter-instagram-clone)**<br><br> | <img src="https://camo.githubusercontent.com/f6125cca0164288544682eff5ccab8c100c22e0054ead2401a232d81c8be3f8e/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f4a6d5259656c53495a7a49306d696546774f2f67697068792e676966" width="320" alt="Chatter Application Preview"> |
|  <br><h3>iMessage Clone</h3>**[> Written Tutorial](https://getstream.io/blog/build-an-imessage-clone-with-streams-flutter-chat-sdk/)**<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](https://github.com/GetStream/flutter-samples/tree/main/packages/imessage)**<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](https://getstream.io/blog/messenger-chess-chat-app/)**<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](https://github.com/deven98/stream_chess_demo)**<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](https://getstream.io/codelabs/flutter/flutter-chat-and-rive-animations/)**<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](https://github.com/HayesGordon/stream-chat-flutter-animated-stickers)**<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](https://getstream.io/chat/docs/sdk/flutter/) 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:
- [Adding Push Notifications](https://getstream.io/chat/docs/sdk/flutter/guides/adding_push_notifications_v2/)
- [Adding Localization](https://getstream.io/chat/docs/sdk/flutter/guides/adding_localization/)
- [Adding Custom Attachments - Location Sharing](https://getstream.io/chat/docs/sdk/flutter/guides/adding_custom_attachments/)
- [Token Generation With Firebase Auth and Cloud Functions](https://getstream.io/chat/docs/sdk/flutter/guides/token_generation_with_firebase/)
- [Adding Chat To Video Livestreams](https://getstream.io/chat/docs/sdk/flutter/guides/adding_chat_to_video_livestreams/)
- [Adding Local Data Persistence](https://getstream.io/chat/docs/sdk/flutter/guides/adding_local_data_persistence/)
- [Understanding Filters](https://getstream.io/chat/docs/sdk/flutter/guides/understanding_filters/)
- [End To End Chat Encryption](https://getstream.io/chat/docs/sdk/flutter/guides/end_to_end_chat_encryption/)

## Chat Tutorials
Chat tutorials that go into greater detail on certain topics:
- [Add Peer-to-Peer Payment Integration With Stream and Rapyd](https://getstream.io/blog/p2p-integration-with-flutter/)
- [Send Voice Messages](https://getstream.io/blog/instantly-send-audio-messages-with-stream-chat-and-flutter/)
- [Location Sharing](https://getstream.io/blog/add-location-sharing-to-a-messaging-app-using-flutter/)
- [Conversational AI with HuggingFace and DialogGPT](https://getstream.io/blog/conversational-ai-flutter/)

## 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:

- Livestreams like Twitch or Youtube
- In-Game chat like Overwatch or Fortnite
- Team style chat like Slack
- Messaging style chat like Whatsapp or Facebook's messenger
- Commerce chat like Drift or Intercom

## 📕 Historic Projects
*These projects are not actively maintained. They were developed using older versions of our packages and Flutter.*
- [Stream Chatty](https://github.com/GetStream/flutter-samples/tree/main/packages/chatty) Stream Chatty is a sample chat app made in Flutter using Stream Chat, Firebase, and flutter_bloc. It has full light and dark mode support, real-time chat, and full authentication using Firebase auth.

## 🛠 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](https://flutter.dev/docs/get-started/install) with installation instructions for your OS. 

## 📈 Contributing

- How can I submit a sample app?
    - Apps submissions are always welcomed! 🥳 Open a pr with a proper description, and we'll review it as soon as possible
- Spot a bug 🕷?
    - We welcome code changes that improve the apps or fix a problem. Please follow all best practices and add tests if applicable before submitting a Pull Request on Github.