From 508063a0c97e709438435ce8489563afbc8b1334 Mon Sep 17 00:00:00 2001 From: Gordon Date: Wed, 20 Apr 2022 11:36:18 +0200 Subject: [PATCH] docs: update samples and presentation --- README.md | 83 ++++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 60 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 2472b01..763c37c 100644 --- a/README.md +++ b/README.md @@ -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 | | +|:-----|---------| +|

Stream Chat Sample Application

A fully fledged messaging application, demoing everything you can do with Stream Chat Flutter, using our UI package.

• Maintained to support the latest version of the SDK
• Combination of pre-made widgets and custom widgets
• Light & dark themes
• Localization
• Multiple users accounts
• Message search and filtering
• Create private and group chats
• View @mentions
• View pinned messages, files, photos and videos
• Base Stream Chat functionality

**[> Source Code](packages/stream_chat_v1)**

| Stream Chat Flutter Sample App | +| ⚙️ Tutorials | | +|

Stream Chat Flutter Core Application

**[> YouTube Tutorial Playlist](https://www.youtube.com/playlist?list=PLNBhvhkAJG6sH7dkmwt4BiCclFkMoXq4r)**

An ongoing, beginner friendly, series, demoing how to use the Stream Chat Flutter Core package for lower level control and customization options.

• Custom UI components
• Lower level client integration
• Light & dark themes
• Multiple users accounts
• Firebase Authentication
• Firebase Cloud Functions to generate user tokens
• Create private chats

**[> Source Code](https://github.com/HayesGordon/chatter)**

| Chatter Application Preview | +|

Instagram Clone

**[> YouTube Tutorial](https://youtu.be/fHRB6KGoaV0)**
**[> Written Tutorial](https://getstream.io/blog/instagram-clone-flutter/)**

A tutorial showing how to use Stream Feed Flutter to create an Instagram clone using activity feeds.

• Instagram-like animations and transitions
• Light & dark themes
• Add and change profile pictures
• Multiple users accounts
• State management with Provider
• Application architecture
• Add photo posts to your own user feed (activities)
• Follow/Unfollow other users' feeds
• Add comments and likes (reactions)

**[> Source Code](https://github.com/GetStream/flutter-instagram-clone)**

| Chatter Application Preview | +|

iMessage Clone

**[> Written Tutorial](https://getstream.io/blog/build-an-imessage-clone-with-streams-flutter-chat-sdk/)**

This tutorial shows how to use Stream Chat Flutter Core to create a basic chat application, styled similar to iMessage.

• Custom chat bubbles with a custom painter
• Core chat components
• Sending attachments
• Chat functionality
• List all channels
**[> Source Code](https://github.com/GetStream/flutter-samples/tree/main/packages/imessage)**

| Chatter Application Preview | +| ⚙️ Codelabs | | +|

Animated Stickers And Reactions With Rive

**[> Codelab](https://getstream.io/codelabs/flutter/flutter-chat-and-rive-animations/)**

Add animated reactions and stickers to your chat application using Rive.

• Rive animations
• Custom attachments
• Custom reactions

**[> Source Code](https://github.com/HayesGordon/stream-chat-flutter-animated-stickers)**

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