myCustomBroadcastInterface function
- required MediasfuParameters parameters,
Complete Custom Broadcast Interface This replaces the entire MediaSFU broadcast interface with a custom design
Implementation
Widget myCustomBroadcastInterface({required MediasfuParameters parameters}) {
return Scaffold(
backgroundColor: Colors.red.shade900,
appBar: AppBar(
title: Text('🔴 Live Broadcast Studio'),
backgroundColor: Colors.red.shade800,
foregroundColor: Colors.white,
elevation: 0,
),
body: Column(
children: [
// Broadcast status header
Container(
width: double.infinity,
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.red.shade800, Colors.orange.shade600],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Container(
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(4),
),
child: Text(
'LIVE',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 12,
),
),
),
SizedBox(width: 12),
Expanded(
child: Text(
'Broadcasting: ${parameters.roomName}',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
],
),
SizedBox(height: 8),
Row(
children: [
Icon(Icons.people, color: Colors.white70, size: 16),
SizedBox(width: 4),
Text(
'Viewers: ${parameters.participants.length}',
style: TextStyle(color: Colors.white70, fontSize: 14),
),
Spacer(),
Icon(Icons.person, color: Colors.white70, size: 16),
SizedBox(width: 4),
Text(
'Host: ${parameters.member}',
style: TextStyle(color: Colors.white70, fontSize: 14),
),
],
),
],
),
),
// Broadcast controls
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.grey.shade800,
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 4,
offset: Offset(0, 2),
),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildBroadcastControlButton(
onPressed: () => parameters.clickVideo(
ClickVideoOptions(parameters: parameters),
),
icon: parameters.videoAction ? Icons.videocam : Icons.videocam_off,
label: parameters.videoAction ? 'Camera On' : 'Camera Off',
isActive: parameters.videoAction,
activeColor: Colors.green,
inactiveColor: Colors.red,
),
_buildBroadcastControlButton(
onPressed: () => parameters.clickAudio(
ClickAudioOptions(parameters: parameters),
),
icon: parameters.micAction ? Icons.mic : Icons.mic_off,
label: parameters.micAction ? 'Mic On' : 'Mic Off',
isActive: parameters.micAction,
activeColor: Colors.green,
inactiveColor: Colors.red,
),
_buildBroadcastControlButton(
onPressed: () => parameters.clickScreenShare(
ClickScreenShareOptions(parameters: parameters),
),
icon: parameters.screenAction
? Icons.stop_screen_share
: Icons.screen_share,
label: parameters.screenAction ? 'Stop Share' : 'Share Screen',
isActive: parameters.screenAction,
activeColor: Colors.orange,
inactiveColor: Colors.blue,
),
],
),
),
// Main broadcast area - viewers list
Expanded(
child: Container(
margin: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.grey.shade800,
borderRadius: BorderRadius.circular(16),
),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.red.shade700,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16),
topRight: Radius.circular(16),
),
),
child: Row(
children: [
Icon(Icons.visibility, color: Colors.white),
SizedBox(width: 8),
Text(
'Live Viewers (${parameters.participants.length})',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
],
),
),
Expanded(
child: parameters.participants.isEmpty
? Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.people_outline,
size: 64,
color: Colors.white54,
),
SizedBox(height: 16),
Text(
'No viewers joined yet',
style: TextStyle(
color: Colors.white70,
fontSize: 16,
),
),
SizedBox(height: 8),
Text(
'Share your broadcast link to get viewers!',
style: TextStyle(
color: Colors.white54,
fontSize: 14,
),
),
],
),
)
: ListView.builder(
padding: const EdgeInsets.all(16),
itemCount: parameters.participants.length,
itemBuilder: (context, index) {
final participant = parameters.participants[index];
return _buildBroadcastViewerCard(participant, Colors.red.shade600);
},
),
),
],
),
),
),
// Broadcast action bar
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.grey.shade800,
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 4,
offset: Offset(0, -2),
),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildBroadcastActionButton(
onPressed: () {
// Custom streaming settings
},
icon: Icons.settings_input_composite,
label: 'Stream Settings',
color: Colors.blue.shade600,
),
_buildBroadcastActionButton(
onPressed: () {
// Custom viewer management
},
icon: Icons.group,
label: 'Manage Viewers',
color: Colors.green.shade600,
),
_buildBroadcastActionButton(
onPressed: () {
// End broadcast
},
icon: Icons.stop_circle,
label: 'End Broadcast',
color: Colors.red.shade600,
),
],
),
),
],
),
);
}