This document will introduce how to customize the TUILiveKit user interface. We offer three schemes for you to choose from: Interface fine-tuning, Partial UI customization.
Scheme 1: Interface Fine-tuning Plan
By directly modifying the UI source code provided by us, you can adjust the user interface of TUILiveKit. The source code for the TUILiveKit interface is located in the Flutter folder on Github:
Replace Icon
You can directly replace the icons in the Flutter/assets/images folder to ensure that the color scheme of the icons throughout the entire app remains consistent. Please keep the icon file names unchanged when replacing them.
Replace Copy
You can modify the string content of the TUILiveKit interface by editing the Flutter/lib/common/language/i10n/ directory's livekit_en.arb and livekit_zh.arb files.
// After modifying the string, execute the following command in the current feature directory to make it effective
flutter gen-l10n
Scheme 2: Customize Partial UI Plan
The UI of TUILiveKit is mainly divided into two parts: public UI components and non-public UI components. You can modify the files to adapt to your own UI style. Below is an introduction to the UI in our code:
Public UI Components
File location:Flutter/lib/common/ui_component
ui_component
├── audience_list // Audience List UI directory in the top right corner of the broadcaster's streaming page and the audience's pull stream page
│ ├── audience_list_panel_widget.dart // Audience list panel view that pops up when the audience list is clicked
│ └── audience_list_widget.dart // Audience list view
├── audio_effect // Sound effect settings panel directory in the feature area of the anchor streaming page
│ ├── service // Service layer directory for the sound effect settings panel
│ ├── audio_effect_service.dart // Service layer for the sound effect settings panel, encapsulating APIs related to sound effect settings
│ ├── store // Data layer directory for the sound effect settings panel
│ ├── audio_effect_state_factory.dart // Factory class implementation for generating data layer data for the sound effect settings panel
│ └── audio_effect_state.dart // Specific encapsulation class for the data of the sound effect settings panel
│ └── widget // View layer directory for the sound effect settings panel
│ ├── audio_effect_panel_widget.dart // Specific implementation of the view for the sound effect settings panel
│ ├── change_voice_widget.dart // Voice change view in the sound effect settings panel
│ └── reverb_widget.dart // Reverb view in the sound effect settings panel
├── dashboard // Directory for dashboard views
│ ├── anchor_dashboard_widget.dart // Implementation of the broadcaster dashboard view displayed after the broadcaster ends the live stream
│ └── audience_dashboard_widget.dart // Implementation of the audience dashboard view displayed after the broadcaster ends the live stream
├── live_info // Directory for the Live Room Information Panel
│ ├── live_info_detail_widget.dart // Information Detail Page Board that pops up when the Live Room Information Panel is clicked
│ └── live_info_widget.dart // View Implementation of the Live Room Information Panel
├── music // Directory for the implementation of Music Panel features
│ ├── service // Service layer directory for the music settings panel
│ ├── music_service.dart // Specific implementation of the Music Panel Service Layer, encapsulating APIs related to music playback
│ ├── store // Data layer directory for the music settings panel
│ ├── music_state_factory.dart // Factory class implementation for generating data layer data for the music settings panel
│ └── music_state.dart // Specific encapsulation class for the data of the music settings panel
│ └── widget // View layer directory for the music settings panel
│ └── music_panel_widget.dart // Specific implementation of the view layer for the music settings panel
├── preview // Broadcaster preview page, view directory for the live room information editing area
│ ├── live_cover_select_widget.dart // View for selecting the live cover in the live room information editing area
│ └── live_info_edit_widget.dart // View implementation of the live room information editing area
└── room_list // Implementation directory of the Live Room List Component
├── service // Service layer directory for the Live Room List Component
└── room_list_service.dart // Specific implementation of the service layer for the Live Room List Component, encapsulating APIs related to the Live Room List
├── store // Data layer directory for the Live Room List Component
└── room_list_state.dart // Specific encapsulation class for the Live Room List Component data
└── widget // View layer directory for the Live Room List Component
└── room_list_widget.dart // Implementation of the Live Room List View for the Live Room List Component
Non-public UI Components
File location:Flutter/lib/widget/live_room
live_room
├── anchor // View Layer Directory for Host End
│ ├── common // View Layer Preview Interface for Host End and Common View Directory for Live Interface
│ ├── settings_panel_widget.dart // Implementation of the Settings Panel
│ └── video_params_panel_widget.dart // Panel for selecting Ultra HD, HD, and SD
│ ├── live_streaming // View Directory for Live Streaming Status
│ ├── link // View Directory for Audience Link
│ ├── anchor_link_mic_manage_panel_widget.dart // Link Management Panel, supports agreeing or rejecting audience link requests
│ └── apply_link_mic_float_widget.dart // Floating link request prompt when an audience applies for link
│ ├── anchor_living_function_widget.dart // View of the bottom feature area during live streaming
│ └── anchor_living_widget.dart // Layout view during live streaming
│ ├── preview // View directory in the live preview state
│ ├── anchor_preview_function_widget.dart // View of the bottom feature area during live preview
│ └── anchor_preview_widget.dart // Layout view during live preview
│ ├── video // View Directory for Streamed Video on the Anchor Side
│ └── anchor_video_widget.dart // Implementation of Streamed Video View on the Anchor Side
│ └── anchor_widget.dart // Overall Layout of the Streaming View for Anchors
├── audience // Audience View Layer Directory
│ ├── live_streaming // View Directory for Audience Streaming
│ ├── link // View Directory for Audience Link
│ ├── select_link_mic_type_panel_widget.dart // View for selecting between audio or video link for audience
│ └── video_link_settings_panel_widget.dart // Panel view for setting parameters in video link
│ ├── audience_function_widget.dart // View of the feature area at the bottom of the audience streaming page
│ ├── audience_living_widget.dart // Layout view of sub-components in the audience streaming page
│ └── audience_waiting_pass_widget.dart // Animation view while an audience waits for host approval for linking
│ ├── video // Viewer-side stream pull view directory
│ ├── audience_video_widget.dart // Implementation of the viewer-side stream pull view
│ └── link_request_place_holder_widget.dart.// Placeholder window for audience users requesting to link
│ └── audience_widget.dart // Overall layout view of the audience stream
└── video // Directory for videos captured by the camera
├── nine_grid_layout.dart // Nine-grid view layout for mic users
├── video_item_widget.dart // Encapsulated view of a single video stream
└── video_widget_factory.dart // Factory class for generating VideoView
