diff --git a/README.md b/README.md index 4a8c7ef..6800ed9 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,20 @@ # Flutter Chat -Flutter Chat is a package which gives the possibility to add a (personal or group) chat to your Flutter-application. Default this package adds support for a Firebase back-end. You can add your custom back-end (like a Websocket-API) by extending the `ChatInterface` interface from the `flutter_chat_interface` package. +Flutter Chat is a package which gives the possibility to add a (personal or group) chat to your Flutter-application. +By default this package adds support for a Firebase back-end but you can also add a custom back-end (like a Websocket-API) by extending the `ChatInterface` interface from the `flutter_chat_interface` package. ![Flutter Chat GIF](example.gif) -Figma Design that defines this component (only accessible for Iconica developers): https://www.figma.com/file/4WkjwynOz5wFeFBRqTHPeP/Iconica-Design-System?type=design&node-id=357%3A3342&mode=design&t=XulkAJNPQ32ARxWh-1 -Figma clickable prototype that demonstrates this component (only accessible for Iconica developers): https://www.figma.com/proto/PRJoVXQ5aOjAICfkQdAq2A/Iconica-User-Stories?page-id=1%3A2&type=design&node-id=56-6837&viewport=279%2C2452%2C0.2&t=E7Al3Xng2WXnbCEQ-1&scaling=scale-down&starting-point-node-id=56%3A6837&mode=design +The default UI is based on a Figma design that defines this component, however it's only accessible by Iconica developers: +[Figma design](https://www.figma.com/file/4WkjwynOz5wFeFBRqTHPeP/Iconica-Design-System?type=design&node-id=357%3A3342&mode=design&t=XulkAJNPQ32ARxWh-1). +There is also a Figma clickable prototype that demonstrates this component: +[Figma clickable prototype)[https://www.figma.com/proto/PRJoVXQ5aOjAICfkQdAq2A/Iconica-User-Stories?page-id=1%3A2&type=design&node-id=56-6837&viewport=279%2C2452%2C0.2&t=E7Al3Xng2WXnbCEQ-1&scaling=scale-down&starting-point-node-id=56%3A6837&mode=design] ## Setup -To use this package, add flutter_chat as a dependency in your pubspec.yaml file: +To use this package, add flutter_chat as a dependency in your `pubspec.yaml` file: -``` +```yaml flutter_chat: git: url: https://github.com/Iconica-Development/flutter_chat @@ -20,28 +23,28 @@ To use this package, add flutter_chat as a dependency in your pubspec.yaml file: You can use the `LocalChatService` to test the package in your project: -``` +```dart ChatUserStoryConfiguration( chatService: LocalChatService(), ), ``` -If you are going to use Firebase as the back-end of the Chat, you should also add the following package as a dependency to your pubspec.yaml file: +If you are going to use Firebase as the back-end of the Chat, you should also add the following package as a dependency to your `pubspec.yaml` file: -``` +```yaml flutter_chat_firebase: git: url: https://github.com/Iconica-Development/flutter_chat path: packages/flutter_chat_firebase ``` -Create a Firebase project for your application and add firebase firestore and storage. +Create a Firebase project for your application and add Firebase Firestore and Storage. -make sure you are authenticated using the `Firebase_auth` package or adjust your firebase rules, otherwise you won't be able to retreive data. +Make sure you are authenticated using the `firebase_auth` package or adjust your firebase rules, otherwise you won't be able to retreive data. -Also make sure you have the corresponding collections in your firebase project as defined in `FirebaseChatOptions`, you can override the +Also make sure you have the corresponding collections in your Firebase project as defined in `FirebaseChatOptions`, you can override the default paths as you wish: -``` +```dart const FirebaseChatOptions({ this.groupChatsCollectionName = 'group_chats', this.chatsCollectionName = 'chats', @@ -51,9 +54,10 @@ default paths as you wish: this.userChatsCollectionName = 'chats', }); ``` - Also the structure of your data should be equal to our predefined models, you can implement any model by making your own model and implementing one of the predefined interfaces like so: -``` +Also the structure of your data should be equal to our predefined models, you can implement any model by making your own model and implementing one of the predefined interfaces like so: + +```dart class ChatMessageModel implements ChatMessageModelInterface { ChatMessageModel({ required this.sender, @@ -62,47 +66,47 @@ class ChatMessageModel implements ChatMessageModelInterface { @override final ChatUserModel sender; + @override final DateTime timestamp; } ``` -below a list of interfaces you can implement; +The various interfaces you can implement: -`ChatUserModelInterface`, -`ChatImageMessageModelInterface`, -`ChatTextMessageModelInterface` -`ChatMessageModelInterface`, -`ChatModelInterface`, -`GroupChatModelInterface`, -`PersonalChatModelInterface`, +- `ChatUserModelInterface`, +- `ChatImageMessageModelInterface`, +- `ChatTextMessageModelInterface` +- `ChatMessageModelInterface`, +- `ChatModelInterface`, +- `GroupChatModelInterface`, +- `PersonalChatModelInterface`, -To use the camera or photo library to send photos add the following to your project: +Add the following to your project to use the camera or photo library to send pictures: For ios add the following lines to your info.plist: -``` - NSCameraUsageDescription - Access camera - NSPhotoLibraryUsageDescription - Library +```plist +NSCameraUsageDescription +Access camera +NSPhotoLibraryUsageDescription +Library ``` For android add the following lines to your AndroidManifest.xml: -``` +```xml ``` ## How to use -To use the module within your Flutter-application with predefined `Go_router` routes you should add the following: +To use the module within your Flutter-application with predefined `go_router` routes you should add the following: -Add go_router as dependency to your project. -Add the following configuration to your flutter_application: +Add go_router as dependency to your project, then add the following configuration to your flutter_application: -``` +```dart List getChatRoutes() => getChatStoryRoutes( ChatUserStoryConfiguration( chatService: chatService, @@ -115,7 +119,7 @@ You can override any method in the `ChatUserStoryConfiguration`. Add the `getChatRoutes()` to your go_router routes like so: -``` +```dart final GoRouter _router = GoRouter( routes: [ GoRoute( @@ -135,20 +139,20 @@ The routes that can be used to navigate are: For routing to the `ChatScreen`: -``` +```dart static const String chatScreen = '/chat'; ``` For routing to the `ChatDetailScreen`: -``` +```dart static String chatDetailViewPath(String chatId) => '/chat-detail/$chatId'; static const String chatDetailScreen = '/chat-detail/:id'; ``` For routing to the `NewChatScreen`: -``` +```dart static const String newChatScreen = '/new-chat'; ``` @@ -156,15 +160,15 @@ For routing to the `ChatProfileScreen`: you can see the information about a person or group you started a chat with. If the userId is null a group profile screen will be shown otherwise the profile of a single person will be shown. -``` +```dart static String chatProfileScreenPath(String chatId, String? userId) => '/chat-profile/$chatId/$userId'; static const String chatProfileScreen = '/chat-profile/:id/:userId'; ``` -To use the module within your Flutter-application without predefined `Go_router` routes but with Navigator routes add the following code to the build-method of a chosen widget: +Add the following code to the build-method of a chosen widget to use the module within your Flutter-application without predefined `go_router` routes but with Navigator routes: -``` +```dart chatNavigatorUserStory( ChatUserStoryConfiguration( chatService: ChatService, @@ -174,12 +178,13 @@ chatNavigatorUserStory( ); ``` -Just like with the `Go_router` routes you can override any methods in the `ChatUserStoryConfiguration`. +Just like with the `go_router` routes you can override any methods in the `ChatUserStoryConfiguration`. -Or create your own routing using the Screens: -To add the `ChatScreen` add the following code: +Or create your own routing using the screens. -``` +Add the following code to add the `ChatScreen`: + +```dart ChatScreen( options: options, onPressStartChat: onPressStartChat, @@ -193,7 +198,7 @@ ChatScreen( The `ChatDetailScreen` shows the messages that are in the current chat you selected. To add the `ChatDetailScreen` add the following code: -``` +```dart ChatDetailScreen( options: options, onMessageSubmit: onMessageSubmit, @@ -204,9 +209,10 @@ ChatDetailScreen( ``` On the `NewChatScreen` you can select a person to chat. -To add the `NewChatScreen` add the following code: -``` +Add the following coe to add the `NewChatScreen`: + +```dart NewChatScreen( options: options, onPressCreateChat: onPressCreateChat, @@ -215,9 +221,9 @@ NewChatScreen( ``` On the `ChatProfileScreen` you can see the information about a person or group you started a chat with. -If the userId is null a group profile screen will be shown otherwise the profile of a single person will be shown. +A group profile screen will be shown if the userId is null, otherwise the profile of a single person will be shown. -``` +```dart ChatProfileScreen( chatService: chatservice, chatId: chatId, @@ -227,13 +233,12 @@ ChatProfileScreen( ); ``` -The `ChatEntryWidget` is a widget you can put anywhere in your app. -It displays the amount of unread messages you currently have. -You can choose to add a onTap to the `ChatEntryWidget` so it routes to the `ChatScreen`. +The `ChatEntryWidget` is a widget you can put anywhere in your app, it displays the amount of unread messages you currently have. +You can choose to add an `onTap` to the `ChatEntryWidget` so it routes to the `ChatScreen`. -To add the `ChatEntryWidget` add the follwoing code: +Add the following code to add the `ChatEntryWidget`: -``` +```dart ChatEntryWidget( chatService: chatService, onTap: onTap,