Skip to content

Modernize the Flutter example app #1066

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hiroshihorie merged 9 commits into from
Aug 11, 2026
Merged

Modernize the Flutter example app #1066

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d007857
Modernize the Flutter example app
hiroshihorie May 5, 2026
080896f
format
hiroshihorie May 5, 2026
99b30fe
Merge branch 'main' into hiroshi/modernize-flutter-example-app
hiroshihorie May 7, 2026
04b3cfe
Merge main into modernize Flutter example app
hiroshihorie Jun 1, 2026
2127f3f
Fix example input field borders
hiroshihorie Jun 1, 2026
00dced7
Merge remote-tracking branch 'origin/main' into hiroshi/modernize-flu…
hiroshihorie Jun 19, 2026
bf44961
Merge remote-tracking branch 'origin/main' into hiroshi/modernize-flu…
hiroshihorie Aug 11, 2026
e67a68d
Fix messages panel autoscroll by passing a fresh list snapshot
hiroshihorie Aug 11, 2026
432c15f
Remove stale CocoaPods embed phase from example macOS project
hiroshihorie Aug 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
731 changes: 524 additions & 207 deletions example/lib/pages/connect.dart
View file
Open in desktop

Large diffs are not rendered by default.

225 changes: 114 additions & 111 deletions example/lib/pages/prejoin.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ class JoinArgs {
this.simulcast = true,
this.adaptiveStream = true,
this.dynacast = true,
this.autoSubscribe = true,
this.preferredCodec = 'VP8',
this.enableBackupVideoCodec = true,
});
Expand All @@ -29,15 +30,13 @@ class JoinArgs {
final bool simulcast;
final bool adaptiveStream;
final bool dynacast;
final bool autoSubscribe;
final String preferredCodec;
final bool enableBackupVideoCodec;
}

