talksik/flutter-samples
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #72 from GetStream/docs/samples-update-develop

Browse Source 
docs: update samples and presentation
This commit is contained in:
Salvatore Giordano
2022-04-21 11:56:50 +02:00
committed by GitHub
parent 8d66c59a3c 508063a0c9
commit c653931cf6
1 changed files with 60 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+60 -23
View File
@@ -1,18 +1,66 @@
# Flutter samples
# Stream Flutter Samples
![](https://raw.githubusercontent.com/GetStream/flutter-samples/master/images/sdk_hero_v4.png)
**Quick Links**
## 😎 Repo Overview
- [Register](https://getstream.io/chat/trial/) to get an API key for Stream Chat
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/)
- [Flutter SDK Repo](https://github.com/GetStream/stream-chat-flutter)
**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"> |
| ⚙️ 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/)
## What is Stream?
Stream allows developers to rapidly deploy scalable feeds and chat messaging with an industry leading 99.999% uptime SLA guarantee.
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:
@@ -22,28 +70,17 @@ With Stream's chat components, developers quickly add chat to their app for a va
- Messaging style chat like Whatsapp or Facebook's messenger
- Commerce chat like Drift or Intercom
## Repo Overview 😎
This repo contains projects and samples developed by the team and Stream community. Projects are broke up into directories under the `packages` folder.
Each project contains a README with build and execution instructions.
## **Maintained Projects 🚀**
- [Stream Chat v1](https://github.com/GetStream/flutter-samples/tree/main/packages/stream_chat_v1): a sample app implemented using Stream Chat and Flutter. It is a fully fledged messaging app built using a combination of our pre-made widgets and custom Flutter widgets.
- [Chatter YouTube Series](https://github.com/HayesGordon/chatter): an ongoing, beginner friendly, YouTube video series showing how to use Stream's Flutter packages.
- [iMessage clone](https://github.com/GetStream/flutter-samples/tree/main/packages/imessage): an iMessage clone implemented using Flutter and the `stream_chat_flutter_core` package.
## **Historic Projects 📕**
## 📕 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 🛠
## 🛠 Requirements
Before running this project please ensure Flutter is installed and configured on your machine. If you're new to Flutter, please checkout the [official guide](https://flutter.dev/docs/get-started/install) with installation instructions for your OS.
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
## 📈 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 make sure to follow all best practices and add tests if applicable before submitting a Pull Request on Github.
- 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.