update readme

2020-03-02 11:35:07 +01:00
parent 2db6ff5406
commit 1804e43fa2
1 changed files with 100 additions and 5 deletions
@@ -18,11 +18,13 @@

 ## Flutter Chat Tutorial

-The best place to start is the [Flutter Chat Tutorial](https://getstream.io/chat/flutter/tutorial/). It teaches you how to use this SDK and also shows how to make common changes.
+The best place to start is the [Flutter Chat Tutorial](https://getstream.io/chat/flutter/tutorial/).
+It teaches you how to use this SDK and also shows how to make common changes.

 ## Example App

-TODO
+This repo includes a fully functional example app with setup instructions.
+The example is available under the [example](https://github.com/GetStream/stream-chat-flutter/tree/master/example) folder.

 ### Add dependency

@@ -35,12 +37,105 @@ You should then run `flutter packages get`

 ## Docs

-TODO
+### Business logic components
+
+We provide 2 Widgets dedicated to business logic and state management:
+
+- StreamChat
+- StreamChannel
+
+### UI Components
+
+These are the available Widgets that you can use to build your application UI.
+Every widget uses the StreamChat or StreamChannel widgets to manage the state and communicate with Stream services.
+
+- ChannelHeader
+- ChannelImage
+- ChannelListView
+- ChannelName
+- ChannelPreview
+- MessageInput
+- MessageListView
+- MessageWidget
+- StreamChatTheme
+- ThreadHeader
+

 ### Customizing styles

-TODO
+The Flutter SDK comes with a fully designed set of widgets which you can customize to fit with your application style and typography.
+Changing the theme of Chat widgets works in a very similar way that MaterialApp and Theme do.
+
+Out of the box all chat widgets use their own default styling, there are two ways to change the styling:
+
+  1. Initialize the StreamChatTheme from your existing MaterialApp style
+  ```dart
+  class MyApp extends StatelessWidget {
+    final Client client;
+
+    MyApp(this.client);
+
+    @override
+    Widget build(BuildContext context) {
+      final theme = ThemeData(
+        primarySwatch: Colors.green,
+      );
+
+      return MaterialApp(
+        theme: theme,
+        home: Container(
+          child: StreamChat(
+           streamChatThemeData: StreamChatThemeData.fromTheme(theme),
+            client: client,
+            child: ChannelListPage(),
+          ),
+        ),
+      );
+    }
+  }
+  ```
+
+  2. Construct a custom theme and provide all the customizations needed
+  ```dart
+  class MyApp extends StatelessWidget {
+    final Client client;
+
+    MyApp(this.client);
+
+    @override
+    Widget build(BuildContext context) {
+      final theme = ThemeData(
+        primarySwatch: Colors.green,
+      );
+
+      return MaterialApp(
+        theme: theme,
+        home: Container(
+          child: StreamChat(
+            streamChatThemeData: StreamChatThemeData.fromTheme(theme).copyWith(
+              ownMessageTheme: MessageTheme(
+                messageBackgroundColor: Colors.black,
+                messageText: TextStyle(
+                  color: Colors.white,
+                ),
+                avatarTheme: AvatarTheme(
+                  borderRadius: BorderRadius.circular(8),
+                ),
+              ),
+            ),
+            client: client,
+            child: ChannelListPage(),
+          ),
+        ),
+      );
+    }
+  }
+  ```

 ## Contributing

-We welcome code changes that improve this library or fix a problem, please make sure to follow all best practices and add tests if applicable before submitting a Pull Request on Github. We are very happy to merge your code in the official repository. Make sure to sign our [Contributor License Agreement (CLA)](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform) first. See our license file for more details.
+We welcome code changes that improve this library or fix a problem,
+please make sure to follow all best practices and add tests if applicable before submitting a Pull Request on Github.
+We are very happy to merge your code in the official repository.
+Make sure to sign our [Contributor License Agreement (CLA)](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform) first.
+See our license file for more details.