Update UI + Agora Call

This commit is contained in:
2026-05-27 19:36:01 +07:00
parent a629357e8c
commit 3cb32a4d69
42 changed files with 6516 additions and 1285 deletions
@@ -345,25 +345,58 @@ class _PairingStatusCardState extends State<_PairingStatusCard> {
@override
Widget build(BuildContext context) {
final pending = _data?['status'] == 'PENDING';
final cardColor = _active
? const Color(0xFFF0FDF4)
: pending
? const Color(0xFFEFF6FF)
: const Color(0xFFFFFBEB);
final accent = _active
? const Color(0xFF059669)
: pending
? const Color(0xFF2563EB)
: const Color(0xFFD97706);
return Container(
padding: const EdgeInsets.all(16),
padding: const EdgeInsets.all(18),
decoration: BoxDecoration(
color: _active ? const Color(0xFFF0FDF4) : const Color(0xFFFFFBEB),
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: _active ? const Color(0xFFBBF7D0) : const Color(0xFFFDE68A)),
color: cardColor,
borderRadius: BorderRadius.circular(22),
border: Border.all(color: accent.withValues(alpha: 0.28)),
boxShadow: [
BoxShadow(
color: accent.withValues(alpha: 0.10),
blurRadius: 24,
offset: const Offset(0, 12),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
children: [
Icon(_active ? Icons.link : Icons.info_outline,
color: _active
? const Color(0xFF16A34A)
: const Color(0xFFD97706)),
Container(
width: 42,
height: 42,
decoration: BoxDecoration(
color: accent.withValues(alpha: 0.12),
borderRadius: BorderRadius.circular(12),
),
child: Icon(
_active
? Icons.verified_user_outlined
: pending
? Icons.mark_email_unread_outlined
: Icons.info_outline,
color: accent),
),
const SizedBox(width: 12),
Expanded(child: Text(_status)),
Expanded(
child: Text(_status,
style: const TextStyle(
color: Color(0xFF0F172A),
fontWeight: FontWeight.w700,
height: 1.25)),
),
IconButton(
onPressed: _loading ? null : _load,
icon: _loading
@@ -427,33 +460,84 @@ class _Page extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
child: DecoratedBox(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFFF8FAFC), Color(0xFFEFF6FF)],
),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 14, 16, 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TweenAnimationBuilder<double>(
tween: Tween(begin: 14, end: 0),
duration: const Duration(milliseconds: 360),
curve: Curves.easeOutCubic,
builder: (_, offset, child) => Opacity(
opacity: (1 - offset / 14).clamp(0.0, 1.0),
child: Transform.translate(
offset: Offset(0, offset), child: child),
),
child: Container(
width: double.infinity,
padding: const EdgeInsets.all(18),
decoration: BoxDecoration(
color: const Color(0xFF0F172A),
borderRadius: BorderRadius.circular(24),
boxShadow: [
BoxShadow(
color: const Color(0xFF0F172A).withValues(alpha: 0.18),
blurRadius: 28,
offset: const Offset(0, 14),
),
],
),
child: Row(
children: [
Text(title,
style: Theme.of(context)
.textTheme
.headlineSmall
?.copyWith(fontWeight: FontWeight.w800)),
if (subtitle != null)
Text(subtitle!,
style: const TextStyle(color: Color(0xFF64748B))),
Container(
width: 52,
height: 52,
decoration: BoxDecoration(
color:
const Color(0xFF38BDF8).withValues(alpha: 0.16),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: const Color(0xFF38BDF8)),
),
child: const Icon(Icons.hub_outlined,
color: Color(0xFFBAE6FD), size: 28),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title,
style: Theme.of(context)
.textTheme
.headlineSmall
?.copyWith(
fontWeight: FontWeight.w900,
color: Colors.white,
)),
if (subtitle != null)
Text(subtitle!,
style: const TextStyle(
color: Color(0xFFCBD5E1), height: 1.25)),
],
),
),
],
),
),
],
),
const SizedBox(height: 16),
Expanded(child: child),
],
),
const SizedBox(height: 16),
Expanded(child: child),
],
),
),
),
);
@@ -474,24 +558,47 @@ class _InfoCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(16),
padding: const EdgeInsets.all(18),
decoration: BoxDecoration(
color: const Color(0xFFEFF6FF),
borderRadius: BorderRadius.circular(12)),
color: Colors.white,
borderRadius: BorderRadius.circular(22),
border: Border.all(color: const Color(0xFFDDEAFE)),
boxShadow: [
BoxShadow(
color: const Color(0xFF2563EB).withValues(alpha: 0.10),
blurRadius: 24,
offset: const Offset(0, 12),
),
],
),
child: Row(
children: [
Icon(icon, color: const Color(0xFF1A56DB)),
const SizedBox(width: 12),
Container(
width: 48,
height: 48,
decoration: BoxDecoration(
color: const Color(0xFFEFF6FF),
borderRadius: BorderRadius.circular(14),
),
child: Icon(icon, color: const Color(0xFF2563EB)),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title),
Text(title,
style: const TextStyle(
color: Color(0xFF64748B), fontWeight: FontWeight.w700)),
SelectableText(value,
style: const TextStyle(
fontSize: 22, fontWeight: FontWeight.w800)),
fontSize: 25,
height: 1.1,
letterSpacing: 1.2,
fontWeight: FontWeight.w900,
color: Color(0xFF0F172A))),
if (helper != null) ...[
const SizedBox(height: 4),
const SizedBox(height: 6),
Text(helper!,
style: const TextStyle(
color: Color(0xFF64748B), fontSize: 12)),