Conference
  • 개요
  • Web
    • Demo 실행
    • 통합
    • UI 맞춤화
    • Conference Control
    • 룸 내 채팅
    • 클라우드 녹화
    • AI 노이즈 캔슬링
    • 로봇 스트리밍
    • Virtual Background
    • 더 많은 기능
      • 플로팅 윈도우
      • Text Watermark
    • 인터페이스 문서
      • RoomKit 인터페이스
      • RoomEngine 인터페이스
        • 인터페이스 개요
        • TUIRoomEngine
        • TUIRoomEvents
        • TUIRoomEngine 정의
    • 자주 받는 질문들
  • iOS
    • Demo 실행
    • 통합
    • UI 맞춤화
    • 미팅 제어
    • 룸 내 채팅
    • 클라우드 녹화
    • AI 노이즈 캔슬링
    • 로봇 스트리밍
    • 더 많은 기능
      • 플로팅 윈도우
    • 인터페이스 문서
      • RoomKit 인터페이스
      • RoomEngine 인터페이스
        • 인터페이스 개요
        • TUIRoomEngine
        • TUIRoomObserver
        • 유형 정의
    • 자주 받는 질문들
  • Android
    • Demo 실행
    • 통합
    • UI 맞춤화
    • 미팅 제어
    • 룸 내 채팅
    • 클라우드 녹화
    • AI 노이즈 캔슬링
    • 로봇 스트리밍
    • 더 많은 기능
      • 플로팅 윈도우
    • 인터페이스 문서
      • RoomKit 인터페이스
      • RoomEngine 인터페이스
        • 인터페이스 개요
        • TUIRoomEngine
        • TUIRoomObserver
        • 유형 정의
    • 자주 받는 질문들
  • Electron
    • Demo 실행
    • 통합
    • UI 맞춤화
    • Conference Control
    • 룸 내 채팅
    • 클라우드 녹화
    • AI 노이즈 캔슬링
    • 로봇 스트리밍
    • 더 많은 기능
      • 플로팅 윈도우
      • Text Watermark
    • 인터페이스 문서
      • RoomKit 인터페이스
      • RoomEngine 인터페이스
        • 인터페이스 개요
        • TUIRoomEvent
        • TUIRoomEngine
        • TUIRoomEngine 정의
    • 자주 받는 질문들
  • Flutter
    • Demo 실행
    • 통합
    • UI 맞춤화
    • 미팅 제어
    • In-Conference Chat
    • 클라우드 녹화
    • AI 노이즈 캔슬링
    • 로봇 스트리밍
    • 더 많은 기능
      • 플로팅 윈도우
    • 인터페이스 문서
      • RoomKit 인터페이스
      • RoomEngine 인터페이스
        • 인터페이스 개요
        • TUIRoomEngine
        • TUIRoomObserver
        • 유형 정의
    • 자주 받는 질문들
  • 개요
    • 개요
  • 서비스 활성화
  • 가격
    • 무료시간
    • 오디오/비디오 TRTC Conference 월정액 패키지
    • 구독 패키지 기간 과금 설명
    • 종량제
      • 오디오 및 비디오 시간 과금 설명
      • 클라우드 녹화 과금 설명
      • 믹스 트랜스코딩 및 CDN 중계 과금 설명
  • 서버 API
    • REST API
      • RESTful API Overview
      • RESTful API List
      • Room Management
        • Create a Room
        • Destroy a Room
        • Update the Room Information
        • Get the Room Information
      • User Management
        • Get the Room Member List
        • Update the Room Member Information
        • Change the Room Ownership
        • Mark Room Members
        • Ban Room Members
        • Unban Room Members
        • Get the Banned Room Member List
        • Remove Room Member
      • Seat Management
        • Get the Seat List
        • Pick User on the Seat
        • Kick User off the Seat
        • Lock the Seat
    • Third-Party Callback
      • Callback Overview
      • Callback Command List
      • Callback Configuration
        • Query Callback Configuration
        • Create Callback Configuration
        • Update Callback Configuration
        • Delete Callback Configuration
      • Room Related
        • After a Room Is Created
        • After a Room Is Destroyed
        • After the Room Information Is Updated
      • User Related
        • After a Room Is Entered
        • After a Room Is Left
      • Seat Connection Related
        • After the Seat List Is Changed
  • Error Code
Conference
이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.

UI 맞춤화

This article will introduce how to customize the user interface of TUIRoomKit. We provide two solutions for you to choose from: fine-tuning solution and custom UI solution.

Solution 1: Fine-tuning solution

By directly modifying the UI source code we provide, you can adjust the user interface of TUIRoomKit.

Replace icons

You can directly modify the icon components in the rtc_conference_tui_kit/assets/images folder to ensure that the icon color tone style is consistent throughout the app. Please keep the icon file name unchanged when replacing.



Replace copywriting

You can modify the en_us.dart and zh_cn.dart files in the rtc_conference_tui_kit/lib/common/languages folder to change the string content of the video conference interface.

Solution 2: Custom part of UI solution

