Files
SigHej/app/lib/screens/home_screen.dart

437 lines
16 KiB
Dart
Raw Normal View History

2026-05-12 18:21:25 +02:00
import 'dart:async';
import 'package:flutter/foundation.dart';
2026-05-12 18:21:25 +02:00
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:sighej/data/conversation_starters.dart';
2026-05-12 18:21:25 +02:00
import 'package:sighej/screens/profile_screen.dart';
import 'package:sighej/services/api_service.dart';
import 'package:sighej/services/session_store.dart';
bool get _bleAvailable =>
!kIsWeb &&
(defaultTargetPlatform == TargetPlatform.android ||
defaultTargetPlatform == TargetPlatform.iOS);
2026-05-12 18:21:25 +02:00
const kSigHejServiceUuid = '1248f5a0-0000-1000-8000-00805f9b34fb';
const kManufacturerId = 0x4E58;
2026-05-12 18:21:25 +02:00
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen>
with SingleTickerProviderStateMixin {
2026-05-12 18:21:25 +02:00
bool _openToTalk = false;
String? _lastNudge;
String? _lastStarter;
late final AnimationController _pulseCtrl;
late final Animation<double> _pulseAnim;
2026-05-12 18:21:25 +02:00
@override
void initState() {
super.initState();
_pulseCtrl = AnimationController(
vsync: this,
duration: const Duration(seconds: 2),
2026-05-12 18:21:25 +02:00
);
_pulseAnim = Tween<double>(begin: 1.0, end: 1.12).animate(
CurvedAnimation(parent: _pulseCtrl, curve: Curves.easeInOut),
2026-05-12 18:21:25 +02:00
);
}
@override
void dispose() {
_pulseCtrl.dispose();
2026-05-12 18:21:25 +02:00
super.dispose();
}
Future<void> _toggle(SessionStore store) async {
if (_openToTalk) {
_pulseCtrl.stop();
_pulseCtrl.reset();
setState(() {
_openToTalk = false;
_lastNudge = null;
_lastStarter = null;
});
2026-05-12 18:21:25 +02:00
return;
}
try {
await registerSession(store.bleToken, store.interests,
name: store.name, tagline: store.tagline);
} catch (_) {}
2026-05-12 18:21:25 +02:00
_pulseCtrl.repeat(reverse: true);
2026-05-12 18:21:25 +02:00
setState(() => _openToTalk = true);
if (!_bleAvailable) {
await Future.delayed(const Duration(seconds: 3));
if (mounted && _openToTalk) {
// Demo: pick a random interest from the user's list
final interests = store.interests;
final matchedInterest =
interests.isNotEmpty ? (interests..shuffle()).first : 'Tech';
setState(() {
_lastNudge =
'Nogen i nærheden deler din interesse for $matchedInterest';
_lastStarter = getStarter(matchedInterest);
});
}
2026-05-12 18:21:25 +02:00
}
}
@override
Widget build(BuildContext context) {
final store = context.watch<SessionStore>();
final cs = Theme.of(context).colorScheme;
final isDark = Theme.of(context).brightness == Brightness.dark;
2026-05-12 18:21:25 +02:00
return Scaffold(
backgroundColor: cs.surface,
body: Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 440),
child: Column(
children: [
// ── Top bar ──────────────────────────────────────────
_TopBar(store: store),
2026-05-12 18:21:25 +02:00
// ── Main area ────────────────────────────────────────
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Spacer(flex: 2),
2026-05-12 18:21:25 +02:00
// Status text
AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
child: Text(
_openToTalk
? 'Du er åben for en snak'
: 'Tryk for at åbne op',
key: ValueKey(_openToTalk),
style: Theme.of(context)
.textTheme
.headlineSmall
?.copyWith(
fontWeight: FontWeight.w700,
color: cs.onSurface),
textAlign: TextAlign.center,
),
),
const SizedBox(height: 8),
AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
child: Text(
_openToTalk
? 'Søger efter folk med fælles interesser…'
: 'Lad andre vide du er klar til en samtale',
key: ValueKey('sub$_openToTalk'),
style: Theme.of(context)
.textTheme
.bodyMedium
?.copyWith(color: cs.onSurfaceVariant),
textAlign: TextAlign.center,
),
),
2026-05-12 18:21:25 +02:00
const SizedBox(height: 48),
2026-05-12 18:21:25 +02:00
// ── Big toggle button ─────────────────────
GestureDetector(
onTap: () => _toggle(store),
child: ScaleTransition(
scale: _openToTalk ? _pulseAnim : const AlwaysStoppedAnimation(1.0),
child: Stack(
alignment: Alignment.center,
children: [
// Outer glow ring
if (_openToTalk)
Container(
width: 200,
height: 200,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: cs.primary.withAlpha(30),
),
),
// Main circle
Container(
width: 168,
height: 168,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: _openToTalk
? LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
cs.primary,
Color.lerp(cs.primary,
cs.secondary, 0.5)!,
],
)
: LinearGradient(
colors: [
cs.surfaceContainerHighest,
cs.surfaceContainerHighest,
],
),
boxShadow: _openToTalk
? [
BoxShadow(
color: cs.primary.withAlpha(100),
blurRadius: 32,
spreadRadius: 4,
)
]
: [
BoxShadow(
color: isDark
? Colors.black45
: Colors.black12,
blurRadius: 16,
offset: const Offset(0, 4),
)
],
),
child: Icon(
_openToTalk
? Icons.waving_hand_rounded
: Icons.waving_hand_outlined,
size: 68,
color: _openToTalk
? cs.onPrimary
: cs.onSurfaceVariant,
),
),
],
),
),
),
2026-05-12 18:21:25 +02:00
const SizedBox(height: 40),
2026-05-12 18:21:25 +02:00
// ── Nudge card ────────────────────────────
AnimatedSwitcher(
duration: const Duration(milliseconds: 400),
child: _lastNudge != null
? _NudgeCard(
message: _lastNudge!,
starter: _lastStarter,
)
: const SizedBox(height: 80),
),
2026-05-12 18:21:25 +02:00
const Spacer(flex: 3),
2026-05-12 18:21:25 +02:00
// ── Interest chips ────────────────────────
if (store.interests.isNotEmpty)
_InterestRow(interests: store.interests),
2026-05-12 18:21:25 +02:00
const SizedBox(height: 32),
],
),
),
),
],
),
),
),
);
2026-05-12 18:21:25 +02:00
}
}
class _TopBar extends StatelessWidget {
final SessionStore store;
const _TopBar({required this.store});
2026-05-12 18:21:25 +02:00
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
final top = MediaQuery.of(context).padding.top;
2026-05-12 18:21:25 +02:00
return Container(
padding: EdgeInsets.fromLTRB(20, top + 12, 12, 16),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: isDark
? [const Color(0xFF1A3A40), const Color(0xFF0F2930)]
: [const Color(0xFF2A9D8F), const Color(0xFF264653)],
),
),
child: Row(
children: [
const Icon(Icons.waving_hand, color: Colors.white, size: 22),
const SizedBox(width: 8),
const Text('SigHej',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w800,
letterSpacing: -0.5)),
const Spacer(),
// Display name chip
Container(
padding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: Colors.white.withAlpha(25),
borderRadius: BorderRadius.circular(20),
),
child: Text(
store.displayName,
style: const TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.w600),
),
),
const SizedBox(width: 4),
2026-05-12 18:21:25 +02:00
IconButton(
icon: const Icon(Icons.person_outline, color: Colors.white),
2026-05-12 18:21:25 +02:00
onPressed: () => Navigator.of(context).push(
MaterialPageRoute(builder: (_) => const ProfileScreen()),
),
tooltip: 'Rediger profil',
),
],
),
);
}
}
class _NudgeCard extends StatelessWidget {
final String message;
final String? starter;
const _NudgeCard({required this.message, this.starter});
@override
Widget build(BuildContext context) {
final cs = Theme.of(context).colorScheme;
return Container(
width: double.infinity,
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [cs.primaryContainer, cs.tertiaryContainer],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: cs.primary.withAlpha(40),
blurRadius: 16,
offset: const Offset(0, 4),
),
],
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 44,
height: 44,
decoration: BoxDecoration(
color: cs.primary.withAlpha(30),
borderRadius: BorderRadius.circular(12),
2026-05-12 18:21:25 +02:00
),
child:
Icon(Icons.handshake_outlined, color: cs.primary, size: 24),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Nogen i nærheden! 👋',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 14,
color: cs.onPrimaryContainer)),
const SizedBox(height: 3),
Text(message,
style: TextStyle(
fontSize: 13,
color: cs.onPrimaryContainer.withAlpha(200))),
if (starter != null) ...[
const SizedBox(height: 10),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 10, vertical: 7),
decoration: BoxDecoration(
color: cs.primary.withAlpha(20),
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: cs.primary.withAlpha(60), width: 1),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('💬 ',
style: TextStyle(fontSize: 13)),
Expanded(
child: Text(
'"$starter"',
style: TextStyle(
fontSize: 13,
fontStyle: FontStyle.italic,
color: cs.onPrimaryContainer,
height: 1.4,
),
),
),
],
),
2026-05-12 18:21:25 +02:00
),
],
],
),
),
],
),
);
}
}
class _InterestRow extends StatelessWidget {
final List<String> interests;
const _InterestRow({required this.interests});
@override
Widget build(BuildContext context) {
final cs = Theme.of(context).colorScheme;
return SizedBox(
height: 32,
child: ListView.separated(
scrollDirection: Axis.horizontal,
itemCount: interests.length,
separatorBuilder: (_, __) => const SizedBox(width: 6),
itemBuilder: (_, i) => Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: cs.secondaryContainer,
borderRadius: BorderRadius.circular(16),
),
child: Text(
interests[i],
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: cs.onSecondaryContainer),
),
2026-05-12 18:21:25 +02:00
),
),
);
}
}