947 lines
35 KiB
Dart
947 lines
35 KiB
Dart
|
// lib/screens/home_screen.dart
|
||
|
|
import 'dart:async';
|
||
|
|
import 'dart:ui';
|
||
|
|
import 'package:flutter/material.dart';
|
||
|
|
import 'package:shared_preferences/shared_preferences.dart';
|
||
|
|
|
||
|
|
import '../features/events/models/event_models.dart';
|
||
|
|
import '../features/events/services/events_service.dart';
|
||
|
|
import 'calendar_screen.dart';
|
||
|
|
import 'profile_screen.dart';
|
||
|
|
import 'contribute_screen.dart';
|
||
|
|
import 'learn_more_screen.dart';
|
||
|
|
import 'search_screen.dart';
|
||
|
|
import '../core/app_decoration.dart';
|
||
|
|
|
||
|
|
class HomeScreen extends StatefulWidget {
|
||
|
|
const HomeScreen({Key? key}) : super(key: key);
|
||
|
|
@override
|
||
|
|
_HomeScreenState createState() => _HomeScreenState();
|
||
|
|
}
|
||
|
|
|
||
|
|
/// Main screen that hosts 4 tabs in an IndexedStack (Home, Calendar, Contribute, Profile).
|
||
|
|
class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateMixin {
|
||
|
|
int _selectedIndex = 0;
|
||
|
|
String _username = '';
|
||
|
|
String _location = '';
|
||
|
|
String _pincode = 'all';
|
||
|
|
|
||
|
|
final EventsService _eventsService = EventsService();
|
||
|
|
|
||
|
|
// backend-driven
|
||
|
|
List<EventModel> _events = [];
|
||
|
|
List<EventTypeModel> _types = [];
|
||
|
|
int _selectedTypeId = -1; // -1 == All
|
||
|
|
|
||
|
|
bool _loading = true;
|
||
|
|
|
||
|
|
// Hero carousel
|
||
|
|
final PageController _heroPageController = PageController();
|
||
|
|
int _heroCurrentPage = 0;
|
||
|
|
Timer? _autoScrollTimer;
|
||
|
|
|
||
|
|
@override
|
||
|
|
void initState() {
|
||
|
|
super.initState();
|
||
|
|
_loadUserDataAndEvents();
|
||
|
|
_startAutoScroll();
|
||
|
|
}
|
||
|
|
|
||
|
|
@override
|
||
|
|
void dispose() {
|
||
|
|
_autoScrollTimer?.cancel();
|
||
|
|
_heroPageController.dispose();
|
||
|
|
super.dispose();
|
||
|
|
}
|
||
|
|
|
||
|
|
void _startAutoScroll() {
|
||
|
|
_autoScrollTimer?.cancel();
|
||
|
|
_autoScrollTimer = Timer.periodic(const Duration(seconds: 3), (timer) {
|
||
|
|
if (_heroEvents.isEmpty) return;
|
||
|
|
final nextPage = (_heroCurrentPage + 1) % _heroEvents.length;
|
||
|
|
if (_heroPageController.hasClients) {
|
||
|
|
_heroPageController.animateToPage(
|
||
|
|
nextPage,
|
||
|
|
duration: const Duration(milliseconds: 500),
|
||
|
|
curve: Curves.easeInOut,
|
||
|
|
);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
Future<void> _loadUserDataAndEvents() async {
|
||
|
|
setState(() => _loading = true);
|
||
|
|
final prefs = await SharedPreferences.getInstance();
|
||
|
|
_username = prefs.getString('display_name') ?? prefs.getString('username') ?? '';
|
||
|
|
_location = prefs.getString('location') ?? 'Whitefield, Bengaluru';
|
||
|
|
_pincode = prefs.getString('pincode') ?? 'all';
|
||
|
|
|
||
|
|
try {
|
||
|
|
final types = await _events_service_getEventTypesSafe();
|
||
|
|
final events = await _events_service_getEventsSafe(_pincode);
|
||
|
|
if (mounted) {
|
||
|
|
setState(() {
|
||
|
|
_types = types;
|
||
|
|
_events = events;
|
||
|
|
_selectedTypeId = -1;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
} catch (e) {
|
||
|
|
if (mounted) {
|
||
|
|
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(e.toString())));
|
||
|
|
}
|
||
|
|
} finally {
|
||
|
|
if (mounted) setState(() => _loading = false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Future<List<EventTypeModel>> _events_service_getEventTypesSafe() async {
|
||
|
|
try {
|
||
|
|
return await _eventsService.getEventTypes();
|
||
|
|
} catch (_) {
|
||
|
|
return <EventTypeModel>[];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Future<List<EventModel>> _events_service_getEventsSafe(String pincode) async {
|
||
|
|
try {
|
||
|
|
return await _eventsService.getEventsByPincode(pincode);
|
||
|
|
} catch (_) {
|
||
|
|
return <EventModel>[];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Future<void> _refresh() async {
|
||
|
|
await _loadUserDataAndEvents();
|
||
|
|
}
|
||
|
|
|
||
|
|
void _bookEventAtIndex(int index) {
|
||
|
|
if (index >= 0 && index < _events.length) {
|
||
|
|
setState(() => _events.removeAt(index));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Widget _categoryChip({
|
||
|
|
required String label,
|
||
|
|
required bool selected,
|
||
|
|
required VoidCallback onTap,
|
||
|
|
IconData? icon,
|
||
|
|
}) {
|
||
|
|
final theme = Theme.of(context);
|
||
|
|
return InkWell(
|
||
|
|
borderRadius: BorderRadius.circular(20),
|
||
|
|
onTap: onTap,
|
||
|
|
child: Container(
|
||
|
|
height: 40,
|
||
|
|
alignment: Alignment.center,
|
||
|
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||
|
|
decoration: BoxDecoration(
|
||
|
|
color: selected ? theme.colorScheme.primary : theme.cardColor,
|
||
|
|
borderRadius: BorderRadius.circular(20),
|
||
|
|
border: Border.all(
|
||
|
|
color: selected ? theme.colorScheme.primary : theme.dividerColor,
|
||
|
|
width: 1,
|
||
|
|
),
|
||
|
|
boxShadow: selected
|
||
|
|
? [
|
||
|
|
BoxShadow(
|
||
|
|
color: theme.colorScheme.primary.withOpacity(0.3),
|
||
|
|
blurRadius: 8,
|
||
|
|
offset: const Offset(0, 4),
|
||
|
|
)
|
||
|
|
]
|
||
|
|
: [],
|
||
|
|
),
|
||
|
|
child: Row(
|
||
|
|
mainAxisSize: MainAxisSize.min,
|
||
|
|
children: [
|
||
|
|
if (icon != null) ...[
|
||
|
|
Icon(icon, size: 16, color: selected ? Colors.white : theme.colorScheme.primary),
|
||
|
|
const SizedBox(width: 6),
|
||
|
|
],
|
||
|
|
Text(
|
||
|
|
label,
|
||
|
|
style: TextStyle(
|
||
|
|
fontSize: 14,
|
||
|
|
fontWeight: FontWeight.w600,
|
||
|
|
color: selected ? Colors.white : theme.textTheme.bodyLarge?.color,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
Future<void> _openLocationSearch() async {
|
||
|
|
final selected = await Navigator.of(context).push(PageRouteBuilder(
|
||
|
|
opaque: false,
|
||
|
|
pageBuilder: (context, animation, secondaryAnimation) => const SearchScreen(),
|
||
|
|
transitionsBuilder: (context, animation, secondaryAnimation, child) {
|
||
|
|
return FadeTransition(opacity: animation, child: child);
|
||
|
|
},
|
||
|
|
transitionDuration: const Duration(milliseconds: 220),
|
||
|
|
));
|
||
|
|
|
||
|
|
if (selected != null && selected is String) {
|
||
|
|
final prefs = await SharedPreferences.getInstance();
|
||
|
|
await prefs.setString('location', selected);
|
||
|
|
setState(() {
|
||
|
|
_location = selected;
|
||
|
|
});
|
||
|
|
await _refresh();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
void _openEventSearch() {
|
||
|
|
final theme = Theme.of(context);
|
||
|
|
showModalBottomSheet(
|
||
|
|
context: context,
|
||
|
|
isScrollControlled: true,
|
||
|
|
backgroundColor: Colors.transparent,
|
||
|
|
builder: (ctx) {
|
||
|
|
return DraggableScrollableSheet(
|
||
|
|
expand: false,
|
||
|
|
initialChildSize: 0.6,
|
||
|
|
minChildSize: 0.3,
|
||
|
|
maxChildSize: 0.95,
|
||
|
|
builder: (context, scrollController) {
|
||
|
|
String query = '';
|
||
|
|
List<EventModel> results = List.from(_events);
|
||
|
|
return StatefulBuilder(builder: (context, setModalState) {
|
||
|
|
void _onQueryChanged(String v) {
|
||
|
|
query = v.trim().toLowerCase();
|
||
|
|
final r = _events.where((e) {
|
||
|
|
final title = (e.title ?? e.name ?? '').toLowerCase();
|
||
|
|
return title.contains(query);
|
||
|
|
}).toList();
|
||
|
|
setModalState(() {
|
||
|
|
results = r;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
return Container(
|
||
|
|
decoration: BoxDecoration(
|
||
|
|
color: theme.cardColor,
|
||
|
|
borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
|
||
|
|
),
|
||
|
|
child: SafeArea(
|
||
|
|
top: false,
|
||
|
|
child: SingleChildScrollView(
|
||
|
|
controller: scrollController,
|
||
|
|
padding: const EdgeInsets.fromLTRB(16, 12, 16, 24),
|
||
|
|
child: Column(
|
||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||
|
|
children: [
|
||
|
|
Center(
|
||
|
|
child: Container(
|
||
|
|
width: 48,
|
||
|
|
height: 6,
|
||
|
|
decoration: BoxDecoration(color: theme.dividerColor, borderRadius: BorderRadius.circular(6)),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
const SizedBox(height: 12),
|
||
|
|
Row(
|
||
|
|
children: [
|
||
|
|
Expanded(
|
||
|
|
child: Container(
|
||
|
|
height: 48,
|
||
|
|
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||
|
|
decoration: BoxDecoration(color: theme.cardColor, borderRadius: BorderRadius.circular(12), border: Border.all(color: theme.dividerColor)),
|
||
|
|
child: Row(
|
||
|
|
children: [
|
||
|
|
Icon(Icons.search, color: theme.hintColor),
|
||
|
|
const SizedBox(width: 8),
|
||
|
|
Expanded(
|
||
|
|
child: TextField(
|
||
|
|
style: theme.textTheme.bodyLarge,
|
||
|
|
decoration: InputDecoration(
|
||
|
|
hintText: 'Search events by name',
|
||
|
|
hintStyle: theme.textTheme.bodyMedium?.copyWith(color: theme.hintColor),
|
||
|
|
border: InputBorder.none,
|
||
|
|
),
|
||
|
|
autofocus: true,
|
||
|
|
onChanged: _onQueryChanged,
|
||
|
|
textInputAction: TextInputAction.search,
|
||
|
|
onSubmitted: (v) => _onQueryChanged(v),
|
||
|
|
),
|
||
|
|
)
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
const SizedBox(width: 8),
|
||
|
|
IconButton(
|
||
|
|
icon: Icon(Icons.close, color: theme.iconTheme.color),
|
||
|
|
onPressed: () => Navigator.of(context).pop(),
|
||
|
|
)
|
||
|
|
],
|
||
|
|
),
|
||
|
|
const SizedBox(height: 12),
|
||
|
|
if (_loading)
|
||
|
|
Center(child: CircularProgressIndicator(color: theme.colorScheme.primary))
|
||
|
|
else if (results.isEmpty)
|
||
|
|
Padding(
|
||
|
|
padding: const EdgeInsets.symmetric(vertical: 24),
|
||
|
|
child: Center(child: Text(query.isEmpty ? 'Type to search events' : 'No events found', style: theme.textTheme.bodyMedium?.copyWith(color: theme.hintColor))),
|
||
|
|
)
|
||
|
|
else
|
||
|
|
ListView.separated(
|
||
|
|
shrinkWrap: true,
|
||
|
|
physics: const NeverScrollableScrollPhysics(),
|
||
|
|
itemBuilder: (ctx, idx) {
|
||
|
|
final ev = results[idx];
|
||
|
|
final img = (ev.thumbImg != null && ev.thumbImg!.isNotEmpty) ? ev.thumbImg! : (ev.images.isNotEmpty ? ev.images.first.image : null);
|
||
|
|
final title = ev.title ?? ev.name ?? '';
|
||
|
|
final subtitle = ev.startDate ?? '';
|
||
|
|
return ListTile(
|
||
|
|
contentPadding: const EdgeInsets.symmetric(horizontal: 0, vertical: 8),
|
||
|
|
leading: img != null && img.isNotEmpty
|
||
|
|
? ClipRRect(borderRadius: BorderRadius.circular(8), child: Image.network(img, width: 56, height: 56, fit: BoxFit.cover))
|
||
|
|
: Container(width: 56, height: 56, decoration: BoxDecoration(color: theme.dividerColor, borderRadius: BorderRadius.circular(8)), child: Icon(Icons.event, color: theme.hintColor)),
|
||
|
|
title: Text(title, maxLines: 1, overflow: TextOverflow.ellipsis, style: theme.textTheme.bodyLarge),
|
||
|
|
subtitle: Text(subtitle, maxLines: 1, overflow: TextOverflow.ellipsis, style: theme.textTheme.bodyMedium?.copyWith(color: theme.hintColor)),
|
||
|
|
onTap: () {
|
||
|
|
Navigator.of(context).pop();
|
||
|
|
if (ev.id != null) {
|
||
|
|
Navigator.of(context).push(MaterialPageRoute(builder: (_) => LearnMoreScreen(eventId: ev.id)));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
);
|
||
|
|
},
|
||
|
|
separatorBuilder: (_, __) => Divider(color: theme.dividerColor),
|
||
|
|
itemCount: results.length,
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
);
|
||
|
|
},
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
@override
|
||
|
|
Widget build(BuildContext context) {
|
||
|
|
final theme = Theme.of(context);
|
||
|
|
|
||
|
|
return Scaffold(
|
||
|
|
backgroundColor: theme.scaffoldBackgroundColor,
|
||
|
|
body: Stack(
|
||
|
|
children: [
|
||
|
|
// IndexedStack keeps each tab alive and preserves state.
|
||
|
|
IndexedStack(
|
||
|
|
index: _selectedIndex,
|
||
|
|
children: [
|
||
|
|
_buildHomeContent(), // index 0
|
||
|
|
const CalendarScreen(), // index 1
|
||
|
|
const ContributeScreen(), // index 2 (full page, scrollable)
|
||
|
|
const ProfileScreen(), // index 3
|
||
|
|
],
|
||
|
|
),
|
||
|
|
|
||
|
|
// Floating bottom navigation (always visible)
|
||
|
|
Positioned(
|
||
|
|
left: 16,
|
||
|
|
right: 16,
|
||
|
|
bottom: 16,
|
||
|
|
child: _buildFloatingBottomNav(),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
Widget _buildFloatingBottomNav() {
|
||
|
|
final theme = Theme.of(context);
|
||
|
|
return Container(
|
||
|
|
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
|
||
|
|
decoration: BoxDecoration(
|
||
|
|
color: theme.cardColor,
|
||
|
|
borderRadius: BorderRadius.circular(20),
|
||
|
|
boxShadow: [BoxShadow(color: theme.shadowColor.withOpacity(0.06), blurRadius: 12)],
|
||
|
|
),
|
||
|
|
child: Row(
|
||
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||
|
|
children: [
|
||
|
|
_bottomNavItem(0, Icons.home, 'Home'),
|
||
|
|
_bottomNavItem(1, Icons.calendar_today, 'Calendar'),
|
||
|
|
_bottomNavItem(2, Icons.volunteer_activism, 'Contribute'),
|
||
|
|
_bottomNavItem(3, Icons.person, 'Profile'),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
Widget _bottomNavItem(int index, IconData icon, String label) {
|
||
|
|
final theme = Theme.of(context);
|
||
|
|
bool active = _selectedIndex == index;
|
||
|
|
return GestureDetector(
|
||
|
|
onTap: () {
|
||
|
|
setState(() {
|
||
|
|
_selectedIndex = index;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
child: Column(mainAxisSize: MainAxisSize.min, children: [
|
||
|
|
Container(
|
||
|
|
padding: const EdgeInsets.all(8),
|
||
|
|
decoration: BoxDecoration(
|
||
|
|
color: active ? theme.colorScheme.primary.withOpacity(0.08) : Colors.transparent,
|
||
|
|
shape: BoxShape.circle,
|
||
|
|
),
|
||
|
|
child: Icon(icon, color: active ? theme.colorScheme.primary : theme.iconTheme.color),
|
||
|
|
),
|
||
|
|
const SizedBox(height: 4),
|
||
|
|
Text(label, style: theme.textTheme.bodySmall?.copyWith(color: active ? theme.colorScheme.primary : theme.iconTheme.color, fontSize: 12)),
|
||
|
|
]),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Get hero events (first 4 events for the carousel)
|
||
|
|
List<EventModel> get _heroEvents => _events.take(4).toList();
|
||
|
|
|
||
|
|
Widget _buildHomeContent() {
|
||
|
|
final theme = Theme.of(context);
|
||
|
|
|
||
|
|
// Get current hero event image for full-screen blurred background
|
||
|
|
String? currentBgImage;
|
||
|
|
if (_heroEvents.isNotEmpty && _heroCurrentPage < _heroEvents.length) {
|
||
|
|
final event = _heroEvents[_heroCurrentPage];
|
||
|
|
if (event.thumbImg != null && event.thumbImg!.isNotEmpty) {
|
||
|
|
currentBgImage = event.thumbImg;
|
||
|
|
} else if (event.images.isNotEmpty && event.images.first.image.isNotEmpty) {
|
||
|
|
currentBgImage = event.images.first.image;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return Stack(
|
||
|
|
children: [
|
||
|
|
// Full-screen blurred background of current event image OR the AppDecoration blue gradient if no image
|
||
|
|
Positioned.fill(
|
||
|
|
child: currentBgImage != null
|
||
|
|
? Image.network(
|
||
|
|
currentBgImage,
|
||
|
|
fit: BoxFit.cover,
|
||
|
|
errorBuilder: (context, error, stackTrace) => Container(decoration: AppDecoration.blueGradient),
|
||
|
|
)
|
||
|
|
: Container(
|
||
|
|
decoration: AppDecoration.blueGradient,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
|
||
|
|
// Blur overlay on background (applies both when an image is present and when using the blue gradient)
|
||
|
|
Positioned.fill(
|
||
|
|
child: BackdropFilter(
|
||
|
|
filter: ImageFilter.blur(sigmaX: 40, sigmaY: 40),
|
||
|
|
child: Container(
|
||
|
|
color: Colors.black.withOpacity(0.15),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
|
||
|
|
// Hero section with cards
|
||
|
|
_buildHeroSection(),
|
||
|
|
|
||
|
|
// Draggable bottom sheet
|
||
|
|
DraggableScrollableSheet(
|
||
|
|
initialChildSize: 0.28,
|
||
|
|
minChildSize: 0.22,
|
||
|
|
maxChildSize: 0.92,
|
||
|
|
builder: (context, scrollController) {
|
||
|
|
return Container(
|
||
|
|
decoration: BoxDecoration(
|
||
|
|
color: theme.scaffoldBackgroundColor,
|
||
|
|
borderRadius: const BorderRadius.vertical(top: Radius.circular(28)),
|
||
|
|
boxShadow: [
|
||
|
|
BoxShadow(
|
||
|
|
color: Colors.black.withOpacity(0.15),
|
||
|
|
blurRadius: 20,
|
||
|
|
offset: const Offset(0, -5),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
child: _buildSheetContent(scrollController),
|
||
|
|
);
|
||
|
|
},
|
||
|
|
),
|
||
|
|
],
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
Widget _buildHeroSection() {
|
||
|
|
final theme = Theme.of(context);
|
||
|
|
|
||
|
|
// 0.5 cm gap approximation in logical pixels (approx. 32)
|
||
|
|
const double gapBetweenLocationAndHero = 32.0;
|
||
|
|
|
||
|
|
return SafeArea(
|
||
|
|
bottom: false,
|
||
|
|
child: Column(
|
||
|
|
mainAxisSize: MainAxisSize.min,
|
||
|
|
children: [
|
||
|
|
// Top bar with location and search
|
||
|
|
Padding(
|
||
|
|
padding: const EdgeInsets.fromLTRB(16, 12, 16, 0),
|
||
|
|
child: Row(
|
||
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||
|
|
children: [
|
||
|
|
// Location pill
|
||
|
|
GestureDetector(
|
||
|
|
onTap: _openLocationSearch,
|
||
|
|
child: Container(
|
||
|
|
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
|
||
|
|
decoration: BoxDecoration(
|
||
|
|
color: Colors.white.withOpacity(0.2),
|
||
|
|
borderRadius: BorderRadius.circular(25),
|
||
|
|
border: Border.all(color: Colors.white.withOpacity(0.3)),
|
||
|
|
),
|
||
|
|
child: Row(
|
||
|
|
mainAxisSize: MainAxisSize.min,
|
||
|
|
children: [
|
||
|
|
const Icon(Icons.location_on_outlined, color: Colors.white, size: 18),
|
||
|
|
const SizedBox(width: 6),
|
||
|
|
Text(
|
||
|
|
_location.length > 20 ? '${_location.substring(0, 20)}...' : _location,
|
||
|
|
style: const TextStyle(color: Colors.white, fontSize: 14, fontWeight: FontWeight.w500),
|
||
|
|
),
|
||
|
|
const SizedBox(width: 4),
|
||
|
|
const Icon(Icons.keyboard_arrow_down, color: Colors.white, size: 18),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
// Search button
|
||
|
|
GestureDetector(
|
||
|
|
onTap: _openEventSearch,
|
||
|
|
child: Container(
|
||
|
|
width: 48,
|
||
|
|
height: 48,
|
||
|
|
decoration: BoxDecoration(
|
||
|
|
color: Colors.white.withOpacity(0.2),
|
||
|
|
shape: BoxShape.circle,
|
||
|
|
border: Border.all(color: Colors.white.withOpacity(0.3)),
|
||
|
|
),
|
||
|
|
child: const Icon(Icons.search, color: Colors.white, size: 24),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
|
||
|
|
// 0.5 cm gap (approx. 32 logical pixels)
|
||
|
|
const SizedBox(height: gapBetweenLocationAndHero),
|
||
|
|
|
||
|
|
// Hero image carousel (PageView) and fixed indicators under it.
|
||
|
|
_heroEvents.isEmpty
|
||
|
|
? SizedBox(
|
||
|
|
height: 360,
|
||
|
|
child: Center(
|
||
|
|
child: _loading ? const CircularProgressIndicator(color: Colors.white) : const Text('No events available', style: TextStyle(color: Colors.white70)),
|
||
|
|
),
|
||
|
|
)
|
||
|
|
: Column(
|
||
|
|
children: [
|
||
|
|
// PageView with only the images/titles
|
||
|
|
SizedBox(
|
||
|
|
height: 360,
|
||
|
|
child: PageView.builder(
|
||
|
|
controller: _heroPageController,
|
||
|
|
onPageChanged: (page) {
|
||
|
|
setState(() => _heroCurrentPage = page);
|
||
|
|
},
|
||
|
|
itemCount: _heroEvents.length,
|
||
|
|
itemBuilder: (context, index) {
|
||
|
|
return _buildHeroEventImage(_heroEvents[index]);
|
||
|
|
},
|
||
|
|
),
|
||
|
|
),
|
||
|
|
|
||
|
|
// fixed indicators (outside PageView)
|
||
|
|
const SizedBox(height: 12),
|
||
|
|
SizedBox(
|
||
|
|
height: 28,
|
||
|
|
child: Center(
|
||
|
|
child: AnimatedBuilder(
|
||
|
|
animation: _heroPageController,
|
||
|
|
builder: (context, child) {
|
||
|
|
double page = _heroCurrentPage.toDouble();
|
||
|
|
if (_heroPageController.hasClients) {
|
||
|
|
page = _heroPageController.page ?? page;
|
||
|
|
}
|
||
|
|
return Row(
|
||
|
|
mainAxisSize: MainAxisSize.min,
|
||
|
|
children: List.generate(_heroEvents.length, (i) {
|
||
|
|
final dx = (i - page).abs();
|
||
|
|
final t = 1.0 - dx.clamp(0.0, 1.0); // 1 when focused, 0 when far
|
||
|
|
final width = 10 + (36 - 10) * t; // interpolate between 10 and 36
|
||
|
|
final opacity = 0.35 + (0.65 * t);
|
||
|
|
return GestureDetector(
|
||
|
|
onTap: () {
|
||
|
|
if (_heroPageController.hasClients) {
|
||
|
|
_heroPageController.animateToPage(
|
||
|
|
i,
|
||
|
|
duration: const Duration(milliseconds: 300),
|
||
|
|
curve: Curves.easeInOut,
|
||
|
|
);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
child: Container(
|
||
|
|
margin: const EdgeInsets.symmetric(horizontal: 8),
|
||
|
|
width: width,
|
||
|
|
height: 10,
|
||
|
|
decoration: BoxDecoration(
|
||
|
|
color: Colors.white.withOpacity(opacity),
|
||
|
|
borderRadius: BorderRadius.circular(6),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}),
|
||
|
|
);
|
||
|
|
},
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
|
||
|
|
// spacing so the sheet handle doesn't overlap the indicator
|
||
|
|
const SizedBox(height: 8),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
/// Build a hero image card (image + gradient + title).
|
||
|
|
/// If there's no image, show the AppDecoration blue gradient rounded background
|
||
|
|
/// and a black overlay gradient for contrast.
|
||
|
|
Widget _buildHeroEventImage(EventModel event) {
|
||
|
|
String? img;
|
||
|
|
if (event.thumbImg != null && event.thumbImg!.isNotEmpty) {
|
||
|
|
img = event.thumbImg;
|
||
|
|
} else if (event.images.isNotEmpty && event.images.first.image.isNotEmpty) {
|
||
|
|
img = event.images.first.image;
|
||
|
|
}
|
||
|
|
|
||
|
|
final radius = 24.0;
|
||
|
|
final startDate = event.startDate ?? '';
|
||
|
|
|
||
|
|
return GestureDetector(
|
||
|
|
onTap: () {
|
||
|
|
if (event.id != null) {
|
||
|
|
Navigator.push(context, MaterialPageRoute(builder: (_) => LearnMoreScreen(eventId: event.id)));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
child: Padding(
|
||
|
|
padding: const EdgeInsets.symmetric(horizontal: 24),
|
||
|
|
child: ClipRRect(
|
||
|
|
borderRadius: BorderRadius.circular(radius),
|
||
|
|
child: Stack(
|
||
|
|
fit: StackFit.expand,
|
||
|
|
children: [
|
||
|
|
// If image available show it; otherwise use AppDecoration blue gradient.
|
||
|
|
if (img != null && img.isNotEmpty)
|
||
|
|
Image.network(
|
||
|
|
img,
|
||
|
|
fit: BoxFit.cover,
|
||
|
|
errorBuilder: (context, error, stackTrace) => Container(decoration: AppDecoration.blueGradientRounded(radius)),
|
||
|
|
)
|
||
|
|
else
|
||
|
|
Container(
|
||
|
|
decoration: AppDecoration.blueGradientRounded(radius),
|
||
|
|
),
|
||
|
|
|
||
|
|
// BLACK gradient overlay to darken bottom area for text (stronger to match your reference)
|
||
|
|
Container(
|
||
|
|
decoration: BoxDecoration(
|
||
|
|
gradient: LinearGradient(
|
||
|
|
begin: Alignment.bottomCenter,
|
||
|
|
end: Alignment.topCenter,
|
||
|
|
colors: [
|
||
|
|
Colors.black.withOpacity(0.72), // strong black near bottom for contrast
|
||
|
|
Colors.black.withOpacity(0.38),
|
||
|
|
Colors.black.withOpacity(0.08), // subtle near top
|
||
|
|
],
|
||
|
|
stops: const [0.0, 0.45, 1.0],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
|
||
|
|
// Title and date positioned bottom-left
|
||
|
|
Padding(
|
||
|
|
padding: const EdgeInsets.fromLTRB(20, 20, 20, 18),
|
||
|
|
child: Column(
|
||
|
|
mainAxisAlignment: MainAxisAlignment.end,
|
||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||
|
|
children: [
|
||
|
|
if (startDate.isNotEmpty)
|
||
|
|
Text(
|
||
|
|
startDate,
|
||
|
|
style: TextStyle(
|
||
|
|
color: Colors.white.withOpacity(0.9),
|
||
|
|
fontSize: 14,
|
||
|
|
fontWeight: FontWeight.w600,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
if (startDate.isNotEmpty) const SizedBox(height: 8),
|
||
|
|
Text(
|
||
|
|
event.title ?? event.name ?? '',
|
||
|
|
maxLines: 2,
|
||
|
|
overflow: TextOverflow.ellipsis,
|
||
|
|
style: const TextStyle(
|
||
|
|
color: Colors.white,
|
||
|
|
fontSize: 22,
|
||
|
|
fontWeight: FontWeight.bold,
|
||
|
|
height: 1.1,
|
||
|
|
shadows: [
|
||
|
|
Shadow(color: Colors.black38, blurRadius: 6, offset: Offset(0, 2)),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
Widget _buildSheetContent(ScrollController scrollController) {
|
||
|
|
final theme = Theme.of(context);
|
||
|
|
|
||
|
|
return ListView(
|
||
|
|
controller: scrollController,
|
||
|
|
padding: EdgeInsets.zero,
|
||
|
|
children: [
|
||
|
|
// Drag handle and "see more" text
|
||
|
|
Padding(
|
||
|
|
padding: const EdgeInsets.only(top: 12, bottom: 8),
|
||
|
|
child: Column(
|
||
|
|
children: [
|
||
|
|
// Arrow up icon
|
||
|
|
Icon(
|
||
|
|
Icons.keyboard_arrow_up,
|
||
|
|
color: theme.hintColor,
|
||
|
|
size: 28,
|
||
|
|
),
|
||
|
|
Text(
|
||
|
|
'see more',
|
||
|
|
style: TextStyle(
|
||
|
|
color: theme.hintColor,
|
||
|
|
fontSize: 13,
|
||
|
|
fontWeight: FontWeight.w500,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
|
||
|
|
// "Events Around You" header
|
||
|
|
Padding(
|
||
|
|
padding: const EdgeInsets.fromLTRB(20, 12, 20, 16),
|
||
|
|
child: Row(
|
||
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||
|
|
children: [
|
||
|
|
Text(
|
||
|
|
'Events Around You',
|
||
|
|
style: theme.textTheme.titleLarge?.copyWith(
|
||
|
|
fontWeight: FontWeight.bold,
|
||
|
|
fontSize: 22,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
TextButton(
|
||
|
|
onPressed: () {
|
||
|
|
// View all action
|
||
|
|
},
|
||
|
|
child: Text(
|
||
|
|
'View All',
|
||
|
|
style: TextStyle(
|
||
|
|
color: theme.colorScheme.primary,
|
||
|
|
fontWeight: FontWeight.w600,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
|
||
|
|
// Category chips
|
||
|
|
SizedBox(
|
||
|
|
height: 48,
|
||
|
|
child: ListView(
|
||
|
|
scrollDirection: Axis.horizontal,
|
||
|
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||
|
|
children: [
|
||
|
|
_categoryChip(
|
||
|
|
label: 'All Events',
|
||
|
|
icon: Icons.grid_view_rounded,
|
||
|
|
selected: _selectedTypeId == -1,
|
||
|
|
onTap: () => _onSelectType(-1),
|
||
|
|
),
|
||
|
|
const SizedBox(width: 10),
|
||
|
|
for (final t in _types) ...[
|
||
|
|
_categoryChip(
|
||
|
|
label: t.name,
|
||
|
|
icon: _getIconForType(t.name),
|
||
|
|
selected: _selectedTypeId == t.id,
|
||
|
|
onTap: () => _onSelectType(t.id),
|
||
|
|
),
|
||
|
|
const SizedBox(width: 10),
|
||
|
|
],
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
|
||
|
|
const SizedBox(height: 16),
|
||
|
|
|
||
|
|
// Event cards
|
||
|
|
if (_loading)
|
||
|
|
const Padding(
|
||
|
|
padding: EdgeInsets.all(40),
|
||
|
|
child: Center(child: CircularProgressIndicator()),
|
||
|
|
)
|
||
|
|
else if (_events.isEmpty)
|
||
|
|
Padding(
|
||
|
|
padding: const EdgeInsets.all(40),
|
||
|
|
child: Center(
|
||
|
|
child: Text(
|
||
|
|
'No events found',
|
||
|
|
style: theme.textTheme.bodyLarge?.copyWith(color: theme.hintColor),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
)
|
||
|
|
else
|
||
|
|
Padding(
|
||
|
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||
|
|
child: Column(
|
||
|
|
children: [
|
||
|
|
for (int i = 0; i < _events.length; i++) ...[
|
||
|
|
_buildEventCard(_events[i], i),
|
||
|
|
],
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
|
||
|
|
// Bottom padding for nav bar
|
||
|
|
const SizedBox(height: 100),
|
||
|
|
],
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
IconData _getIconForType(String typeName) {
|
||
|
|
final name = typeName.toLowerCase();
|
||
|
|
if (name.contains('music')) return Icons.music_note;
|
||
|
|
if (name.contains('art') || name.contains('comedy')) return Icons.palette;
|
||
|
|
if (name.contains('festival')) return Icons.celebration;
|
||
|
|
if (name.contains('heritage') || name.contains('history')) return Icons.account_balance;
|
||
|
|
if (name.contains('sport')) return Icons.sports;
|
||
|
|
if (name.contains('food')) return Icons.restaurant;
|
||
|
|
return Icons.event;
|
||
|
|
}
|
||
|
|
|
||
|
|
void _onSelectType(int id) async {
|
||
|
|
setState(() {
|
||
|
|
_selectedTypeId = id;
|
||
|
|
});
|
||
|
|
|
||
|
|
try {
|
||
|
|
final all = await _eventsService.getEventsByPincode(_pincode);
|
||
|
|
final filtered = id == -1 ? all : all.where((e) => e.eventTypeId == id).toList();
|
||
|
|
if (mounted) setState(() => _events = filtered);
|
||
|
|
} catch (e) {
|
||
|
|
if (mounted) ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(e.toString())));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Widget _buildEventCard(EventModel e, int index) {
|
||
|
|
final theme = Theme.of(context);
|
||
|
|
String? img;
|
||
|
|
if (e.thumbImg != null && e.thumbImg!.isNotEmpty) {
|
||
|
|
img = e.thumbImg;
|
||
|
|
} else if (e.images.isNotEmpty && e.images.first.image.isNotEmpty) {
|
||
|
|
img = e.images.first.image;
|
||
|
|
}
|
||
|
|
|
||
|
|
return GestureDetector(
|
||
|
|
onTap: () {
|
||
|
|
if (e.id != null) {
|
||
|
|
Navigator.push(context, MaterialPageRoute(builder: (_) => LearnMoreScreen(eventId: e.id)));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
child: Container(
|
||
|
|
margin: const EdgeInsets.only(bottom: 18),
|
||
|
|
decoration: BoxDecoration(
|
||
|
|
color: theme.cardColor,
|
||
|
|
borderRadius: BorderRadius.circular(16),
|
||
|
|
boxShadow: [
|
||
|
|
BoxShadow(color: theme.shadowColor.withOpacity(0.12), blurRadius: 18, offset: const Offset(0, 8)),
|
||
|
|
BoxShadow(color: theme.shadowColor.withOpacity(0.04), blurRadius: 6, offset: const Offset(0, 2)),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||
|
|
ClipRRect(
|
||
|
|
borderRadius: const BorderRadius.vertical(top: Radius.circular(16)),
|
||
|
|
child: img != null && img.isNotEmpty
|
||
|
|
? Image.network(img, fit: BoxFit.cover, width: double.infinity, height: 160)
|
||
|
|
: Image.asset('assets/images/event1.jpg', fit: BoxFit.cover, width: double.infinity, height: 160),
|
||
|
|
),
|
||
|
|
Padding(
|
||
|
|
padding: const EdgeInsets.fromLTRB(12, 12, 12, 12),
|
||
|
|
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||
|
|
Text(
|
||
|
|
e.title ?? e.name ?? '',
|
||
|
|
maxLines: 2,
|
||
|
|
overflow: TextOverflow.ellipsis,
|
||
|
|
style: theme.textTheme.titleMedium?.copyWith(fontWeight: FontWeight.bold, fontSize: 16),
|
||
|
|
),
|
||
|
|
const SizedBox(height: 8),
|
||
|
|
Row(
|
||
|
|
children: [
|
||
|
|
Icon(Icons.calendar_today, size: 14, color: theme.colorScheme.primary),
|
||
|
|
const SizedBox(width: 6),
|
||
|
|
Flexible(
|
||
|
|
flex: 2,
|
||
|
|
child: Text(
|
||
|
|
'${e.startDate ?? ''}',
|
||
|
|
maxLines: 1,
|
||
|
|
overflow: TextOverflow.ellipsis,
|
||
|
|
style: theme.textTheme.bodySmall?.copyWith(color: theme.textTheme.bodySmall?.color?.withOpacity(0.9), fontSize: 13),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
Padding(
|
||
|
|
padding: const EdgeInsets.symmetric(horizontal: 8.0),
|
||
|
|
child: Text('•', style: TextStyle(color: theme.textTheme.bodySmall?.color?.withOpacity(0.4))),
|
||
|
|
),
|
||
|
|
Icon(Icons.location_on, size: 14, color: theme.colorScheme.primary),
|
||
|
|
const SizedBox(width: 6),
|
||
|
|
Flexible(
|
||
|
|
flex: 3,
|
||
|
|
child: Text(
|
||
|
|
e.place ?? '',
|
||
|
|
maxLines: 1,
|
||
|
|
overflow: TextOverflow.ellipsis,
|
||
|
|
style: theme.textTheme.bodySmall?.copyWith(color: theme.textTheme.bodySmall?.color?.withOpacity(0.9), fontSize: 13),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
]),
|
||
|
|
)
|
||
|
|
]),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
String _getShortEmailLabel() {
|
||
|
|
try {
|
||
|
|
final parts = _username.split('@');
|
||
|
|
if (parts.isNotEmpty && parts[0].isNotEmpty) return parts[0];
|
||
|
|
} catch (_) {}
|
||
|
|
return 'You';
|
||
|
|
}
|
||
|
|
}
|