class PreJoinPage extends StatefulWidget {
const PreJoinPage({
required this.args,
super.key,
});
const PreJoinPage({required this.args, super.key});
final JoinArgs args;
@override
State<StatefulWidget> createState() => _PreJoinPageState();
Expand Down Expand Up @@ -69,7 +68,9 @@ class _PreJoinPageState extends State<PreJoinPage> {

Future<void> _initStateAsync() async {
await _readPrefs();
_subscription = Hardware.instance.onDeviceChange.stream.listen(_loadDevices);
_subscription = Hardware.instance.onDeviceChange.stream.listen(
_loadDevices,
);
final devices = await Hardware.instance.enumerateDevices();
await _loadDevices(devices);
}
Expand Down Expand Up @@ -164,9 +165,7 @@ class _PreJoinPageState extends State<PreJoinPage> {

if (_selectedAudioDevice != null) {
_audioTrack = await LocalAudioTrack.create(
AudioCaptureOptions(
deviceId: _selectedAudioDevice!.deviceId,
),
AudioCaptureOptions(deviceId: _selectedAudioDevice!.deviceId),
);
await _audioTrack!.start();
}
Expand All @@ -180,10 +179,12 @@ class _PreJoinPageState extends State<PreJoinPage> {
}

if (_selectedVideoDevice != null) {
_videoTrack = await LocalVideoTrack.createCameraTrack(CameraCaptureOptions(
deviceId: _selectedVideoDevice!.deviceId,
params: _selectedVideoParameters,
));
_videoTrack = await LocalVideoTrack.createCameraTrack(
CameraCaptureOptions(
deviceId: _selectedVideoDevice!.deviceId,
params: _selectedVideoParameters,
),
);
await _videoTrack!.start();
}
}
Expand Down Expand Up @@ -228,15 +229,15 @@ class _PreJoinPageState extends State<PreJoinPage> {
name: 'custom_audio_track_name',
),
defaultCameraCaptureOptions: const CameraCaptureOptions(
maxFrameRate: 30,
params: VideoParameters(
dimensions: VideoDimensions(1280, 720),
)),
maxFrameRate: 30,
params: VideoParameters(dimensions: VideoDimensions(1280, 720)),
),
defaultScreenShareCaptureOptions: const ScreenShareCaptureOptions(
useiOSBroadcastExtension: true,
params: VideoParameters(
dimensions: VideoDimensionsPresets.h1080_169,
)),
useiOSBroadcastExtension: true,
params: VideoParameters(
dimensions: VideoDimensionsPresets.h1080_169,
),
),
defaultVideoPublishOptions: VideoPublishOptions(
simulcast: args.simulcast,
videoCodec: args.preferredCodec,
Expand All @@ -259,6 +260,7 @@ class _PreJoinPageState extends State<PreJoinPage> {
await room.connect(
args.url,
args.token,
connectOptions: ConnectOptions(autoSubscribe: args.autoSubscribe),
fastConnectOptions: FastConnectOptions(
microphone: TrackOption(track: _audioTrack),
camera: TrackOption(track: _videoTrack),
Expand All @@ -268,7 +270,9 @@ class _PreJoinPageState extends State<PreJoinPage> {
if (!context.mounted) return;
await Navigator.push<void>(
context,
MaterialPageRoute(builder: (_) => RoomPage(room, listener, fastConnection: true)),
MaterialPageRoute(
builder: (_) => RoomPage(room, listener, fastConnection: true),
),
);
} catch (error) {
print('Could not connect $error');
Expand Down Expand Up @@ -305,52 +309,56 @@ class _PreJoinPageState extends State<PreJoinPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'Select Devices',
style: TextStyle(
color: Colors.white,
),
),
leading: IconButton(
icon: const Icon(Icons.arrow_back, color: Colors.white),
onPressed: () => _actionBack(context),
),
appBar: AppBar(
title: const Text(
'Select Devices',
style: TextStyle(color: Colors.white),
),
body: Container(
alignment: Alignment.center,
child: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 20,
),
constraints: const BoxConstraints(maxWidth: 400),
child: Column(mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.stretch, children: [
leading: IconButton(
icon: const Icon(Icons.arrow_back, color: Colors.white),
onPressed: () => _actionBack(context),
),
),
body: Container(
alignment: Alignment.center,
child: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
constraints: const BoxConstraints(maxWidth: 400),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 10),
child: SizedBox(
width: 320,
height: 240,
child: Container(
alignment: Alignment.center,
color: Colors.black54,
child: _videoTrack != null
? VideoTrackRenderer(
renderMode: VideoRenderMode.auto,
_videoTrack!,
)
: Container(
alignment: Alignment.center,
child: LayoutBuilder(
builder: (ctx, constraints) => Icon(
Icons.videocam_off,
color: LKColors.lkBlue,
size: math.min(constraints.maxHeight, constraints.maxWidth) * 0.3,
),
),
padding: const EdgeInsets.only(bottom: 10),
child: SizedBox(
width: 320,
height: 240,
child: Container(
alignment: Alignment.center,
color: Colors.black54,
child: _videoTrack != null
? VideoTrackRenderer(
renderMode: VideoRenderMode.auto,
_videoTrack!,
)
: Container(
alignment: Alignment.center,
child: LayoutBuilder(
builder: (ctx, constraints) => Icon(
Icons.videocam_off,
color: LKColors.lkBlue,
size: math.min(
constraints.maxHeight,
constraints.maxWidth,
) *
0.3,
),
))),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 5),
child: Row(
Expand All @@ -370,20 +378,18 @@ class _PreJoinPageState extends State<PreJoinPage> {
child: DropdownButton2<MediaDevice>(
isExpanded: true,
disabledHint: const Text('Disable Camera'),
hint: const Text(
'Select Camera',
),
hint: const Text('Select Camera'),
items: _enableVideo
? _videoInputs
.map((MediaDevice item) => DropdownMenuItem<MediaDevice>(
value: item,
child: Text(
item.label,
style: const TextStyle(
fontSize: 14,
),
),
))
.map(
(MediaDevice item) => DropdownMenuItem<MediaDevice>(
value: item,
child: Text(
item.label,
style: const TextStyle(fontSize: 14),
),
),
)
.toList()
: [],
value: _selectedVideoDevice,
Expand All @@ -399,9 +405,7 @@ class _PreJoinPageState extends State<PreJoinPage> {
height: 40,
width: 140,
),
menuItemStyleData: const MenuItemStyleData(
height: 40,
),
menuItemStyleData: const MenuItemStyleData(height: 40),
),
),
),
Expand All @@ -411,24 +415,25 @@ class _PreJoinPageState extends State<PreJoinPage> {
child: DropdownButtonHideUnderline(
child: DropdownButton2<VideoParameters>(
isExpanded: true,
hint: const Text(
'Select Video Dimensions',
),
hint: const Text('Select Video Dimensions'),
items: [
VideoParametersPresets.h480_43,
VideoParametersPresets.h540_169,
VideoParametersPresets.h720_169,
VideoParametersPresets.h1080_169,
]
.map((VideoParameters item) => DropdownMenuItem<VideoParameters>(
value: item,
child: Text(
'${item.dimensions.width}x${item.dimensions.height}',
style: const TextStyle(
fontSize: 14,
),
),
))
.map(
(
VideoParameters item,
) =>
DropdownMenuItem<VideoParameters>(
value: item,
child: Text(
'${item.dimensions.width}x${item.dimensions.height}',
style: const TextStyle(fontSize: 14),
),
),
)
.toList(),
value: _selectedVideoParameters,
onChanged: (VideoParameters? value) async {
Expand All @@ -443,9 +448,7 @@ class _PreJoinPageState extends State<PreJoinPage> {
height: 40,
width: 140,
),
menuItemStyleData: const MenuItemStyleData(
height: 40,
),
menuItemStyleData: const MenuItemStyleData(height: 40),
),
),
),
Expand All @@ -468,20 +471,18 @@ class _PreJoinPageState extends State<PreJoinPage> {
child: DropdownButton2<MediaDevice>(
isExpanded: true,
disabledHint: const Text('Disable Microphone'),
hint: const Text(
'Select Microphone',
),
hint: const Text('Select Microphone'),
items: _enableAudio
? _audioInputs
.map((MediaDevice item) => DropdownMenuItem<MediaDevice>(
value: item,
child: Text(
item.label,
style: const TextStyle(
fontSize: 14,
),
),
))
.map(
(MediaDevice item) => DropdownMenuItem<MediaDevice>(
value: item,
child: Text(
item.label,
style: const TextStyle(fontSize: 14),
),
),
)
.toList()
: [],
value: _selectedAudioDevice,
Expand All @@ -497,9 +498,7 @@ class _PreJoinPageState extends State<PreJoinPage> {
height: 40,
width: 140,
),
menuItemStyleData: const MenuItemStyleData(
height: 40,
),
menuItemStyleData: const MenuItemStyleData(height: 40),
),
),
),
Expand All @@ -524,7 +523,11 @@ class _PreJoinPageState extends State<PreJoinPage> {
],
),
),
]),
))));
],
),
),
),
),
);
}
}
Loading
Loading