FLUTTER LIVE CAPABILITIES
Flutter Live Streaming Features
Go live
- Host and audience roles
- Room lifecycle management
Bring people together
- Live video playback
- Audience participation
Make it yours
- Flexible application layout
- Platform-specific building blocks
Explore Flutter Live Streaming Components
Connect the host view, audience view, and live-room list to your application navigation.
Give creators a place to begin
Add the Flutter host preparation screen so creators can preview the camera before broadcasting. Connect the screen to your authenticated host account.
import 'package:tencent_live_uikit/tencent_live_uikit.dart';
Navigator.push(context, MaterialPageRoute(
builder: (_) => TUILiveRoomAnchorOverlay(roomId: liveID),
));Make watching part of your app
Open the Flutter audience view with the selected live room. Connect room entry and exit to your app’s navigation.
Navigator.push(context, MaterialPageRoute(
builder: (_) => TUILiveRoomAudienceOverlay(
roomId: liveID,
liveInfo: LiveInfo(liveID: liveID),
),
));CUSTOMIZATION
Customize Your Flutter Live UI Kit
Arrange video, audience interactions, and navigation around the live experience in your Flutter app.
GET STARTED
Add Live Streaming to Your Flutter App
- 01
- 02
- 03
flutter pub add tencent_live_uikitimport 'package:atomic_x_core/atomicxcore.dart';
await LoginStore.shared.login(
sdkAppID: SDKAppID, userID: userID, userSig: userSig,
);Flutter Live Streaming UI Kit FAQs
What can I build with the Flutter Live UI Kit?
The Flutter Live Streaming UI Kit includes host, audience, and room-list interfaces. Connect these TUILiveKit components to your user accounts and Flutter navigation to create a complete viewing flow.
How does this UI Kit fit with the SDK?
How do I connect a Flutter live viewer to a broadcast?
How do I authenticate users of the Flutter Live Streaming UI Kit?
Is the Flutter Live Streaming UI Kit free to use?
How do I integrate Flutter Live Streaming UI Kit with Dart?
How do I test Flutter Live Streaming UI Kit before releasing my app?
How do I customize the interface for Flutter Live Streaming UI Kit?
Customize the host page's PNG assets and ARB localization files in a maintained source copy. For example, change a livekit_en.arb label and run flutter gen-l10n to regenerate its localized code. Keep ComponentTheme and the LiveKit navigation observer connected. TUILiveRoomAnchorOverlay must be opened as a standalone route, rather than nested inside Container or Stack, because it manages its own overlay and floating-window behavior.