Sicherhaven/Eventify-frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: rebuild desktop UI to match Figma + website, hero slider improvements

Browse Source 
- Desktop sidebar (262px, blue gradient, white pill nav), topbar (search + bell + avatar), responsive shell rewritten
- Desktop homepage: immersive hero with Ken Burns animation, pill category chips, date badge cards matching mvnew.eventifyplus.com/home
- Desktop calendar: 60/40 two-column layout with white background
- Desktop profile: full-width banner + 3-column event grids
- Desktop learn more: hero image + about/venue columns + gallery strip
- Desktop settings/contribute: polished to match design system
- Mobile hero slider: RepaintBoundary, animated dots with 44px tap targets, 5s auto-scroll, 8s post-swipe delay, shimmer loading, dynamic event type badge, human-readable dates
- Guest access: requiresAuth false on read endpoints
- Location fix: show place names instead of lat/lng coordinates
- Version 1.6.1+17

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sicherhaven
2026-03-21 13:28:19 +05:30
parent 9dd78be03e
commit bc6fde1b90
21 changed files with 2938 additions and 1285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

536
lib/screens/profile_screen.dart
View File

@@ -12,6 +12,7 @@ import 'learn_more_screen.dart';
import 'settings_screen.dart';
import '../core/app_decoration.dart';
import '../core/constants.dart';
import '../widgets/landscape_section_header.dart';
class ProfileScreen extends StatefulWidget {
const ProfileScreen({Key? key}) : super(key: key);
@@ -1013,6 +1014,534 @@ class _ProfileScreenState extends State<ProfileScreen>
);
}
// ═══════════════════════════════════════════════
// LANDSCAPE LAYOUT
// ═══════════════════════════════════════════════
Widget _buildLandscapeLeftPanel(BuildContext context) {
final theme = Theme.of(context);
return SafeArea(
child: SingleChildScrollView(
physics: const BouncingScrollPhysics(),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Top bar row — title + settings
Padding(
padding: const EdgeInsets.fromLTRB(20, 20, 20, 0),
child: Row(
children: [
const Text(
'Profile',
style: TextStyle(color: Colors.white, fontSize: 22, fontWeight: FontWeight.w700),
),
const Spacer(),
GestureDetector(
onTap: () => Navigator.of(context).push(MaterialPageRoute(builder: (_) => const SettingsScreen())),
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(color: Colors.white24, borderRadius: BorderRadius.circular(10)),
child: const Icon(Icons.settings, color: Colors.white),
),
),
],
),
),
const SizedBox(height: 20),
// Avatar + name section
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
children: [
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 3),
boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.15), blurRadius: 8, offset: const Offset(0, 2))],
),
child: _buildProfileAvatar(size: 64),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
_username.isNotEmpty ? _username : 'Guest User',
style: const TextStyle(color: Colors.white, fontSize: 17, fontWeight: FontWeight.w700),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 2),
Text(
_email,
style: const TextStyle(color: Colors.white70, fontSize: 13),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
),
],
),
),
const SizedBox(height: 20),
// EXP Bar
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: _buildExpBar(),
),
const SizedBox(height: 20),
// Stats row
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Container(
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
borderRadius: BorderRadius.circular(14),
),
padding: const EdgeInsets.symmetric(vertical: 16),
child: _buildLandscapeStats(context, textColor: Colors.white),
),
),
const SizedBox(height: 20),
// Edit profile button
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: OutlinedButton.icon(
onPressed: _openEditDialog,
icon: const Icon(Icons.edit, size: 16, color: Colors.white),
label: const Text('Edit Profile', style: TextStyle(color: Colors.white)),
style: OutlinedButton.styleFrom(
side: const BorderSide(color: Colors.white38),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
padding: const EdgeInsets.symmetric(vertical: 12),
),
),
),
const SizedBox(height: 24),
],
),
),
);
}
Widget _buildLandscapeStats(BuildContext context, {Color? textColor}) {
final color = textColor ?? Theme.of(context).textTheme.bodyLarge?.color;
final hintColor = textColor?.withOpacity(0.6) ?? Theme.of(context).hintColor;
String fmt(int v) => v >= 1000 ? '${(v / 1000).toStringAsFixed(1)}K' : '$v';
return AnimatedBuilder(
animation: _animController,
builder: (_, __) => Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_landscapeStatItem(fmt(_animatedLikes), 'Likes', color, hintColor),
_landscapeStatDivider(),
_landscapeStatItem(fmt(_animatedPosts), 'Posts', color, hintColor),
_landscapeStatDivider(),
_landscapeStatItem(fmt(_animatedViews), 'Views', color, hintColor),
],
),
);
}
Widget _landscapeStatItem(String value, String label, Color? valueColor, Color? labelColor) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(value, style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700, color: valueColor)),
const SizedBox(height: 2),
Text(label, style: TextStyle(fontSize: 12, color: labelColor, fontWeight: FontWeight.w400)),
],
);
}
Widget _landscapeStatDivider() => Container(width: 1, height: 36, color: Colors.white24);
Widget _buildLandscapeRightPanel(BuildContext context) {
final theme = Theme.of(context);
Widget _eventList(List<EventModel> events, {bool faded = false}) {
if (_loadingEvents) {
return const Center(child: CircularProgressIndicator());
}
if (events.isEmpty) {
return Center(
child: Padding(
padding: const EdgeInsets.all(32),
child: Text('No events', style: theme.textTheme.bodyMedium?.copyWith(color: theme.hintColor)),
),
);
}
return ListView.builder(
physics: const BouncingScrollPhysics(),
padding: const EdgeInsets.fromLTRB(18, 8, 18, 32),
itemCount: events.length,
itemBuilder: (ctx, i) => _eventListTileFromModel(events[i], faded: faded),
);
}
return SafeArea(
child: DefaultTabController(
length: 3,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const LandscapeSectionHeader(title: 'My Events'),
// Tab bar
Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 8),
child: Container(
decoration: BoxDecoration(
color: theme.dividerColor.withOpacity(0.5),
borderRadius: BorderRadius.circular(10),
),
child: TabBar(
labelColor: Colors.white,
unselectedLabelColor: theme.hintColor,
indicator: BoxDecoration(
color: theme.colorScheme.primary,
borderRadius: BorderRadius.circular(10),
),
labelStyle: const TextStyle(fontWeight: FontWeight.w600, fontSize: 13),
tabs: const [
Tab(text: 'Ongoing'),
Tab(text: 'Upcoming'),
Tab(text: 'Past'),
],
),
),
),
Expanded(
child: TabBarView(
children: [
_eventList(_ongoingEvents),
_eventList(_upcomingEvents),
_eventList(_pastEvents, faded: true),
],
),
),
],
),
),
);
}
// ═══════════════════════════════════════════════
// DESKTOP LAYOUT (Figma: full-width banner + 3-col grids)
// ═══════════════════════════════════════════════
Widget _buildDesktopLayout(BuildContext context, ThemeData theme) {
return Scaffold(
backgroundColor: theme.scaffoldBackgroundColor,
body: SingleChildScrollView(
physics: const BouncingScrollPhysics(),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Full-width profile header + card (reuse existing widgets)
Stack(
children: [
_buildGradientHeader(context, 200),
Padding(
padding: const EdgeInsets.only(top: 130),
child: _buildProfileCard(context),
),
],
),
const SizedBox(height: 24),
// Ongoing Events (only if non-empty)
if (_ongoingEvents.isNotEmpty)
_buildDesktopEventSection(
context,
title: 'Ongoing Events',
events: _ongoingEvents,
faded: false,
),
// Upcoming Events
_buildDesktopEventSection(
context,
title: 'Upcoming Events',
events: _upcomingEvents,
faded: false,
emptyMessage: 'No upcoming events',
),
// Past Events
_buildDesktopEventSection(
context,
title: 'Past Events',
events: _pastEvents,
faded: true,
emptyMessage: 'No past events',
),
const SizedBox(height: 32),
],
),
),
);
}
/// Section heading row ("Title" + "View All >") followed by a 3-column grid.
Widget _buildDesktopEventSection(
BuildContext context, {
required String title,
required List<EventModel> events,
bool faded = false,
String? emptyMessage,
}) {
final theme = Theme.of(context);
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Heading row
Row(
children: [
Text(
title,
style: theme.textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.w700,
fontSize: 20,
),
),
const Spacer(),
if (events.isNotEmpty)
TextButton(
onPressed: () {
// View all — no-op for now; could navigate to a full list
},
child: Text(
'View All >',
style: TextStyle(
color: theme.colorScheme.primary,
fontWeight: FontWeight.w600,
fontSize: 14,
),
),
),
],
),
const SizedBox(height: 12),
// Content
if (_loadingEvents)
const Center(child: CircularProgressIndicator())
else if (events.isEmpty)
Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Text(
emptyMessage ?? 'No events',
style: theme.textTheme.bodyMedium?.copyWith(color: theme.hintColor),
),
)
else
GridView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
childAspectRatio: 0.82,
),
itemCount: events.length,
itemBuilder: (ctx, i) =>
_buildDesktopEventGridCard(events[i], faded: faded),
),
const SizedBox(height: 24),
],
),
);
}
/// A single event card for the desktop grid: image on top, title, date (blue dot), venue (green dot).
Widget _buildDesktopEventGridCard(EventModel ev, {bool faded = false}) {
final theme = Theme.of(context);
final title = ev.title ?? ev.name ?? '';
final dateLabel =
(ev.startDate != null && ev.endDate != null && ev.startDate == ev.endDate)
? ev.startDate!
: ((ev.startDate != null && ev.endDate != null)
? '${ev.startDate} - ${ev.endDate}'
: (ev.startDate ?? ''));
final location = ev.place ?? '';
final imageUrl = (ev.thumbImg != null && ev.thumbImg!.isNotEmpty)
? ev.thumbImg!
: (ev.images.isNotEmpty ? ev.images.first.image : null);
final titleColor = faded ? theme.hintColor : (theme.textTheme.bodyLarge?.color);
final subtitleColor = faded
? theme.hintColor.withValues(alpha: 0.7)
: theme.hintColor;
return GestureDetector(
onTap: () {
if (ev.id != null) {
Navigator.of(context).push(
MaterialPageRoute(builder: (_) => LearnMoreScreen(eventId: ev.id)),
);
}
},
child: Container(
decoration: BoxDecoration(
color: theme.cardColor,
borderRadius: BorderRadius.circular(14),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.06),
blurRadius: 10,
offset: const Offset(0, 3),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Image
Expanded(
flex: 3,
child: ClipRRect(
borderRadius: const BorderRadius.vertical(top: Radius.circular(14)),
child: _buildCardImage(imageUrl, theme),
),
),
// Text content
Expanded(
flex: 2,
child: Padding(
padding: const EdgeInsets.fromLTRB(12, 10, 12, 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Title
Text(
title,
style: theme.textTheme.titleSmall?.copyWith(
fontWeight: FontWeight.w700,
color: titleColor,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
const Spacer(),
// Date row with blue dot
Row(
children: [
Container(
width: 8,
height: 8,
decoration: const BoxDecoration(
color: Color(0xFF3B82F6),
shape: BoxShape.circle,
),
),
const SizedBox(width: 8),
Expanded(
child: Text(
dateLabel,
style: theme.textTheme.bodySmall?.copyWith(color: subtitleColor),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
const SizedBox(height: 4),
// Venue row with green dot
Row(
children: [
Container(
width: 8,
height: 8,
decoration: const BoxDecoration(
color: Color(0xFF22C55E),
shape: BoxShape.circle,
),
),
const SizedBox(width: 8),
Expanded(
child: Text(
location,
style: theme.textTheme.bodySmall?.copyWith(color: subtitleColor),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
],
),
),
),
],
),
),
);
}
/// Helper to build the image widget for a desktop grid card.
Widget _buildCardImage(String? imageUrl, ThemeData theme) {
if (imageUrl != null && imageUrl.trim().isNotEmpty) {
if (imageUrl.startsWith('http')) {
return CachedNetworkImage(
imageUrl: imageUrl,
memCacheWidth: 400,
memCacheHeight: 400,
width: double.infinity,
height: double.infinity,
fit: BoxFit.cover,
placeholder: (_, __) => Container(color: theme.dividerColor),
errorWidget: (_, __, ___) => Container(
color: theme.dividerColor,
child: Icon(Icons.event, size: 32, color: theme.hintColor),
),
);
}
if (!kIsWeb) {
final path = imageUrl;
if (path.startsWith('/') || path.contains(Platform.pathSeparator)) {
final file = File(path);
if (file.existsSync()) {
return Image.file(
file,
width: double.infinity,
height: double.infinity,
fit: BoxFit.cover,
errorBuilder: (_, __, ___) => Container(
color: theme.dividerColor,
child: Icon(Icons.event, size: 32, color: theme.hintColor),
),
);
}
}
}
return Image.asset(
imageUrl,
width: double.infinity,
height: double.infinity,
fit: BoxFit.cover,
errorBuilder: (_, __, ___) => Container(
color: theme.dividerColor,
child: Icon(Icons.event, size: 32, color: theme.hintColor),
),
);
}
return Container(
color: theme.dividerColor,
child: Icon(Icons.event, size: 32, color: theme.hintColor),
);
}
// ═══════════════════════════════════════════════
// BUILD
// ═══════════════════════════════════════════════
@@ -1022,6 +1551,7 @@ class _ProfileScreenState extends State<ProfileScreen>
final theme = Theme.of(context);
const double headerHeight = 200.0;
const double cardTopOffset = 130.0;
final width = MediaQuery.of(context).size.width;
Widget sectionTitle(String text) => Padding(
padding: const EdgeInsets.fromLTRB(18, 16, 18, 12),
@@ -1032,6 +1562,12 @@ class _ProfileScreenState extends State<ProfileScreen>
),
);
// ── DESKTOP / LANDSCAPE layout ─────────────────────────────────────────
if (width >= AppConstants.desktopBreakpoint) {
return _buildDesktopLayout(context, theme);
}
// ── MOBILE layout ─────────────────────────────────────────────────────
return Scaffold(
backgroundColor: theme.scaffoldBackgroundColor,
// CustomScrollView: only visible event cards are built — no full-tree Column renders