733 lines
30 KiB
Dart
733 lines
30 KiB
Dart
|
// lib/screens/calendar_screen.dart
|
||
|
|
import 'dart:math' as math;
|
||
|
|
import 'package:flutter/material.dart';
|
||
|
|
import 'package:intl/intl.dart';
|
||
|
|
import '../features/events/services/events_service.dart';
|
||
|
|
import '../features/events/models/event_models.dart';
|
||
|
|
import 'learn_more_screen.dart';
|
||
|
|
import '../core/app_decoration.dart';
|
||
|
|
|
||
|
|
class CalendarScreen extends StatefulWidget {
|
||
|
|
const CalendarScreen({Key? key}) : super(key: key);
|
||
|
|
|
||
|
|
@override
|
||
|
|
State<CalendarScreen> createState() => _CalendarScreenState();
|
||
|
|
}
|
||
|
|
|
||
|
|
class _CalendarScreenState extends State<CalendarScreen> {
|
||
|
|
DateTime visibleMonth = DateTime.now();
|
||
|
|
DateTime selectedDate = DateTime.now();
|
||
|
|
|
||
|
|
final EventsService _service = EventsService();
|
||
|
|
|
||
|
|
bool _loadingMonth = true;
|
||
|
|
bool _loadingDay = false;
|
||
|
|
|
||
|
|
final Set<String> _markedDates = {};
|
||
|
|
final Map<String, int> _dateCounts = {};
|
||
|
|
final Map<String, List<String>> _dateThumbnails = {};
|
||
|
|
|
||
|
|
List<EventModel> _eventsOfDay = [];
|
||
|
|
|
||
|
|
// Scroll controller for the calendar grid
|
||
|
|
final ScrollController _calendarGridController = ScrollController();
|
||
|
|
|
||
|
|
static const List<String> monthNames = [
|
||
|
|
'',
|
||
|
|
'January',
|
||
|
|
'February',
|
||
|
|
'March',
|
||
|
|
'April',
|
||
|
|
'May',
|
||
|
|
'June',
|
||
|
|
'July',
|
||
|
|
'August',
|
||
|
|
'September',
|
||
|
|
'October',
|
||
|
|
'November',
|
||
|
|
'December'
|
||
|
|
];
|
||
|
|
|
||
|
|
@override
|
||
|
|
void initState() {
|
||
|
|
super.initState();
|
||
|
|
_loadMonth(visibleMonth);
|
||
|
|
selectedDate = DateTime.now();
|
||
|
|
WidgetsBinding.instance.addPostFrameCallback((_) => _onSelectDate(_ymKey(selectedDate)));
|
||
|
|
}
|
||
|
|
|
||
|
|
@override
|
||
|
|
void dispose() {
|
||
|
|
_calendarGridController.dispose();
|
||
|
|
super.dispose();
|
||
|
|
}
|
||
|
|
|
||
|
|
Future<void> _loadMonth(DateTime dt) async {
|
||
|
|
setState(() {
|
||
|
|
_loadingMonth = true;
|
||
|
|
_markedDates.clear();
|
||
|
|
_dateCounts.clear();
|
||
|
|
_dateThumbnails.clear();
|
||
|
|
_eventsOfDay = [];
|
||
|
|
});
|
||
|
|
|
||
|
|
final monthName = DateFormat.MMMM().format(dt);
|
||
|
|
final year = dt.year;
|
||
|
|
|
||
|
|
try {
|
||
|
|
final res = await _service.getEventsByMonthYear(monthName, year);
|
||
|
|
final datesRaw = res['dates'];
|
||
|
|
if (datesRaw is List) {
|
||
|
|
for (final d in datesRaw) {
|
||
|
|
if (d is String) _markedDates.add(d);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
final dateEvents = res['date_events'];
|
||
|
|
if (dateEvents is List) {
|
||
|
|
for (final item in dateEvents) {
|
||
|
|
if (item is Map) {
|
||
|
|
final k = item['date_of_event']?.toString();
|
||
|
|
final cnt = item['events_of_date'];
|
||
|
|
if (k != null) {
|
||
|
|
_dateCounts[k] = (cnt is int) ? cnt : int.tryParse(cnt?.toString() ?? '0') ?? 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (_markedDates.isNotEmpty) {
|
||
|
|
await _fetchThumbnailsForDates(_markedDates.toList());
|
||
|
|
}
|
||
|
|
} catch (e) {
|
||
|
|
if (mounted) ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(e.toString())));
|
||
|
|
} finally {
|
||
|
|
if (mounted) setState(() => _loadingMonth = false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Future<void> _fetchThumbnailsForDates(List<String> dates) async {
|
||
|
|
for (final date in dates) {
|
||
|
|
try {
|
||
|
|
final events = await _service.getEventsForDate(date);
|
||
|
|
final thumbs = <String>[];
|
||
|
|
for (final e in events) {
|
||
|
|
String? url;
|
||
|
|
if (e.thumbImg != null && e.thumbImg!.trim().isNotEmpty) {
|
||
|
|
url = e.thumbImg!.trim();
|
||
|
|
} else if (e.images.isNotEmpty && e.images.first.image.trim().isNotEmpty) {
|
||
|
|
url = e.images.first.image.trim();
|
||
|
|
}
|
||
|
|
if (url != null && url.isNotEmpty) thumbs.add(url);
|
||
|
|
if (thumbs.length >= 3) break;
|
||
|
|
}
|
||
|
|
if (thumbs.isNotEmpty) {
|
||
|
|
if (mounted) {
|
||
|
|
setState(() => _dateThumbnails[date] = thumbs);
|
||
|
|
} else {
|
||
|
|
_dateThumbnails[date] = thumbs;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} catch (_) {
|
||
|
|
// ignore per-date errors
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Future<void> _onSelectDate(String yyyyMMdd) async {
|
||
|
|
setState(() {
|
||
|
|
_loadingDay = true;
|
||
|
|
_eventsOfDay = [];
|
||
|
|
final parts = yyyyMMdd.split('-');
|
||
|
|
if (parts.length == 3) {
|
||
|
|
final y = int.tryParse(parts[0]) ?? DateTime.now().year;
|
||
|
|
final m = int.tryParse(parts[1]) ?? DateTime.now().month;
|
||
|
|
final d = int.tryParse(parts[2]) ?? DateTime.now().day;
|
||
|
|
selectedDate = DateTime(y, m, d);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
try {
|
||
|
|
final events = await _service.getEventsForDate(yyyyMMdd);
|
||
|
|
if (mounted) setState(() => _eventsOfDay = events);
|
||
|
|
} catch (e) {
|
||
|
|
if (mounted) ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(e.toString())));
|
||
|
|
} finally {
|
||
|
|
if (mounted) setState(() => _loadingDay = false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
void _prevMonth() {
|
||
|
|
setState(() => visibleMonth = DateTime(visibleMonth.year, visibleMonth.month - 1, 1));
|
||
|
|
_loadMonth(visibleMonth);
|
||
|
|
}
|
||
|
|
|
||
|
|
void _nextMonth() {
|
||
|
|
setState(() => visibleMonth = DateTime(visibleMonth.year, visibleMonth.month + 1, 1));
|
||
|
|
_loadMonth(visibleMonth);
|
||
|
|
}
|
||
|
|
|
||
|
|
int _daysInMonth(DateTime d) {
|
||
|
|
final next = (d.month == 12) ? DateTime(d.year + 1, 1, 1) : DateTime(d.year, d.month + 1, 1);
|
||
|
|
return next.subtract(const Duration(days: 1)).day;
|
||
|
|
}
|
||
|
|
|
||
|
|
int _firstWeekdayOfMonth(DateTime d) {
|
||
|
|
final first = DateTime(d.year, d.month, 1);
|
||
|
|
return first.weekday; // 1=Mon ... 7=Sun
|
||
|
|
}
|
||
|
|
|
||
|
|
String _ymKey(DateTime d) =>
|
||
|
|
'${d.year.toString().padLeft(4, "0")}-${d.month.toString().padLeft(2, "0")}-${d.day.toString().padLeft(2, "0")}';
|
||
|
|
|
||
|
|
// show a premium modal sheet with years 2020..2050 in a 3-column grid, scrollable & draggable
|
||
|
|
Future<void> _showYearPicker(BuildContext context) async {
|
||
|
|
final startYear = 2020;
|
||
|
|
final endYear = 2050;
|
||
|
|
final years = List<int>.generate(endYear - startYear + 1, (i) => startYear + i);
|
||
|
|
|
||
|
|
await showModalBottomSheet(
|
||
|
|
context: context,
|
||
|
|
isScrollControlled: true,
|
||
|
|
backgroundColor: Colors.transparent,
|
||
|
|
builder: (ctx) {
|
||
|
|
final theme = Theme.of(ctx);
|
||
|
|
return DraggableScrollableSheet(
|
||
|
|
initialChildSize: 0.55,
|
||
|
|
minChildSize: 0.32,
|
||
|
|
maxChildSize: 0.95,
|
||
|
|
expand: false,
|
||
|
|
builder: (context, scrollController) {
|
||
|
|
return Container(
|
||
|
|
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 18),
|
||
|
|
padding: const EdgeInsets.all(12),
|
||
|
|
decoration: BoxDecoration(
|
||
|
|
color: theme.cardColor,
|
||
|
|
borderRadius: BorderRadius.circular(16),
|
||
|
|
boxShadow: [BoxShadow(color: Colors.black26, blurRadius: 20, offset: Offset(0, 8))],
|
||
|
|
),
|
||
|
|
child: Column(
|
||
|
|
children: [
|
||
|
|
// header
|
||
|
|
Padding(
|
||
|
|
padding: const EdgeInsets.symmetric(horizontal: 6.0, vertical: 8.0),
|
||
|
|
child: Row(
|
||
|
|
children: [
|
||
|
|
const SizedBox(width: 4),
|
||
|
|
Expanded(child: Text('Select Year', style: theme.textTheme.titleMedium?.copyWith(fontWeight: FontWeight.w700))),
|
||
|
|
IconButton(
|
||
|
|
icon: Icon(Icons.close, color: theme.hintColor),
|
||
|
|
onPressed: () => Navigator.of(ctx).pop(),
|
||
|
|
)
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
const SizedBox(height: 8),
|
||
|
|
// grid (scrollable using the passed scrollController)
|
||
|
|
Expanded(
|
||
|
|
child: GridView.builder(
|
||
|
|
controller: scrollController,
|
||
|
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
|
||
|
|
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
||
|
|
crossAxisCount: 3, // 3 columns -> premium style
|
||
|
|
mainAxisSpacing: 12,
|
||
|
|
crossAxisSpacing: 12,
|
||
|
|
childAspectRatio: 2.4,
|
||
|
|
),
|
||
|
|
itemCount: years.length,
|
||
|
|
itemBuilder: (context, index) {
|
||
|
|
final y = years[index];
|
||
|
|
final isSelected = visibleMonth.year == y;
|
||
|
|
return InkWell(
|
||
|
|
onTap: () {
|
||
|
|
setState(() {
|
||
|
|
visibleMonth = DateTime(y, visibleMonth.month, 1);
|
||
|
|
});
|
||
|
|
_loadMonth(visibleMonth);
|
||
|
|
Navigator.of(ctx).pop();
|
||
|
|
},
|
||
|
|
borderRadius: BorderRadius.circular(10),
|
||
|
|
child: Container(
|
||
|
|
alignment: Alignment.center,
|
||
|
|
decoration: BoxDecoration(
|
||
|
|
color: isSelected ? theme.colorScheme.primary.withOpacity(0.12) : null,
|
||
|
|
borderRadius: BorderRadius.circular(10),
|
||
|
|
border: isSelected ? Border.all(color: theme.colorScheme.primary, width: 1.6) : Border.all(color: Colors.transparent),
|
||
|
|
boxShadow: isSelected ? [BoxShadow(color: theme.colorScheme.primary.withOpacity(0.06), blurRadius: 10, offset: Offset(0, 4))] : null,
|
||
|
|
),
|
||
|
|
child: Text(
|
||
|
|
'$y',
|
||
|
|
style: theme.textTheme.bodyLarge?.copyWith(
|
||
|
|
fontWeight: isSelected ? FontWeight.w700 : FontWeight.w600,
|
||
|
|
color: isSelected ? theme.colorScheme.primary : theme.textTheme.bodyLarge?.color,
|
||
|
|
fontSize: 16,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
},
|
||
|
|
),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
);
|
||
|
|
},
|
||
|
|
);
|
||
|
|
},
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
Widget _buildMonthYearHeader(BuildContext context, Color primaryColor) {
|
||
|
|
final theme = Theme.of(context);
|
||
|
|
return Row(
|
||
|
|
children: [
|
||
|
|
IconButton(icon: Icon(Icons.chevron_left, color: primaryColor), onPressed: _prevMonth, splashRadius: 20),
|
||
|
|
Expanded(
|
||
|
|
child: Center(
|
||
|
|
child: Row(
|
||
|
|
mainAxisSize: MainAxisSize.min,
|
||
|
|
children: [
|
||
|
|
// plain month label (no dropdown)
|
||
|
|
Text(
|
||
|
|
monthNames[visibleMonth.month],
|
||
|
|
style: const TextStyle(fontWeight: FontWeight.w600),
|
||
|
|
),
|
||
|
|
const SizedBox(width: 10),
|
||
|
|
// year "dropdown" replaced with premium modal trigger
|
||
|
|
InkWell(
|
||
|
|
onTap: () => _showYearPicker(context),
|
||
|
|
borderRadius: BorderRadius.circular(6),
|
||
|
|
child: Padding(
|
||
|
|
padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4),
|
||
|
|
child: Row(
|
||
|
|
children: [
|
||
|
|
Text(
|
||
|
|
'${visibleMonth.year}',
|
||
|
|
style: const TextStyle(fontWeight: FontWeight.w600),
|
||
|
|
),
|
||
|
|
const SizedBox(width: 6),
|
||
|
|
Icon(Icons.arrow_drop_down, size: 22, color: theme.textTheme.bodyLarge?.color),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
IconButton(icon: Icon(Icons.chevron_right, color: primaryColor), onPressed: _nextMonth, splashRadius: 20),
|
||
|
|
],
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
/// Calendar card that shows full rows (including overflow prev/next month dates).
|
||
|
|
Widget _calendarCard(BuildContext context) {
|
||
|
|
final theme = Theme.of(context);
|
||
|
|
final primaryColor = theme.colorScheme.primary;
|
||
|
|
final weekdayShorts = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
|
||
|
|
|
||
|
|
// compute rows to guarantee rows * 7 cells
|
||
|
|
final daysInMonth = _daysInMonth(visibleMonth);
|
||
|
|
final firstWeekday = _firstWeekdayOfMonth(visibleMonth);
|
||
|
|
final leadingEmpty = firstWeekday - 1;
|
||
|
|
final totalCells = leadingEmpty + daysInMonth;
|
||
|
|
final rows = (totalCells / 7).ceil();
|
||
|
|
final totalItems = rows * 7;
|
||
|
|
|
||
|
|
// first date shown (may be prev month's date)
|
||
|
|
final firstCellDate = DateTime(visibleMonth.year, visibleMonth.month, 1).subtract(Duration(days: leadingEmpty));
|
||
|
|
|
||
|
|
return Padding(
|
||
|
|
padding: const EdgeInsets.symmetric(horizontal: 20.0),
|
||
|
|
child: Card(
|
||
|
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
|
||
|
|
elevation: 8,
|
||
|
|
child: Padding(
|
||
|
|
padding: const EdgeInsets.symmetric(horizontal: 14.0, vertical: 12.0),
|
||
|
|
child: Column(
|
||
|
|
mainAxisSize: MainAxisSize.min, // tightly wrap grid
|
||
|
|
children: [
|
||
|
|
// month/year header
|
||
|
|
SizedBox(height: 48, child: _buildMonthYearHeader(context, primaryColor)),
|
||
|
|
const SizedBox(height: 6),
|
||
|
|
// weekday labels row
|
||
|
|
SizedBox(
|
||
|
|
height: 22,
|
||
|
|
child: Row(
|
||
|
|
children: List.generate(7, (i) {
|
||
|
|
final isWeekend = (i == 5 || i == 6);
|
||
|
|
return Expanded(
|
||
|
|
child: Center(
|
||
|
|
child: Text(
|
||
|
|
weekdayShorts[i],
|
||
|
|
style: TextStyle(
|
||
|
|
fontSize: 12,
|
||
|
|
fontWeight: FontWeight.w700,
|
||
|
|
color: isWeekend ? Colors.redAccent.withOpacity(0.9) : (Theme.of(context).brightness == Brightness.dark ? Colors.white70 : Colors.black54),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
const SizedBox(height: 8),
|
||
|
|
|
||
|
|
// GRID: shrinkWrap true ensures all rows are rendered
|
||
|
|
GridView.builder(
|
||
|
|
shrinkWrap: true,
|
||
|
|
controller: _calendarGridController,
|
||
|
|
physics: const NeverScrollableScrollPhysics(),
|
||
|
|
padding: EdgeInsets.zero,
|
||
|
|
itemCount: totalItems,
|
||
|
|
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
||
|
|
crossAxisCount: 7,
|
||
|
|
mainAxisSpacing: 8,
|
||
|
|
crossAxisSpacing: 8,
|
||
|
|
childAspectRatio: 1,
|
||
|
|
),
|
||
|
|
itemBuilder: (context, index) {
|
||
|
|
final cellDate = firstCellDate.add(Duration(days: index));
|
||
|
|
final inCurrentMonth = cellDate.month == visibleMonth.month && cellDate.year == visibleMonth.year;
|
||
|
|
final dayIndex = cellDate.day;
|
||
|
|
final key = _ymKey(cellDate);
|
||
|
|
final hasEvents = _markedDates.contains(key);
|
||
|
|
final thumbnails = _dateThumbnails[key] ?? [];
|
||
|
|
final isSelected = selectedDate.year == cellDate.year && selectedDate.month == cellDate.month && selectedDate.day == cellDate.day;
|
||
|
|
|
||
|
|
final dayTextColor = inCurrentMonth
|
||
|
|
? (Theme.of(context).brightness == Brightness.dark ? Colors.white : Colors.black87)
|
||
|
|
: (Theme.of(context).brightness == Brightness.dark ? Colors.white38 : Colors.grey.shade400);
|
||
|
|
|
||
|
|
return GestureDetector(
|
||
|
|
onTap: () {
|
||
|
|
if (!inCurrentMonth) {
|
||
|
|
setState(() => visibleMonth = DateTime(cellDate.year, cellDate.month, 1));
|
||
|
|
_loadMonth(visibleMonth);
|
||
|
|
}
|
||
|
|
_onSelectDate(key);
|
||
|
|
},
|
||
|
|
child: Column(
|
||
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
||
|
|
children: [
|
||
|
|
// rounded date cell
|
||
|
|
Container(
|
||
|
|
width: 36,
|
||
|
|
height: 36,
|
||
|
|
decoration: BoxDecoration(
|
||
|
|
color: isSelected ? primaryColor.withOpacity(0.14) : Colors.transparent,
|
||
|
|
borderRadius: BorderRadius.circular(8),
|
||
|
|
),
|
||
|
|
alignment: Alignment.center,
|
||
|
|
child: Text(
|
||
|
|
'$dayIndex',
|
||
|
|
style: TextStyle(
|
||
|
|
fontWeight: isSelected ? FontWeight.w700 : FontWeight.w600,
|
||
|
|
color: isSelected ? primaryColor : dayTextColor,
|
||
|
|
fontSize: 14,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
const SizedBox(height: 6),
|
||
|
|
// small event indicators (thumbnail overlap or dot)
|
||
|
|
if (hasEvents && thumbnails.isNotEmpty)
|
||
|
|
SizedBox(
|
||
|
|
height: 14,
|
||
|
|
child: Row(
|
||
|
|
mainAxisSize: MainAxisSize.min,
|
||
|
|
children: thumbnails.take(2).toList().asMap().entries.map((entry) {
|
||
|
|
final i = entry.key;
|
||
|
|
final url = entry.value;
|
||
|
|
return Transform.translate(
|
||
|
|
offset: Offset(i * -6.0, 0),
|
||
|
|
child: Container(
|
||
|
|
margin: const EdgeInsets.only(left: 4),
|
||
|
|
width: 14,
|
||
|
|
height: 14,
|
||
|
|
decoration: BoxDecoration(shape: BoxShape.circle, border: Border.all(color: Theme.of(context).cardColor, width: 1.0)),
|
||
|
|
child: ClipOval(child: Image.network(url, fit: BoxFit.cover, errorBuilder: (_, __, ___) => Container(color: Theme.of(context).dividerColor))),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}).toList(),
|
||
|
|
),
|
||
|
|
)
|
||
|
|
else if (hasEvents)
|
||
|
|
Container(width: 18, height: 6, decoration: BoxDecoration(color: primaryColor, borderRadius: BorderRadius.circular(6)))
|
||
|
|
else
|
||
|
|
const SizedBox.shrink(),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
);
|
||
|
|
},
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Selected-date summary (now guaranteed outside and below the calendar card)
|
||
|
|
Widget _selectedDateSummary(BuildContext context) {
|
||
|
|
final theme = Theme.of(context);
|
||
|
|
final shortWeekday = DateFormat('EEEE').format(selectedDate);
|
||
|
|
final shortDate = DateFormat('d MMMM, yyyy').format(selectedDate);
|
||
|
|
final dayNumber = selectedDate.day;
|
||
|
|
final monthLabel = DateFormat('MMM').format(selectedDate).toUpperCase();
|
||
|
|
final eventsCount = _eventsOfDay.length;
|
||
|
|
final primaryColor = theme.colorScheme.primary;
|
||
|
|
|
||
|
|
return Padding(
|
||
|
|
padding: const EdgeInsets.fromLTRB(20, 12, 20, 8),
|
||
|
|
child: Card(
|
||
|
|
elevation: 6,
|
||
|
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
|
||
|
|
child: Padding(
|
||
|
|
padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 8.0),
|
||
|
|
child: Row(
|
||
|
|
children: [
|
||
|
|
Container(
|
||
|
|
width: 56,
|
||
|
|
height: 56,
|
||
|
|
decoration: BoxDecoration(color: primaryColor.withOpacity(0.12), borderRadius: BorderRadius.circular(10)),
|
||
|
|
child: Column(
|
||
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
||
|
|
children: [
|
||
|
|
Text('$dayNumber', style: theme.textTheme.headlineSmall?.copyWith(color: primaryColor, fontWeight: FontWeight.bold, fontSize: 18)),
|
||
|
|
const SizedBox(height: 2),
|
||
|
|
Text(monthLabel, style: theme.textTheme.bodySmall?.copyWith(color: theme.hintColor, fontSize: 11, fontWeight: FontWeight.w700)),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
const SizedBox(width: 10),
|
||
|
|
Expanded(
|
||
|
|
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||
|
|
Text(shortWeekday, style: theme.textTheme.titleMedium?.copyWith(fontWeight: FontWeight.w600, fontSize: 14)),
|
||
|
|
const SizedBox(height: 2),
|
||
|
|
Text(shortDate, style: theme.textTheme.bodySmall?.copyWith(color: theme.hintColor, fontSize: 12)),
|
||
|
|
]),
|
||
|
|
),
|
||
|
|
Column(
|
||
|
|
crossAxisAlignment: CrossAxisAlignment.end,
|
||
|
|
children: [
|
||
|
|
Text('$eventsCount', style: theme.textTheme.headlineSmall?.copyWith(fontWeight: FontWeight.bold, color: primaryColor, fontSize: 16)),
|
||
|
|
const SizedBox(height: 2),
|
||
|
|
Text(eventsCount == 1 ? 'Event' : 'Events', style: theme.textTheme.bodySmall?.copyWith(color: theme.hintColor, fontSize: 12)),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Mobile event card (kept unchanged)
|
||
|
|
Widget _eventCardMobile(EventModel e) {
|
||
|
|
final theme = Theme.of(context);
|
||
|
|
final imgUrl = (e.thumbImg != null && e.thumbImg!.isNotEmpty) ? e.thumbImg! : (e.images.isNotEmpty ? e.images.first.image : null);
|
||
|
|
final dateLabel = (e.startDate != null && e.endDate != null && e.startDate == e.endDate)
|
||
|
|
? '${e.startDate}'
|
||
|
|
: (e.startDate != null && e.endDate != null ? '${e.startDate} - ${e.endDate}' : (e.startDate ?? ''));
|
||
|
|
|
||
|
|
return GestureDetector(
|
||
|
|
onTap: () => Navigator.of(context).push(MaterialPageRoute(builder: (_) => LearnMoreScreen(eventId: e.id))),
|
||
|
|
child: Card(
|
||
|
|
elevation: 6,
|
||
|
|
margin: const EdgeInsets.fromLTRB(20, 10, 20, 10),
|
||
|
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
|
||
|
|
child: Column(
|
||
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||
|
|
children: [
|
||
|
|
ClipRRect(
|
||
|
|
borderRadius: const BorderRadius.vertical(top: Radius.circular(14)),
|
||
|
|
child: imgUrl != null ? Image.network(imgUrl, height: 150, width: double.infinity, fit: BoxFit.cover, errorBuilder: (_, __, ___) => Container(height: 150, color: theme.dividerColor)) : Container(height: 150, color: theme.dividerColor, child: Icon(Icons.event, size: 44, color: theme.hintColor)),
|
||
|
|
),
|
||
|
|
Padding(
|
||
|
|
padding: const EdgeInsets.fromLTRB(12, 12, 12, 14),
|
||
|
|
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||
|
|
Text(e.title ?? e.name ?? '', style: theme.textTheme.titleMedium?.copyWith(fontWeight: FontWeight.bold), maxLines: 2, overflow: TextOverflow.ellipsis),
|
||
|
|
const SizedBox(height: 10),
|
||
|
|
Row(children: [
|
||
|
|
Container(width: 26, height: 26, decoration: BoxDecoration(color: theme.colorScheme.primary.withOpacity(0.12), borderRadius: BorderRadius.circular(6)), child: Icon(Icons.calendar_today, size: 14, color: theme.colorScheme.primary)),
|
||
|
|
const SizedBox(width: 8),
|
||
|
|
Expanded(child: Text(dateLabel, style: theme.textTheme.bodySmall?.copyWith(color: theme.hintColor))),
|
||
|
|
]),
|
||
|
|
const SizedBox(height: 8),
|
||
|
|
Row(children: [
|
||
|
|
Container(width: 26, height: 26, decoration: BoxDecoration(color: theme.colorScheme.primary.withOpacity(0.12), borderRadius: BorderRadius.circular(6)), child: Icon(Icons.location_on, size: 14, color: theme.colorScheme.primary)),
|
||
|
|
const SizedBox(width: 8),
|
||
|
|
Expanded(child: Text(e.place ?? '', style: theme.textTheme.bodySmall?.copyWith(color: theme.hintColor))),
|
||
|
|
]),
|
||
|
|
]),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
@override
|
||
|
|
Widget build(BuildContext context) {
|
||
|
|
final width = MediaQuery.of(context).size.width;
|
||
|
|
final isMobile = width < 700;
|
||
|
|
final theme = Theme.of(context);
|
||
|
|
|
||
|
|
// For non-mobile, keep original split layout
|
||
|
|
if (!isMobile) {
|
||
|
|
return Scaffold(
|
||
|
|
backgroundColor: theme.scaffoldBackgroundColor,
|
||
|
|
body: SafeArea(
|
||
|
|
child: Row(
|
||
|
|
children: [
|
||
|
|
Expanded(flex: 3, child: Padding(padding: const EdgeInsets.all(24.0), child: _calendarCard(context))),
|
||
|
|
Expanded(flex: 1, child: _detailsPanel()),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// MOBILE layout
|
||
|
|
// Stack: extended gradient panel (below appbar) that visually extends behind the calendar.
|
||
|
|
return Scaffold(
|
||
|
|
backgroundColor: theme.scaffoldBackgroundColor,
|
||
|
|
body: Stack(
|
||
|
|
children: [
|
||
|
|
// Extended blue gradient panel behind calendar (matches reference)
|
||
|
|
Positioned(
|
||
|
|
top: 0,
|
||
|
|
left: 0,
|
||
|
|
right: 0,
|
||
|
|
child: Container(
|
||
|
|
height: 260, // controls how much gradient shows behind calendar
|
||
|
|
decoration: AppDecoration.blueGradient.copyWith(
|
||
|
|
borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(30), bottomRight: Radius.circular(30)),
|
||
|
|
boxShadow: [const BoxShadow(color: Colors.black12, blurRadius: 12, offset: Offset(0, 6))],
|
||
|
|
),
|
||
|
|
// leave child empty — title and bell are placed above
|
||
|
|
child: const SizedBox.shrink(),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
|
||
|
|
// TOP APP BAR (title centered + notification at top-right) - unchanged placement
|
||
|
|
Positioned(
|
||
|
|
top: 0,
|
||
|
|
left: 0,
|
||
|
|
right: 0,
|
||
|
|
child: SafeArea(
|
||
|
|
bottom: false,
|
||
|
|
child: SizedBox(
|
||
|
|
height: 56, // app bar height
|
||
|
|
child: Padding(
|
||
|
|
padding: const EdgeInsets.symmetric(horizontal: 20),
|
||
|
|
child: Stack(
|
||
|
|
alignment: Alignment.center,
|
||
|
|
children: [
|
||
|
|
// centered title
|
||
|
|
Text(
|
||
|
|
"Event's Calendar",
|
||
|
|
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
||
|
|
color: Colors.white,
|
||
|
|
fontSize: 18,
|
||
|
|
fontWeight: FontWeight.w600,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
|
||
|
|
// notification icon at absolute top-right
|
||
|
|
Positioned(
|
||
|
|
right: 0,
|
||
|
|
child: InkWell(
|
||
|
|
onTap: () => ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Notifications (demo)'))),
|
||
|
|
child: Container(
|
||
|
|
width: 40,
|
||
|
|
height: 40,
|
||
|
|
decoration: BoxDecoration(
|
||
|
|
color: Colors.white24,
|
||
|
|
borderRadius: BorderRadius.circular(10),
|
||
|
|
),
|
||
|
|
child: const Icon(Icons.notifications_none, color: Colors.white),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
|
||
|
|
// CONTENT: calendar card overlapped on gradient, then summary and list
|
||
|
|
Column(
|
||
|
|
children: [
|
||
|
|
const SizedBox(height: 110), // leave space for appbar + some gradient top
|
||
|
|
_calendarCard(context), // calendar card sits visually on top of the gradient
|
||
|
|
_selectedDateSummary(context),
|
||
|
|
Expanded(
|
||
|
|
child: _loadingDay
|
||
|
|
? Center(child: CircularProgressIndicator(color: theme.colorScheme.primary))
|
||
|
|
: _eventsOfDay.isEmpty
|
||
|
|
? Center(
|
||
|
|
child: Column(
|
||
|
|
mainAxisSize: MainAxisSize.min,
|
||
|
|
children: [
|
||
|
|
Icon(Icons.event_available, size: 48, color: theme.hintColor),
|
||
|
|
const SizedBox(height: 10),
|
||
|
|
Text('No events scheduled for this date', style: theme.textTheme.bodyMedium?.copyWith(color: theme.hintColor)),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
)
|
||
|
|
: ListView.builder(
|
||
|
|
padding: const EdgeInsets.only(top: 6, bottom: 32),
|
||
|
|
itemCount: _eventsOfDay.length,
|
||
|
|
itemBuilder: (context, idx) => _eventCardMobile(_eventsOfDay[idx]),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
Widget _detailsPanel() {
|
||
|
|
final theme = Theme.of(context);
|
||
|
|
final shortDate = DateFormat('EEE, d MMM').format(selectedDate);
|
||
|
|
final eventsCount = _eventsOfDay.length;
|
||
|
|
|
||
|
|
Widget _buildHeaderCompact() {
|
||
|
|
return Padding(
|
||
|
|
padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 12.0),
|
||
|
|
child: Row(
|
||
|
|
children: [
|
||
|
|
Container(
|
||
|
|
width: 48,
|
||
|
|
height: 48,
|
||
|
|
decoration: AppDecoration.blueGradientRounded(10),
|
||
|
|
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [Text('${selectedDate.day}', style: const TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold)), const SizedBox(height: 2), Text(monthNames[selectedDate.month].substring(0, 3), style: const TextStyle(color: Colors.white70, fontSize: 10))]),
|
||
|
|
),
|
||
|
|
const SizedBox(width: 12),
|
||
|
|
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [Text(shortDate, style: Theme.of(context).textTheme.bodyLarge?.copyWith(fontWeight: FontWeight.w600)), const SizedBox(height: 4), Text('$eventsCount ${eventsCount == 1 ? "Event" : "Events"}', style: Theme.of(context).textTheme.bodySmall?.copyWith(color: Theme.of(context).hintColor))]),
|
||
|
|
const Spacer(),
|
||
|
|
IconButton(onPressed: () {}, icon: Icon(Icons.more_horiz, color: Theme.of(context).iconTheme.color)),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return Container(
|
||
|
|
color: Theme.of(context).scaffoldBackgroundColor,
|
||
|
|
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||
|
|
_buildHeaderCompact(),
|
||
|
|
Divider(height: 1, color: theme.dividerColor),
|
||
|
|
Expanded(
|
||
|
|
child: _loadingDay
|
||
|
|
? Center(child: CircularProgressIndicator(color: theme.colorScheme.primary))
|
||
|
|
: _eventsOfDay.isEmpty
|
||
|
|
? const SizedBox.shrink()
|
||
|
|
: ListView.builder(padding: const EdgeInsets.only(top: 6, bottom: 24), itemCount: _eventsOfDay.length, itemBuilder: (context, idx) => _eventCardMobile(_eventsOfDay[idx])),
|
||
|
|
)
|
||
|
|
]),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|