Files
fastwatcher/lib/features/setup/presentation/screens/setup_screen.dart
T

153 lines
4.6 KiB
Dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../../../../core/theme/app_colors.dart';
import '../../data/repositories/setup_repository.dart';
import '../providers/setup_providers.dart';
class SetupScreen extends ConsumerWidget {
const SetupScreen({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
return Scaffold(
body: Container(
width: double.infinity,
decoration: const BoxDecoration(
gradient: AppColors.backgroundGradient,
),
child: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Spacer(),
// Logo
Hero(
tag: 'logo',
child: SvgPicture.asset(
'assets/logo/fastwatcher-logo.svg',
height: 120,
),
),
const SizedBox(height: 16),
Text(
'FastWatcher',
style: Theme.of(context).textTheme.displayMedium?.copyWith(
letterSpacing: -1,
),
),
const SizedBox(height: 8),
Text(
'Choose your device role to continue',
style: Theme.of(context).textTheme.bodyMedium,
),
const Spacer(),
// Role Selection Cards
_RoleCard(
title: 'I am a Phone',
subtitle: 'Send links to your TV',
icon: Icons.phone_android_rounded,
color: AppColors.primary,
onTap: () {
ref.read(deviceRoleProvider.notifier).setRole(DeviceRole.phone);
},
),
const SizedBox(height: 16),
_RoleCard(
title: 'I am a TV',
subtitle: 'Receive and play videos',
icon: Icons.tv_rounded,
color: AppColors.secondary,
onTap: () {
ref.read(deviceRoleProvider.notifier).setRole(DeviceRole.tv);
},
),
const SizedBox(height: 48),
],
),
),
),
),
);
}
}
class _RoleCard extends StatelessWidget {
final String title;
final String subtitle;
final IconData icon;
final Color color;
final VoidCallback onTap;
const _RoleCard({
required this.title,
required this.subtitle,
required this.icon,
required this.color,
required this.onTap,
});
@override
Widget build(BuildContext context) {
return Material(
color: Colors.transparent,
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(24),
child: Container(
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
color: AppColors.surface.withOpacity(0.5),
borderRadius: BorderRadius.circular(24),
border: Border.all(
color: Colors.white.withOpacity(0.05),
),
),
child: Row(
children: [
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(16),
),
child: Icon(
icon,
color: color,
size: 32,
),
),
const SizedBox(width: 20),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: Theme.of(context).textTheme.titleLarge,
),
const SizedBox(height: 4),
Text(
subtitle,
style: Theme.of(context).textTheme.bodyMedium,
),
],
),
),
Icon(
Icons.arrow_forward_ios_rounded,
color: Colors.white.withOpacity(0.2),
size: 16,
),
],
),
),
),
);
}
}