refactor: simplify venue map section, ready for native Google Maps SDK
Cleaned up _buildVenueSection: removed broken static map URL (empty API key), removed unused map controls (directional pad, satellite toggle). Native GoogleMap widget on mobile, simple fallback on web. Pending: Google Maps API key in AndroidManifest.xml. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -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<LearnMoreScreen> {
|
||||
|
||||
// Google Map
|
||||
GoogleMapController? _mapController;
|
||||
MapType _mapType = MapType.normal;
|
||||
bool _showMapControls = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
@@ -172,18 +171,6 @@ class _LearnMoreScreenState extends State<LearnMoreScreen> {
|
||||
'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<LearnMoreScreen> {
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// 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<LearnMoreScreen> {
|
||||
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<LearnMoreScreen> {
|
||||
target: LatLng(lat, lng),
|
||||
zoom: 15,
|
||||
),
|
||||
mapType: _mapType,
|
||||
markers: {
|
||||
Marker(
|
||||
markerId: const MarkerId('event'),
|
||||
@@ -1036,14 +1003,14 @@ class _LearnMoreScreenState extends State<LearnMoreScreen> {
|
||||
),
|
||||
},
|
||||
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<LearnMoreScreen> {
|
||||
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<LearnMoreScreen> {
|
||||
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<LearnMoreScreen> {
|
||||
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<LearnMoreScreen> {
|
||||
);
|
||||
}
|
||||
|
||||
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
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
Reference in New Issue
Block a user