mirror of
https://github.com/Dvorinka/1356.git
synced 2026-06-05 12:22:56 +00:00
feat: Complete Phase 1 - Full Flutter app implementation with comprehensive features
Version: 1.1.0 Major changes: - Implemented complete Flutter app structure with all core features - Added comprehensive UI screens for auth, countdown, goals, profile, settings, and social features - Integrated Supabase backend with authentication and data repositories - Added offline support with Hive caching and local storage - Implemented comprehensive routing with go_router - Added location services with Google Maps integration - Implemented notifications and home widget support - Added voice recording capabilities and AI chat features - Created comprehensive test suite and documentation - Added Android and iOS platform configurations - Implemented achievements system and social features - Added calendar integration and bucket list functionality This represents a complete Phase 1 milestone with 3,775 additions across 31 files.
This commit is contained in:
Tomas Dvorak
@@ -0,0 +1,160 @@
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:supabase_flutter/supabase_flutter.dart' as supabase;
|
||||
import '../../../data/models/user_model.dart' as app;
|
||||
import '../../../data/repositories/user_repository.dart';
|
||||
import '../../../core/errors/failure.dart';
|
||||
|
||||
final profileControllerProvider = StateNotifierProvider<ProfileController, ProfileState>((ref) {
|
||||
final client = supabase.Supabase.instance.client;
|
||||
final repository = UserRepository(client);
|
||||
return ProfileController(repository);
|
||||
});
|
||||
|
||||
class ProfileController extends StateNotifier<ProfileState> {
|
||||
final UserRepository _repository;
|
||||
|
||||
ProfileController(this._repository) : super(const ProfileState.initial());
|
||||
|
||||
Future<void> loadProfile(String userId) async {
|
||||
state = const ProfileState.loading();
|
||||
try {
|
||||
final user = await _repository.getProfile(userId);
|
||||
state = ProfileState.loaded(user);
|
||||
} on Failure catch (failure) {
|
||||
state = ProfileState.error(failure.message);
|
||||
} catch (e) {
|
||||
state = ProfileState.error(e.toString());
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> updateUsername(String userId, String username) async {
|
||||
state = const ProfileState.loading();
|
||||
try {
|
||||
final isAvailable = await _repository.isUsernameAvailable(username);
|
||||
if (!isAvailable) {
|
||||
state = const ProfileState.error('Username is already taken');
|
||||
return;
|
||||
}
|
||||
|
||||
final updatedUser = await _repository.updateProfile(
|
||||
userId: userId,
|
||||
username: username,
|
||||
);
|
||||
state = ProfileState.loaded(updatedUser);
|
||||
} on Failure catch (failure) {
|
||||
state = ProfileState.error(failure.message);
|
||||
} catch (e) {
|
||||
state = ProfileState.error(e.toString());
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> updateBio(String userId, String bio) async {
|
||||
state = const ProfileState.loading();
|
||||
try {
|
||||
final updatedUser = await _repository.updateProfile(
|
||||
userId: userId,
|
||||
bio: bio,
|
||||
);
|
||||
state = ProfileState.loaded(updatedUser);
|
||||
} on Failure catch (failure) {
|
||||
state = ProfileState.error(failure.message);
|
||||
} catch (e) {
|
||||
state = ProfileState.error(e.toString());
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> updateAvatarUrl(String userId, String avatarUrl) async {
|
||||
state = const ProfileState.loading();
|
||||
try {
|
||||
final updatedUser = await _repository.updateProfile(
|
||||
userId: userId,
|
||||
avatarUrl: avatarUrl,
|
||||
);
|
||||
state = ProfileState.loaded(updatedUser);
|
||||
} on Failure catch (failure) {
|
||||
state = ProfileState.error(failure.message);
|
||||
} catch (e) {
|
||||
state = ProfileState.error(e.toString());
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> toggleProfileVisibility(String userId) async {
|
||||
final currentState = state;
|
||||
if (currentState.user == null) return;
|
||||
|
||||
state = const ProfileState.loading();
|
||||
try {
|
||||
final updatedUser = await _repository.updateProfile(
|
||||
userId: userId,
|
||||
isPublicProfile: !currentState.user!.isPublicProfile,
|
||||
);
|
||||
state = ProfileState.loaded(updatedUser);
|
||||
} on Failure catch (failure) {
|
||||
state = ProfileState.error(failure.message);
|
||||
} catch (e) {
|
||||
state = ProfileState.error(e.toString());
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> completeProfileSetup({
|
||||
required String userId,
|
||||
required String username,
|
||||
String? bio,
|
||||
String? avatarUrl,
|
||||
String? twitterHandle,
|
||||
String? instagramHandle,
|
||||
String? tiktokHandle,
|
||||
String? websiteUrl,
|
||||
}) async {
|
||||
state = const ProfileState.loading();
|
||||
try {
|
||||
final isAvailable = await _repository.isUsernameAvailable(username);
|
||||
if (!isAvailable) {
|
||||
state = const ProfileState.error('Username is already taken');
|
||||
return;
|
||||
}
|
||||
|
||||
final updatedUser = await _repository.updateProfile(
|
||||
userId: userId,
|
||||
username: username,
|
||||
bio: bio,
|
||||
avatarUrl: avatarUrl,
|
||||
twitterHandle: twitterHandle,
|
||||
instagramHandle: instagramHandle,
|
||||
tiktokHandle: tiktokHandle,
|
||||
websiteUrl: websiteUrl,
|
||||
);
|
||||
state = ProfileState.loaded(updatedUser);
|
||||
} on Failure catch (failure) {
|
||||
state = ProfileState.error(failure.message);
|
||||
} catch (e) {
|
||||
state = ProfileState.error(e.toString());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class ProfileState {
|
||||
final bool isLoading;
|
||||
final app.User? user;
|
||||
final String? errorMessage;
|
||||
|
||||
const ProfileState({
|
||||
this.isLoading = false,
|
||||
this.user,
|
||||
this.errorMessage,
|
||||
});
|
||||
|
||||
const ProfileState.initial() : isLoading = false, user = null, errorMessage = null;
|
||||
|
||||
const ProfileState.loading() : isLoading = true, user = null, errorMessage = null;
|
||||
|
||||
const ProfileState.loaded(this.user)
|
||||
: isLoading = false,
|
||||
errorMessage = null;
|
||||
|
||||
const ProfileState.error(this.errorMessage)
|
||||
: isLoading = false,
|
||||
user = null;
|
||||
}
|
||||
|
||||
typedef ProfileStateLoaded = ProfileState;
|
||||
@@ -1,17 +1,537 @@
|
||||
import 'package:flutter/material.dart';
|
||||
// ignore_for_file: deprecated_member_use
|
||||
|
||||
class ProfileScreen extends StatelessWidget {
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:cached_network_image/cached_network_image.dart';
|
||||
import 'package:supabase_flutter/supabase_flutter.dart' as supabase;
|
||||
import '../../../core/widgets/app_scaffold.dart';
|
||||
import '../../../core/widgets/loading_indicator.dart';
|
||||
import '../../../core/widgets/empty_state.dart';
|
||||
import '../../../core/utils/date_time_utils.dart';
|
||||
import '../application/profile_controller.dart';
|
||||
import '../../achievements/application/achievements_controller.dart';
|
||||
|
||||
class ProfileScreen extends ConsumerStatefulWidget {
|
||||
const ProfileScreen({super.key});
|
||||
|
||||
@override
|
||||
ConsumerState<ProfileScreen> createState() => _ProfileScreenState();
|
||||
}
|
||||
|
||||
class _ProfileScreenState extends ConsumerState<ProfileScreen> {
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
final userId = supabase.Supabase.instance.client.auth.currentUser?.id;
|
||||
if (userId != null) {
|
||||
ref.read(profileControllerProvider.notifier).loadProfile(userId);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Profile'),
|
||||
final profileState = ref.watch(profileControllerProvider);
|
||||
final achievementsState = ref.watch(achievementsControllerProvider);
|
||||
final userId = supabase.Supabase.instance.client.auth.currentUser?.id;
|
||||
|
||||
if (userId == null) {
|
||||
return AppScaffold(
|
||||
body: Semantics(
|
||||
label: 'Not signed in',
|
||||
child: const EmptyState(
|
||||
icon: Icons.person_off,
|
||||
title: 'Not Signed In',
|
||||
subtitle: 'Please sign in to view your profile',
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
if (profileState.isLoading) {
|
||||
return const AppScaffold(
|
||||
body: Center(child: LoadingIndicator()),
|
||||
);
|
||||
}
|
||||
|
||||
if (profileState.errorMessage != null) {
|
||||
return AppScaffold(
|
||||
body: Semantics(
|
||||
label: 'Error loading profile',
|
||||
child: Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Icon(Icons.error_outline, size: 48, color: Colors.red),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Error loading profile',
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(profileState.errorMessage!),
|
||||
const SizedBox(height: 16),
|
||||
Semantics(
|
||||
button: true,
|
||||
label: 'Retry loading profile',
|
||||
child: ElevatedButton(
|
||||
onPressed: () {
|
||||
ref.read(profileControllerProvider.notifier).loadProfile(userId);
|
||||
},
|
||||
child: const Text('Retry'),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
final user = profileState.user;
|
||||
if (user == null) {
|
||||
return const AppScaffold(
|
||||
body: EmptyState(
|
||||
icon: Icons.person_off,
|
||||
title: 'Profile Not Found',
|
||||
subtitle: 'Your profile could not be loaded',
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return AppScaffold(
|
||||
body: CustomScrollView(
|
||||
slivers: [
|
||||
SliverAppBar(
|
||||
expandedHeight: 200,
|
||||
pinned: true,
|
||||
flexibleSpace: FlexibleSpaceBar(
|
||||
background: Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [
|
||||
Theme.of(context).colorScheme.primary.withOpacity(0.3),
|
||||
Theme.of(context).colorScheme.surface,
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.settings),
|
||||
onPressed: () => context.push('/settings'),
|
||||
tooltip: 'Settings',
|
||||
),
|
||||
],
|
||||
),
|
||||
SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Center(
|
||||
child: Hero(
|
||||
tag: 'profile-avatar',
|
||||
child: Container(
|
||||
width: 100,
|
||||
height: 100,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
border: Border.all(
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
width: 3,
|
||||
),
|
||||
),
|
||||
child: ClipOval(
|
||||
child: user.avatarUrl != null
|
||||
? CachedNetworkImage(
|
||||
imageUrl: user.avatarUrl!,
|
||||
fit: BoxFit.cover,
|
||||
placeholder: (context, url) => const Center(
|
||||
child: CircularProgressIndicator(),
|
||||
),
|
||||
errorWidget: (context, url, error) => Icon(
|
||||
Icons.person,
|
||||
size: 50,
|
||||
color: Theme.of(context)
|
||||
.colorScheme
|
||||
.onSurfaceVariant,
|
||||
),
|
||||
)
|
||||
: Icon(
|
||||
Icons.person,
|
||||
size: 50,
|
||||
color: Theme.of(context)
|
||||
.colorScheme
|
||||
.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Center(
|
||||
child: Text(
|
||||
user.username,
|
||||
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (user.bio != null && user.bio!.isNotEmpty) ...[
|
||||
const SizedBox(height: 8),
|
||||
Center(
|
||||
child: Text(
|
||||
user.bio!,
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Theme.of(context)
|
||||
.colorScheme
|
||||
.onSurfaceVariant,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
),
|
||||
],
|
||||
const SizedBox(height: 24),
|
||||
_buildCountdownInfo(context, user),
|
||||
const SizedBox(height: 24),
|
||||
_buildStatsSection(context, user, achievementsState.level),
|
||||
const SizedBox(height: 24),
|
||||
_buildQuickActions(context),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
body: const Center(
|
||||
child: Text('Profile - Coming Soon'),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCountdownInfo(BuildContext context, user) {
|
||||
final hasStarted = user.countdownStartDate != null;
|
||||
final hasEnded = user.countdownEndDate != null &&
|
||||
user.countdownEndDate!.isBefore(DateTime.now());
|
||||
|
||||
return Card(
|
||||
elevation: 2,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Icon(
|
||||
hasEnded ? Icons.flag : Icons.timer_outlined,
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
hasEnded ? 'Challenge Complete!' : '1356-Day Challenge',
|
||||
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
if (!hasStarted) ...[
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
'Your challenge hasn\'t started yet. Create your bucket list to begin!',
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
] else if (!hasEnded && user.countdownEndDate != null) ...[
|
||||
const SizedBox(height: 12),
|
||||
_buildCountdownTimer(context, user.countdownEndDate!),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'Started: ${DateTimeUtils.formatDate(user.countdownStartDate!)}',
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
] else ...[
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
'Congratulations! You completed your 1356-day challenge.',
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCountdownTimer(BuildContext context, DateTime endDate) {
|
||||
final remaining = endDate.difference(DateTime.now());
|
||||
final days = remaining.inDays;
|
||||
final hours = remaining.inHours % 24;
|
||||
final minutes = remaining.inMinutes % 60;
|
||||
final seconds = remaining.inSeconds % 60;
|
||||
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: [
|
||||
_TimeUnit(label: 'Days', value: days.toString()),
|
||||
_TimeUnit(label: 'Hours', value: hours.toString().padLeft(2, '0')),
|
||||
_TimeUnit(label: 'Min', value: minutes.toString().padLeft(2, '0')),
|
||||
_TimeUnit(label: 'Sec', value: seconds.toString().padLeft(2, '0')),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildStatsSection(BuildContext context, user, int? level) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'Your Stats',
|
||||
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
if (level != null)
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).colorScheme.primary.withOpacity(0.08),
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.star_rounded,
|
||||
size: 16,
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
'Level $level',
|
||||
style: Theme.of(context).textTheme.labelMedium?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _StatCard(
|
||||
icon: Icons.visibility,
|
||||
label: 'Profile',
|
||||
value: user.isPublicProfile ? 'Public' : 'Private',
|
||||
color: user.isPublicProfile ? Colors.green : Colors.orange,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: _StatCard(
|
||||
icon: Icons.calendar_today,
|
||||
label: 'Member Since',
|
||||
value: DateTimeUtils.formatShortDate(user.createdAt),
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildQuickActions(BuildContext context) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Quick Actions',
|
||||
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
_ActionTile(
|
||||
icon: Icons.edit,
|
||||
title: 'Edit Profile',
|
||||
subtitle: 'Update your avatar, username, or bio',
|
||||
onTap: () => context.push('/profile/edit'),
|
||||
),
|
||||
_ActionTile(
|
||||
icon: Icons.settings,
|
||||
title: 'Settings',
|
||||
subtitle: 'Manage app preferences and privacy',
|
||||
onTap: () => context.push('/settings'),
|
||||
),
|
||||
_ActionTile(
|
||||
icon: Icons.info_outline,
|
||||
title: 'About the Challenge',
|
||||
subtitle: 'Learn more about the 1356-day challenge',
|
||||
onTap: () => context.push('/settings/about'),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
OutlinedButton.icon(
|
||||
onPressed: () async {
|
||||
final confirmed = await showDialog<bool>(
|
||||
context: context,
|
||||
builder: (dialogContext) => AlertDialog(
|
||||
title: const Text('Sign Out'),
|
||||
content: const Text('Are you sure you want to sign out?'),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.pop(dialogContext, false),
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () => Navigator.pop(dialogContext, true),
|
||||
style: TextButton.styleFrom(
|
||||
foregroundColor: Theme.of(context).colorScheme.error,
|
||||
),
|
||||
child: const Text('Sign Out'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
if (confirmed == true && context.mounted) {
|
||||
await supabase.Supabase.instance.client.auth.signOut();
|
||||
if (context.mounted) {
|
||||
context.go('/');
|
||||
}
|
||||
}
|
||||
},
|
||||
icon: const Icon(Icons.logout),
|
||||
label: const Text('Sign Out'),
|
||||
style: OutlinedButton.styleFrom(
|
||||
foregroundColor: Theme.of(context).colorScheme.error,
|
||||
minimumSize: const Size(double.infinity, 48),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _TimeUnit extends StatelessWidget {
|
||||
final String label;
|
||||
final String value;
|
||||
|
||||
const _TimeUnit({required this.label, required this.value});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).colorScheme.primaryContainer,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Text(
|
||||
value,
|
||||
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Theme.of(context).colorScheme.onPrimaryContainer,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
label,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _StatCard extends StatelessWidget {
|
||||
final IconData icon;
|
||||
final String label;
|
||||
final String value;
|
||||
final Color color;
|
||||
|
||||
const _StatCard({
|
||||
required this.icon,
|
||||
required this.label,
|
||||
required this.value,
|
||||
required this.color,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: Column(
|
||||
children: [
|
||||
Icon(icon, color: color, size: 24),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
value,
|
||||
style: Theme.of(context).textTheme.titleSmall?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
label,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ActionTile extends StatelessWidget {
|
||||
final IconData icon;
|
||||
final String title;
|
||||
final String subtitle;
|
||||
final VoidCallback onTap;
|
||||
|
||||
const _ActionTile({
|
||||
required this.icon,
|
||||
required this.title,
|
||||
required this.subtitle,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ListTile(
|
||||
leading: Icon(icon),
|
||||
title: Text(title),
|
||||
subtitle: Text(
|
||||
subtitle,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
trailing: const Icon(Icons.chevron_right),
|
||||
onTap: onTap,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,420 @@
|
||||
import 'dart:io';
|
||||
import 'dart:typed_data';
|
||||
import 'package:flutter/foundation.dart' show kIsWeb;
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:image_picker/image_picker.dart';
|
||||
import 'package:supabase_flutter/supabase_flutter.dart' as supabase;
|
||||
import '../../../core/widgets/app_scaffold.dart';
|
||||
import '../../../core/widgets/primary_button.dart';
|
||||
import '../../../core/utils/validators.dart';
|
||||
import '../application/profile_controller.dart';
|
||||
|
||||
class ProfileSetupScreen extends ConsumerStatefulWidget {
|
||||
const ProfileSetupScreen({super.key});
|
||||
|
||||
@override
|
||||
ConsumerState<ProfileSetupScreen> createState() => _ProfileSetupScreenState();
|
||||
}
|
||||
|
||||
class _ProfileSetupScreenState extends ConsumerState<ProfileSetupScreen> {
|
||||
final _formKey = GlobalKey<FormState>();
|
||||
final _usernameController = TextEditingController();
|
||||
final _bioController = TextEditingController();
|
||||
final _twitterController = TextEditingController();
|
||||
final _instagramController = TextEditingController();
|
||||
final _tiktokController = TextEditingController();
|
||||
final _websiteController = TextEditingController();
|
||||
|
||||
dynamic _avatarFile;
|
||||
String? _avatarUrl;
|
||||
bool _isLoading = false;
|
||||
bool _isCheckingUsername = false;
|
||||
bool _isUsernameAvailable = true;
|
||||
String? _usernameError;
|
||||
|
||||
final ImagePicker _imagePicker = ImagePicker();
|
||||
|
||||
Future<void> _pickAvatar() async {
|
||||
try {
|
||||
final XFile? image = await _imagePicker.pickImage(
|
||||
source: ImageSource.gallery,
|
||||
maxWidth: 512,
|
||||
maxHeight: 512,
|
||||
imageQuality: 85,
|
||||
);
|
||||
|
||||
if (image != null) {
|
||||
setState(() {
|
||||
if (kIsWeb) {
|
||||
_avatarFile = image;
|
||||
} else {
|
||||
_avatarFile = File(image.path);
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(content: Text('Failed to pick image: $e')),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Future<String?> _uploadAvatar() async {
|
||||
if (_avatarFile == null) return null;
|
||||
|
||||
try {
|
||||
final client = supabase.Supabase.instance.client;
|
||||
final userId = client.auth.currentUser?.id;
|
||||
if (userId == null) return null;
|
||||
|
||||
String fileExt;
|
||||
String fileName;
|
||||
String filePath;
|
||||
|
||||
if (kIsWeb && _avatarFile is XFile) {
|
||||
fileExt = (_avatarFile as XFile).path.split('.').last;
|
||||
fileName = '$userId/avatar.$fileExt';
|
||||
filePath = 'avatars/$fileName';
|
||||
|
||||
final bytes = await (_avatarFile as XFile).readAsBytes();
|
||||
await client.storage.from('avatars').uploadBinary(
|
||||
filePath,
|
||||
bytes,
|
||||
fileOptions: supabase.FileOptions(contentType: 'image/$fileExt'),
|
||||
);
|
||||
} else {
|
||||
fileExt = (_avatarFile as File).path.split('.').last;
|
||||
fileName = '$userId/avatar.$fileExt';
|
||||
filePath = 'avatars/$fileName';
|
||||
|
||||
await client.storage.from('avatars').upload(filePath, _avatarFile!);
|
||||
}
|
||||
|
||||
final response = client.storage.from('avatars').getPublicUrl(filePath);
|
||||
return response;
|
||||
} catch (e) {
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(content: Text('Failed to upload avatar: $e')),
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _checkUsernameAvailability(String username) async {
|
||||
if (username.length < 3) return;
|
||||
|
||||
setState(() {
|
||||
_isCheckingUsername = true;
|
||||
_usernameError = null;
|
||||
});
|
||||
|
||||
try {
|
||||
final client = supabase.Supabase.instance.client;
|
||||
final response = await client
|
||||
.from('users')
|
||||
.select('id')
|
||||
.eq('username', username)
|
||||
.maybeSingle();
|
||||
|
||||
setState(() {
|
||||
_isUsernameAvailable = response == null;
|
||||
_isCheckingUsername = false;
|
||||
if (!_isUsernameAvailable) {
|
||||
_usernameError = 'Username is already taken';
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
setState(() {
|
||||
_isCheckingUsername = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _handleCompleteSetup() async {
|
||||
if (!_formKey.currentState!.validate()) return;
|
||||
|
||||
setState(() => _isLoading = true);
|
||||
|
||||
try {
|
||||
final client = supabase.Supabase.instance.client;
|
||||
final userId = client.auth.currentUser?.id;
|
||||
if (userId == null) {
|
||||
throw Exception('User not authenticated');
|
||||
}
|
||||
|
||||
String? uploadedAvatarUrl;
|
||||
if (_avatarFile != null) {
|
||||
uploadedAvatarUrl = await _uploadAvatar();
|
||||
}
|
||||
|
||||
await ref.read(profileControllerProvider.notifier).completeProfileSetup(
|
||||
userId: userId,
|
||||
username: _usernameController.text.trim(),
|
||||
bio: _bioController.text.trim().isEmpty ? null : _bioController.text.trim(),
|
||||
avatarUrl: uploadedAvatarUrl ?? _avatarUrl,
|
||||
twitterHandle: _twitterController.text.trim().isEmpty
|
||||
? null
|
||||
: _twitterController.text.trim(),
|
||||
instagramHandle: _instagramController.text.trim().isEmpty
|
||||
? null
|
||||
: _instagramController.text.trim(),
|
||||
tiktokHandle: _tiktokController.text.trim().isEmpty
|
||||
? null
|
||||
: _tiktokController.text.trim(),
|
||||
websiteUrl: _websiteController.text.trim().isEmpty
|
||||
? null
|
||||
: _websiteController.text.trim(),
|
||||
);
|
||||
|
||||
if (mounted) {
|
||||
context.go('/onboarding');
|
||||
}
|
||||
} catch (e) {
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(content: Text('Failed to complete setup: $e')),
|
||||
);
|
||||
}
|
||||
} finally {
|
||||
if (mounted) {
|
||||
setState(() => _isLoading = false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_usernameController.dispose();
|
||||
_bioController.dispose();
|
||||
_twitterController.dispose();
|
||||
_instagramController.dispose();
|
||||
_tiktokController.dispose();
|
||||
_websiteController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return AppScaffold(
|
||||
title: 'Complete Your Profile',
|
||||
body: SafeArea(
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(24.0),
|
||||
child: Form(
|
||||
key: _formKey,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
const SizedBox(height: 16),
|
||||
Center(
|
||||
child: GestureDetector(
|
||||
onTap: _isLoading ? null : _pickAvatar,
|
||||
child: Stack(
|
||||
children: [
|
||||
Container(
|
||||
width: 120,
|
||||
height: 120,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: Theme.of(context).colorScheme.surfaceContainerHighest,
|
||||
border: Border.all(
|
||||
color: Theme.of(context).colorScheme.outline,
|
||||
width: 2,
|
||||
),
|
||||
),
|
||||
child: _avatarFile != null
|
||||
? ClipOval(
|
||||
child: Image.file(
|
||||
_avatarFile!,
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
)
|
||||
: _avatarUrl != null
|
||||
? ClipOval(
|
||||
child: Image.network(
|
||||
_avatarUrl!,
|
||||
fit: BoxFit.cover,
|
||||
errorBuilder: (context, error, stackTrace) {
|
||||
return Icon(
|
||||
Icons.person,
|
||||
size: 60,
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
);
|
||||
},
|
||||
),
|
||||
)
|
||||
: Icon(
|
||||
Icons.person,
|
||||
size: 60,
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
if (!_isLoading)
|
||||
Positioned(
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Icon(
|
||||
Icons.camera_alt,
|
||||
size: 20,
|
||||
color: Theme.of(context).colorScheme.onPrimary,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Center(
|
||||
child: Text(
|
||||
'Tap to add a photo',
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
TextFormField(
|
||||
controller: _usernameController,
|
||||
textCapitalization: TextCapitalization.none,
|
||||
decoration: InputDecoration(
|
||||
labelText: 'Username',
|
||||
prefixIcon: const Icon(Icons.alternate_email),
|
||||
suffixIcon: _isCheckingUsername
|
||||
? const SizedBox(
|
||||
width: 20,
|
||||
height: 20,
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(12.0),
|
||||
child: CircularProgressIndicator(strokeWidth: 2),
|
||||
),
|
||||
)
|
||||
: _usernameController.text.isNotEmpty && !_isCheckingUsername
|
||||
? Icon(
|
||||
_isUsernameAvailable ? Icons.check_circle : Icons.cancel,
|
||||
color: _isUsernameAvailable ? Colors.green : Colors.red,
|
||||
)
|
||||
: null,
|
||||
border: const OutlineInputBorder(),
|
||||
),
|
||||
validator: Validators.validateUsername,
|
||||
enabled: !_isLoading,
|
||||
onChanged: (value) {
|
||||
if (value.length >= 3) {
|
||||
_checkUsernameAvailability(value.trim());
|
||||
}
|
||||
},
|
||||
),
|
||||
if (_usernameError != null) ...[
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
_usernameError!,
|
||||
style: TextStyle(
|
||||
color: Theme.of(context).colorScheme.error,
|
||||
fontSize: 12,
|
||||
),
|
||||
),
|
||||
],
|
||||
const SizedBox(height: 16),
|
||||
TextFormField(
|
||||
controller: _bioController,
|
||||
maxLines: 3,
|
||||
maxLength: 150,
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'Bio (optional)',
|
||||
prefixIcon: Icon(Icons.info_outline),
|
||||
border: OutlineInputBorder(),
|
||||
helperText: 'Tell others a bit about yourself',
|
||||
),
|
||||
enabled: !_isLoading,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
TextFormField(
|
||||
controller: _twitterController,
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'Twitter (optional)',
|
||||
prefixIcon: Icon(Icons.alternate_email),
|
||||
border: OutlineInputBorder(),
|
||||
),
|
||||
enabled: !_isLoading,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
TextFormField(
|
||||
controller: _instagramController,
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'Instagram (optional)',
|
||||
prefixIcon: Icon(Icons.camera_alt_outlined),
|
||||
border: OutlineInputBorder(),
|
||||
),
|
||||
enabled: !_isLoading,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
TextFormField(
|
||||
controller: _tiktokController,
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'TikTok (optional)',
|
||||
prefixIcon: Icon(Icons.music_note_outlined),
|
||||
border: OutlineInputBorder(),
|
||||
),
|
||||
enabled: !_isLoading,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
TextFormField(
|
||||
controller: _websiteController,
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'Website (optional)',
|
||||
prefixIcon: Icon(Icons.link),
|
||||
border: OutlineInputBorder(),
|
||||
),
|
||||
enabled: !_isLoading,
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
PrimaryButton(
|
||||
onPressed: () {
|
||||
if (!_isLoading) {
|
||||
_handleCompleteSetup();
|
||||
}
|
||||
},
|
||||
text: _isLoading ? 'Saving...' : 'Continue',
|
||||
isLoading: _isLoading,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
TextButton(
|
||||
onPressed: _isLoading
|
||||
? null
|
||||
: () async {
|
||||
try {
|
||||
await supabase.Supabase.instance.client.auth.signOut();
|
||||
if (!context.mounted) return;
|
||||
context.go('/');
|
||||
} catch (e) {
|
||||
if (!context.mounted) return;
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(content: Text('Sign out failed: $e')),
|
||||
);
|
||||
}
|
||||
},
|
||||
child: const Text('Sign out'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user