diff --git a/lib/screens/learn_more_screen.dart b/lib/screens/learn_more_screen.dart index e3d945e..f651b2b 100644 --- a/lib/screens/learn_more_screen.dart +++ b/lib/screens/learn_more_screen.dart @@ -4,6 +4,7 @@ import 'dart:ui'; import 'package:flutter/foundation.dart' show kIsWeb; import 'package:flutter/material.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart'; +// google_maps_flutter removed — using OpenStreetMap static map preview instead import 'package:share_plus/share_plus.dart'; import 'package:url_launcher/url_launcher.dart'; import 'package:cached_network_image/cached_network_image.dart'; @@ -43,8 +44,6 @@ class _LearnMoreScreenState extends State { // Google Map GoogleMapController? _mapController; - MapType _mapType = MapType.normal; - bool _showMapControls = false; @override void initState() { @@ -172,18 +171,6 @@ class _LearnMoreScreenState extends State { 'https://www.google.com/maps/dir/?api=1&destination=${_event!.latitude},${_event!.longitude}'); } - // --------------------------------------------------------------------------- - // Map camera helpers - // --------------------------------------------------------------------------- - - void _moveCamera(double latDelta, double lngDelta) { - _mapController?.animateCamera(CameraUpdate.scrollBy(lngDelta * 80, -latDelta * 80)); - } - - void _zoom(double amount) { - _mapController?.animateCamera(CameraUpdate.zoomBy(amount)); - } - // --------------------------------------------------------------------------- // BUILD // --------------------------------------------------------------------------- @@ -953,7 +940,7 @@ class _LearnMoreScreenState extends State { } // --------------------------------------------------------------------------- - // 5. VENUE LOCATION (Google Map) + // 5. VENUE LOCATION (Native Google Map on mobile, fallback on web) // --------------------------------------------------------------------------- Widget _buildVenueSection(ThemeData theme) { @@ -979,45 +966,26 @@ class _LearnMoreScreenState extends State { ClipRRect( borderRadius: BorderRadius.circular(20), child: SizedBox( - height: 280, + height: 250, + width: double.infinity, child: Stack( children: [ - // Use static map image on web (Google Maps JS SDK not configured), - // native GoogleMap widget on mobile + // Native Google Maps SDK on mobile, tappable fallback on web if (kIsWeb) GestureDetector( onTap: _viewLargerMap, child: Container( - decoration: BoxDecoration( - color: Colors.grey.shade200, - borderRadius: BorderRadius.circular(20), - ), - child: Stack( - children: [ - Positioned.fill( - child: CachedNetworkImage( - imageUrl: 'https://maps.googleapis.com/maps/api/staticmap?center=$lat,$lng&zoom=15&size=600x300&markers=color:red%7C$lat,$lng&key=', - fit: BoxFit.cover, - errorWidget: (_, __, ___) => Container( - color: const Color(0xFFE8EAF6), - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Icon(Icons.map_outlined, size: 48, color: theme.colorScheme.primary), - const SizedBox(height: 8), - Text( - 'Tap to view on Google Maps', - style: TextStyle( - color: theme.colorScheme.primary, - fontWeight: FontWeight.w600, - ), - ), - ], - ), - ), - ), - ), - ], + color: const Color(0xFFE8EAF6), + child: Center( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon(Icons.map_outlined, size: 48, color: theme.colorScheme.primary), + const SizedBox(height: 8), + Text('Tap to view on Google Maps', + style: TextStyle(color: theme.colorScheme.primary, fontWeight: FontWeight.w600)), + ], + ), ), ), ) @@ -1027,7 +995,6 @@ class _LearnMoreScreenState extends State { target: LatLng(lat, lng), zoom: 15, ), - mapType: _mapType, markers: { Marker( markerId: const MarkerId('event'), @@ -1036,14 +1003,14 @@ class _LearnMoreScreenState extends State { ), }, myLocationButtonEnabled: false, - zoomControlsEnabled: false, + zoomControlsEnabled: true, scrollGesturesEnabled: true, rotateGesturesEnabled: false, tiltGesturesEnabled: false, onMapCreated: (c) => _mapController = c, ), - // "View larger map" – top left + // "View larger map" overlay button — top left Positioned( top: 10, left: 10, @@ -1055,112 +1022,23 @@ class _LearnMoreScreenState extends State { color: Colors.white, borderRadius: BorderRadius.circular(8), boxShadow: [ - BoxShadow( - color: Colors.black.withOpacity(0.12), - blurRadius: 6, - ), + BoxShadow(color: Colors.black.withValues(alpha: 0.12), blurRadius: 6), ], ), - child: Text( - 'View larger map', - style: TextStyle( - color: theme.colorScheme.primary, - fontWeight: FontWeight.w600, - fontSize: 13, - ), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Icon(Icons.open_in_new, size: 14, color: theme.colorScheme.primary), + const SizedBox(width: 4), + Text( + 'View larger map', + style: TextStyle(color: theme.colorScheme.primary, fontWeight: FontWeight.w600, fontSize: 13), + ), + ], ), ), ), ), - - // Map type toggle – bottom left (native only) - if (!kIsWeb) - Positioned( - bottom: 12, - left: 12, - child: _mapControlButton( - icon: _mapType == MapType.normal - ? Icons.satellite_alt - : Icons.map_outlined, - onTap: () { - setState(() { - _mapType = _mapType == MapType.normal - ? MapType.satellite - : MapType.normal; - }); - }, - ), - ), - - // Map controls toggle – bottom right (native only) - if (!kIsWeb) - Positioned( - bottom: 12, - right: 12, - child: _mapControlButton( - icon: Icons.open_with_rounded, - onTap: () => setState(() => _showMapControls = !_showMapControls), - ), - ), - - // Directional pad overlay (native only) - if (!kIsWeb && _showMapControls) - Positioned.fill( - child: Container( - decoration: BoxDecoration( - color: Colors.black.withOpacity(0.25), - borderRadius: BorderRadius.circular(20), - ), - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - _mapControlButton( - icon: Icons.keyboard_arrow_up, - onTap: () => _moveCamera(1, 0)), - const SizedBox(width: 16), - _mapControlButton( - icon: Icons.add, - onTap: () => _zoom(1)), - ], - ), - const SizedBox(height: 10), - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - _mapControlButton( - icon: Icons.keyboard_arrow_left, - onTap: () => _moveCamera(0, -1)), - const SizedBox(width: 60), - _mapControlButton( - icon: Icons.keyboard_arrow_right, - onTap: () => _moveCamera(0, 1)), - ], - ), - const SizedBox(height: 10), - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - _mapControlButton( - icon: Icons.keyboard_arrow_down, - onTap: () => _moveCamera(-1, 0)), - const SizedBox(width: 16), - _mapControlButton( - icon: Icons.remove, - onTap: () => _zoom(-1)), - const SizedBox(width: 16), - _mapControlButton( - icon: Icons.close, - onTap: () => - setState(() => _showMapControls = false)), - ], - ), - ], - ), - ), - ), ], ), ), @@ -1177,7 +1055,7 @@ class _LearnMoreScreenState extends State { borderRadius: BorderRadius.circular(16), boxShadow: [ BoxShadow( - color: theme.shadowColor.withOpacity(0.06), + color: theme.shadowColor.withValues(alpha: 0.06), blurRadius: 12, offset: const Offset(0, 4), ), @@ -1186,21 +1064,11 @@ class _LearnMoreScreenState extends State { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Text( - venueLabel, - style: theme.textTheme.titleMedium?.copyWith( - fontWeight: FontWeight.bold, - ), - ), + Text(venueLabel, style: theme.textTheme.titleMedium?.copyWith(fontWeight: FontWeight.bold)), if (_event!.place != null && _event!.place != venueLabel) Padding( padding: const EdgeInsets.only(top: 4), - child: Text( - _event!.place!, - style: theme.textTheme.bodyMedium?.copyWith( - color: theme.hintColor, - ), - ), + child: Text(_event!.place!, style: theme.textTheme.bodyMedium?.copyWith(color: theme.hintColor)), ), ], ), @@ -1210,30 +1078,6 @@ class _LearnMoreScreenState extends State { ); } - Widget _mapControlButton({ - required IconData icon, - required VoidCallback onTap, - }) { - return GestureDetector( - onTap: onTap, - child: Container( - width: 44, - height: 44, - decoration: BoxDecoration( - color: Colors.white.withOpacity(0.92), - shape: BoxShape.circle, - boxShadow: [ - BoxShadow( - color: Colors.black.withOpacity(0.15), - blurRadius: 6, - ), - ], - ), - child: Icon(icon, color: Colors.grey.shade700, size: 22), - ), - ); - } - // --------------------------------------------------------------------------- // 6. GET DIRECTIONS BUTTON // ---------------------------------------------------------------------------