I am developing a project in flutterflow and im kinda stuck in a feature i need to implement. There is a screen in which a Google map is presented, this map has a Firestore query that returns coordinates, these coordinates are then presented on them map as pins.
All of this was done on the drag-and-drop FlutterFlow. I want to know HOW (i dont want someone to write the code for me unless they really want to, just to be clear i'm asking for help, not my job done) i can let the user draw a polygon with their finger, and look for this pins only inside that drawing
Help is really really appreciated c:
This is the code for the flutterflow screen: widget: `
import '/backend/backend.dart';
import '/flutter_flow/flutter_flow_google_map.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';
import 'mapofprojects_model.dart';
export 'mapofprojects_model.dart';
class MapofprojectsWidget extends StatefulWidget {
const MapofprojectsWidget({Key? key}) : super(key: key);
@override
_MapofprojectsWidgetState createState() => _MapofprojectsWidgetState();
}
class _MapofprojectsWidgetState extends State<MapofprojectsWidget> {
late MapofprojectsModel _model;
final scaffoldKey = GlobalKey<ScaffoldState>();
LatLng? currentUserLocationValue;
@override
void initState() {
super.initState();
_model = createModel(context, () => MapofprojectsModel());
getCurrentUserLocation(defaultLocation: LatLng(0.0, 0.0), cached: true)
.then((loc) => setState(() => currentUserLocationValue = loc));
WidgetsBinding.instance.addPostFrameCallback((_) => setState(() {}));
}
@override
void dispose() {
_model.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
if (currentUserLocationValue == null) {
return Container(
color: FlutterFlowTheme.of(context).primaryBackground,
child: Center(
child: SizedBox(
width: 50,
height: 50,
child: CircularProgressIndicator(
color: FlutterFlowTheme.of(context).primary,
),
),
),
);
}
return GestureDetector(
onTap: () => FocusScope.of(context).requestFocus(_model.unfocusNode),
child: Scaffold(
key: scaffoldKey,
resizeToAvoidBottomInset: false,
backgroundColor: FlutterFlowTheme.of(context).primaryBackground,
body: SafeArea(
top: true,
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: InkWell(
splashColor: Colors.transparent,
focusColor: Colors.transparent,
hoverColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: () async {
context.pushNamed(
'search',
extra: <String, dynamic>{
kTransitionInfoKey: TransitionInfo(
hasTransition: true,
transitionType: PageTransitionType.fade,
duration: Duration(milliseconds: 150),
),
},
);
},
child: Stack(
children: [
StreamBuilder<List<NonFeaturedListingsRecord>>(
stream: queryNonFeaturedListingsRecord(
limit: 30,
),
builder: (context, snapshot) {
// Customize what your widget looks like when it's loading.
if (!snapshot.hasData) {
return Center(
child: SizedBox(
width: 50,
height: 50,
child: CircularProgressIndicator(
color: FlutterFlowTheme.of(context).primary,
),
),
);
}
List<NonFeaturedListingsRecord>
googleMapNonFeaturedListingsRecordList =
snapshot.data!;
return FlutterFlowGoogleMap(
controller: _model.googleMapsController,
onCameraIdle: (latLng) => setState(
() => _model.googleMapsCenter = latLng),
initialLocation: _model.googleMapsCenter ??=
currentUserLocationValue!,
markers: googleMapNonFeaturedListingsRecordList
.map((e) => e.location)
.withoutNulls
.toList()
.map(
(marker) => FlutterFlowMarker(
marker.serialize(),
marker,
),
)
.toList(),
markerColor: GoogleMarkerColor.orange,
mapType: MapType.normal,
style: GoogleMapStyle.standard,
initialZoom: 14,
allowInteraction: true,
allowZoom: true,
showZoomControls: true,
showLocation: true,
showCompass: false,
showMapToolbar: false,
showTraffic: false,
centerMapOnMarkerTap: true,
);
},
),
Align(
alignment: AlignmentDirectional(0, 0),
child: Text(
'Hello World',
style: FlutterFlowTheme.of(context).bodyMedium,
),
),
Align(
alignment: AlignmentDirectional(-0.9, 0.9),
child: Container(
width: 261,
height: 62,
decoration: BoxDecoration(
color: Color(0x69101213),
shape: BoxShape.rectangle,
),
child: Align(
alignment: AlignmentDirectional(0, 0),
child: Text(
'¡Busca y dibuja un Area en el mapa!',
style: FlutterFlowTheme.of(context).bodyMedium,
),
),
),
),
],
),
),
),
],
),
),
),
);
}
}
import '/backend/backend.dart';
import '/flutter_flow/flutter_flow_google_map.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';
class MapofprojectsModel extends FlutterFlowModel {
/// State fields for stateful widgets in this page.
final unfocusNode = FocusNode();
// State field(s) for GoogleMap widget.
LatLng? googleMapsCenter;
final googleMapsController = Completer<GoogleMapController>();
/// Initialization and disposal methods.
void initState(BuildContext context) {}
void dispose() {
unfocusNode.dispose();
}
/// Action blocks are added here.
/// Additional helper methods are added here.
}