The UI component folders of TUIRoomKit are as follows. You can modify the view.dart in the corresponding folder to customize the UI according to your actual business needs.
├── lib
├── common
│ └── widgets
│ ├── bottom_sheet.dart (1 KB) // Universal bottom sheet
│ ├── copy_text_button.dart (1 KB) // Universal copy button
│ ├── dialog.dart (4 KB) // Universal dialog
│ ├── drop_down_button.dart (<1 KB) // Universal dropdown button
│ ├── info_list.dart (1 KB) // Universal information display item
│ ├── rounded_container.dart (<1 KB) // Universal rounded corner container
│ ├── search_bar.dart (1 KB) // Universal search bar
│ ├── single_select_list.dart (1 KB) // Universal single select list
│ ├── slider.dart (1 KB) // Universal slider
│ ├── switch.dart (<1 KB) // Universal switcher
│ ├── toast.dart (<1 KB) // Universal toast
│ ├── user_info.dart (3 KB) // Universal user info item
│ └── volume_bar.dart (2 KB) // Universal dynamic microphone volume bar
├── pages
│ └── conference_main
│ ├── view.dart (3 KB)
│ └── widgets
│ ├── bottom_view
│ │ ├── view.dart (1 KB) // Function button of bottom bar
│ │ └── widgets
│ │ ├── base_button.dart (10 KB) // Unexpanded basic bottom function buttons
│ │ ├── bottom_button_item.dart (2 KB) // Encapsulated universal bottom single item button
│ │ ├── mic_button.dart (1 KB) // Microphone button that pops up after the bottom bar is hidden
│ │ └── more_button.dart (3 KB) // All bottom function buttons after expansion
│ ├── exit
│ │ └── view.dart (2 KB) // Bottom sheet of exit room
│ ├── invite_sheet
│ │ └── invite_sheet.dart (1 KB) // Invite popup
│ ├── local_screen_sharing
│ │ └── local_screen_sharing.dart (1 KB) // Prompt component during screen sharing in the middle of the screen after turning on screen sharing locally
│ ├── raise_hand_list
│ │ ├── view.dart (3 KB) // Raise hand application list (only displayed on the host in raise hand speaking mode)
│ │ └── widgets
│ │ ├── title.dart (<1 KB) // List title bar
│ │ ├── user_item.dart (1 KB) // A single item of the encapsulated list component
│ │ └── user_table.dart (1 KB) // List component
│ ├── setting
│ │ ├── view.dart (1 KB) // Settings panel
│ │ └── widgets
│ │ ├── audio_setting.dart (1 KB) // Audio setting component
│ │ ├── setting_info_select.dart (1 KB) // Radio value setting component, such as resolution setting
│ │ ├── setting_item.dart (<1 KB) // Settings panel single setting item
│ │ └── video_setting.dart (4 KB) // Video setting component
│ ├── top_view
│ │ ├── view.dart (3 KB) // Function button of top bar
│ │ └── widgets
│ │ ├── meeting_title.dart (2 KB) // Top meeting information display component
│ │ ├── room_info_sheet.dart (2 KB) // Detailed meeting information pop-up window at the bottom
│ │ └── top_button_item.dart (1 KB) // Top function single universal item button
│ ├── transfer_host
│ │ ├── view.dart (1 KB) // Transfer homeowners panel
│ │ └── widgets
│ │ ├── title.dart (<1 KB) // Title bar of transfer homeowners panel
│ │ ├── user_item.dart (1 KB) // Transferable homeowner user list single item
│ │ └── user_table.dart (1 KB) // Transferable homeowner user list
│ ├── user_list
│ │ ├── view.dart (3 KB) // User list Page
│ │ └── widgets
│ │ ├── button_item.dart (1 KB) // Button item at the bottom of the user list
│ │ ├── user_control.dart (7 KB) // The member management page that pops up after clicking on a single member
│ │ ├── user_control_item.dart (1 KB) // The item of member management page
│ │ ├── user_item.dart (3 KB) // User list item
│ │ └── user_table.dart (3 KB) // User list
│ ├── video_seat
│ │ ├── video_layout
│ │ │ ├── view.dart (3 KB) // The layout of video items in a single-page video screen
│ │ │ └── widgets
│ │ │ ├── video_item // Single video frame item folder
│ │ │ │ ├── view.dart (4 KB) // Single video frame item
│ │ │ │ └── widgets
│ │ │ │ ├── video_user_info.dart (2 KB) // User information on the video screen item
│ │ │ │ └── volume_bar.dart (<1 KB) // Microphone icon in user information
│ │ │ └── with_draggable_window_widget.dart (1 KB) // Two-person video screen size window layout method
│ │ └── video_page_turning
│ │ ├── view.dart (2 KB) // Video screen flip management page
│ │ └── widgets
│ │ └── page_indicator.dart (1 KB) // Page indicator dot

Solution 3: Custom all UI solution

The overall function of TUIRoomKit is based on the TUIRoomEngine, a UI-less SDK. You can completely implement your own UI interface based on TUIRoomEngine. For details, please see TUIRoomEngine API interface address.