From 0bb294989e38a64cb9cb9b831a681328bceff1a6 Mon Sep 17 00:00:00 2001
From: cloudwebrtc <duanweiwei1982@gmail.com>
Date: Mon, 28 Oct 2024 10:30:26 +0800
Subject: [PATCH] update.

---
 README.md                                     | 17 +++++++++----
 example/lib/main.dart                         | 24 ++++++++++---------
 .../participant/participant_tile_widget.dart  |  6 ++---
 3 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index 5a555d4..a17dae6 100644
--- a/README.md
+++ b/README.md
@@ -19,9 +19,7 @@ Use this SDK to add realtime video, audio and data features to your Flutter app.
 
 ## Introduction
 
-LiveKit component state management is based on [provider](https://pub.dev/packages/provider), including `RoomContext`, `MediaDeviceContext`, `ParticipantContext`, `TrackContext`, and `ChatContext`. You can render components in the corresponding Context, such as `Chat`, `ParticipantLoop`, `ControlBar`, `StatusBar`, `AudioTrack`, `VideoTrack`, `Toggle Buttons`.
-
-and you can create video conferencing, live streaming, or AI Agents apps with minimal lines of code.
+LiveKit component state management is based on [provider](https://pub.dev/packages/provider), you can create video conferencing, live streaming, or AI Agents apps with minimal lines of code.
 
 Please refer to the [flowchart](./docs/flowchart.md) for the widgets topology structure.
 
@@ -31,9 +29,13 @@ Add the following to your `pubspec.yaml`:
 
 ```yaml
 dependencies:
-  livekit_components: ^0.1.0
+  livekit_components: ^1.0.0
 ```
 
+Then run `flutter pub get`.
+
+and follow this docs to configure your project for [iOS](https://github.com/livekit/client-sdk-flutter#ios) and [Android](https://github.com/livekit/client-sdk-flutter#android).
+
 ## Usage
 
 Here is a simple example of how to use the components in your Flutter app:
@@ -80,6 +82,9 @@ class MyApp extends StatelessWidget {
                       /// participant builder
                       participantBuilder: (context) {
                         /// build participant widget for each Track
+                        /// return ParticipantTileWidget for each participant
+                        /// you can customize the widget as you want, please refer to the example
+                        /// https://github.com/livekit/components-flutter/blob/main/example/lib/main.dart#L130-L168
                         return const ParticipantTileWidget();
                       },
                     ),
@@ -98,6 +103,10 @@ class MyApp extends StatelessWidget {
 }
 ```
 
+## Example
+
+You can find a complete example in the [example](./example) folder.
+
 <!--BEGIN_REPO_NAV-->
 <br/><table>
 <thead><tr><th colspan="2">LiveKit Ecosystem</th></tr></thead>
diff --git a/example/lib/main.dart b/example/lib/main.dart
index f0821ed..9b80a8b 100644
--- a/example/lib/main.dart
+++ b/example/lib/main.dart
@@ -134,16 +134,18 @@ class MyHomePage extends StatelessWidget {
                                             children: [
                                               /// video track widget in the background
 
-                                              IsSpeakingIndicator(builder:
-                                                  (context, isSpeaking) {
-                                                return isSpeaking != null
-                                                    ? IsSpeakingIndicatorWidget(
-                                                        isSpeaking: isSpeaking,
-                                                        child:
-                                                            const VideoTrackWidget(),
-                                                      )
-                                                    : const VideoTrackWidget();
-                                              }),
+                                              IsSpeakingIndicator(
+                                                builder: (context, isSpeaking) {
+                                                  return isSpeaking != null
+                                                      ? IsSpeakingIndicatorWidget(
+                                                          isSpeaking:
+                                                              isSpeaking,
+                                                          child:
+                                                              const VideoTrackWidget(),
+                                                        )
+                                                      : const VideoTrackWidget();
+                                                },
+                                              ),
 
                                               /// TODO: Add AudioTrackWidget or AgentVisualizerWidget later
 
@@ -154,7 +156,7 @@ class MyHomePage extends StatelessWidget {
                                                 child: FocusToggle(),
                                               ),
 
-                                              /// track stats at the bottom right
+                                              /// track stats at the top left
                                               const Positioned(
                                                 top: 8,
                                                 left: 0,
diff --git a/lib/src/ui/widgets/participant/participant_tile_widget.dart b/lib/src/ui/widgets/participant/participant_tile_widget.dart
index 4011afe..156f3a5 100644
--- a/lib/src/ui/widgets/participant/participant_tile_widget.dart
+++ b/lib/src/ui/widgets/participant/participant_tile_widget.dart
@@ -55,10 +55,10 @@ class ParticipantTileWidget extends StatelessWidget {
           child: FocusToggle(),
         ),
 
-        /// track stats at the bottom right
+        /// track stats at the top left
         const Positioned(
-          bottom: 30,
-          right: 0,
+          top: 8,
+          left: 0,
           child: TrackStatsWidget(),
         ),