example app design update & show active speaker

This commit is contained in:
Hiroshi Horie
2021-10-25 02:08:26 +09:00
parent 6d4f32233f
commit d065c2eb97
11 changed files with 314 additions and 160 deletions
+98 -60
View File
@@ -1,5 +1,7 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:livekit_client/livekit_client.dart';
import 'package:livekit_example/widgets/text_field.dart';
import 'package:shared_preferences/shared_preferences.dart';
import '../exts.dart';
@@ -105,74 +107,110 @@ class _ConnectPageState extends State<ConnectPage> {
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: const Text('Connect to LiveKit'),
),
body: Center(
body: Container(
alignment: Alignment.center,
child: Container(
padding: const EdgeInsets.symmetric(
vertical: 20,
horizontal: 20,
),
decoration: BoxDecoration(
color: Theme.of(context).cardColor,
borderRadius: BorderRadius.circular(8),
border:
Border.all(color: Theme.of(context).colorScheme.secondary),
),
constraints: const BoxConstraints(
maxWidth: 320,
),
constraints: const BoxConstraints(maxWidth: 400),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
enableSuggestions: false,
autocorrect: false,
controller: _uriCtrl,
decoration: const InputDecoration(labelText: 'URL'),
),
TextField(
enableSuggestions: false,
autocorrect: false,
controller: _tokenCtrl,
decoration: const InputDecoration(labelText: 'Token'),
),
Padding(
padding: const EdgeInsets.only(top: 20),
child: CheckboxListTile(
controlAffinity: ListTileControlAffinity.leading,
onChanged: (value) => _setSimulcast(value),
title: const Text('Use Simulcast'),
value: _simulcast,
),
),
Padding(
padding: const EdgeInsets.only(top: 20),
child: ElevatedButton(
onPressed: _busy ? null : () => _connect(context),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (_busy)
const Padding(
padding: EdgeInsets.only(right: 10),
child: SizedBox(
height: 15,
width: 15,
child: CircularProgressIndicator(
color: Colors.white,
strokeWidth: 2,
),
),
),
const Text('Connect'),
],
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 70),
child: SvgPicture.asset(
'images/logo-dark.svg',
),
),
Padding(
padding: const EdgeInsets.only(bottom: 30),
child: LKTextField(
label: 'Server URL',
ctrl: _uriCtrl,
),
),
Padding(
padding: const EdgeInsets.only(bottom: 50),
child: LKTextField(
label: 'Token',
ctrl: _tokenCtrl,
),
),
Container(
alignment: Alignment.center,
child: ElevatedButton(
onPressed: _busy ? null : () => _connect(context),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (_busy)
const Padding(
padding: EdgeInsets.only(right: 10),
child: SizedBox(
height: 15,
width: 15,
child: CircularProgressIndicator(
color: Colors.white,
strokeWidth: 2,
),
),
),
const Text('CONNECT'),
],
),
),
),
// Container(
// padding: const EdgeInsets.symmetric(
// vertical: 20,
// horizontal: 20,
// ),
// decoration: BoxDecoration(
// color: Theme.of(context).cardColor,
// borderRadius: BorderRadius.circular(8),
// // border: Border.all(
// // color: Theme.of(context).colorScheme.secondary),
// ),
// constraints: const BoxConstraints(
// maxWidth: 320,
// ),
// child: Column(
// mainAxisSize: MainAxisSize.min,
// children: [
// TextField(
// enableSuggestions: false,
// autocorrect: false,
// controller: _uriCtrl,
// decoration: const InputDecoration(labelText: 'URL'),
// ),
// TextField(
// enableSuggestions: false,
// autocorrect: false,
// controller: _tokenCtrl,
// decoration: const InputDecoration(labelText: 'Token'),
// ),
// Padding(
// padding: const EdgeInsets.only(top: 20),
// child: CheckboxListTile(
// controlAffinity: ListTileControlAffinity.leading,
// onChanged: (value) => _setSimulcast(value),
// title: const Text('Use Simulcast'),
// value: _simulcast,
// ),
// ),
//
// ],
// ),
// ),
]
// .map((e) => Padding(
// padding: const EdgeInsets.only(bottom: 50), child: e))
// .toList(),
),
],
),
),
),
);
+1 -2
View File
@@ -142,10 +142,9 @@ class _RoomPageState extends State<RoomPage> {
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: math.max(0, participants.length - 1),
itemBuilder: (BuildContext context, int index) => Container(
itemBuilder: (BuildContext context, int index) => SizedBox(
width: 100,
height: 100,
padding: const EdgeInsets.all(2),
child: ParticipantWidget(participants[index + 1],
quality: VideoQuality.LOW),
),