Using Fluster to cluster a list of firebase documents - flutter

Question

[I have a list of location documents in Firebase and Algolia that are displayed on my Flutter app's google map page as markers. There are over 50 location documents currently in my Firebase, but at a time only 20 markers are displayed on the map no matter what. There are no limitations set anywhere, but there is a maximum of 20 markers. In order for there to be more than 20 markers, I need to implement clusters in my map page but I am not able to. With this code being the code for my map page, how would I implement clusters?
import '../auth/auth_util.dart';
import '../backend/backend.dart';
import '../flutter_flow/flutter_flow_ad_banner.dart';
import '../flutter_flow/flutter_flow_google_map.dart';
import '../flutter_flow/flutter_flow_theme.dart';
import '../flutter_flow/flutter_flow_util.dart';
import '../flutter_flow/flutter_flow_widgets.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:google_fonts/google_fonts.dart';
class FindCourtWidget extends StatefulWidget {
const FindCourtWidget({
Key? key,
this.searchTerm,
}) : super(key: key);
final String? searchTerm;
#override
_FindCourtWidgetState createState() => _FindCourtWidgetState();
}
class _FindCourtWidgetState extends State<FindCourtWidget> {
LatLng? currentUserLocationValue;
final scaffoldKey = GlobalKey<ScaffoldState>();
LatLng? googleMapsCenter;
final googleMapsController = Completer<GoogleMapController>();
#override
void initState() {
super.initState();
// On page load action.
SchedulerBinding.instance.addPostFrameCallback((_) async {
currentUserLocationValue =
await getCurrentUserLocation(defaultLocation: LatLng(0.0, 0.0));
final usersUpdateData = createUsersRecordData(
latLngLocation: currentUserLocationValue,
);
await currentUserReference!.update(usersUpdateData);
});
getCurrentUserLocation(defaultLocation: LatLng(0.0, 0.0), cached: true)
.then((loc) => setState(() => currentUserLocationValue = loc));
WidgetsBinding.instance.addPostFrameCallback((_) => setState(() {}));
}
#override
Widget build(BuildContext context) {
if (currentUserLocationValue == null) {
return Container(
color: FlutterFlowTheme.of(context).primaryBackground,
child: Center(
child: SizedBox(
width: 50,
height: 50,
child: SpinKitRotatingCircle(
color: Color(0xFFF25454),
size: 50,
),
),
),
);
}
return FutureBuilder<List<CourtsRecord>>(
future: CourtsRecord.search(
term: '*',
location: getCurrentUserLocation(
defaultLocation: LatLng(37.4298229, -122.1735655)),
),
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: SpinKitRotatingCircle(
color: Color(0xFFF25454),
size: 50,
),
),
);
}
List<CourtsRecord> findCourtCourtsRecordList = snapshot.data!;
return Title(
title: 'findCourt',
color: FlutterFlowTheme.of(context).primaryColor,
child: Scaffold(
key: scaffoldKey,
resizeToAvoidBottomInset: false,
body: Stack(
children: [
Stack(
children: [
Stack(
alignment: AlignmentDirectional(0, 0),
children: [
Align(
alignment: AlignmentDirectional(0, 0),
child: FlutterFlowGoogleMap(
controller: googleMapsController,
onCameraIdle: (latLng) =>
setState(() => googleMapsCenter = latLng),
initialLocation: googleMapsCenter ??=
currentUserLocationValue!,
markers: findCourtCourtsRecordList
.map(
(findCourtCourtsRecord) =>
FlutterFlowMarker(
findCourtCourtsRecord.reference.path,
findCourtCourtsRecord.location!,
() async {
context.pushNamed(
'courtDetailsCopy',
params: {
'court2': serializeParam(
findCourtCourtsRecord,
ParamType.Document,
),
}.withoutNulls,
extra: <String, dynamic>{
'court2': findCourtCourtsRecord,
},
);
},
),
)
.toList(),
markerColor: GoogleMarkerColor.red,
mapType: MapType.normal,
style: GoogleMapStyle.standard,
initialZoom: 14,
allowInteraction: true,
allowZoom: true,
showZoomControls: false,
showLocation: true,
showCompass: false,
showMapToolbar: false,
showTraffic: false,
centerMapOnMarkerTap: true,
),
),
],
),
Align(
alignment: AlignmentDirectional(0, 0.8),
child: FFButtonWidget(
onPressed: () async {
context.pushNamed(
'addCourt',
extra: <String, dynamic>{
kTransitionInfoKey: TransitionInfo(
hasTransition: true,
transitionType:
PageTransitionType.bottomToTop,
),
},
);
},
text: 'Create Location',
icon: Icon(
Icons.add_circle,
color: FlutterFlowTheme.of(context).white,
size: 30,
),
options: FFButtonOptions(
width: 200,
height: 60,
color: FlutterFlowTheme.of(context).primaryColor,
textStyle:
FlutterFlowTheme.of(context).subtitle2.override(
fontFamily: 'Overpass',
color: FlutterFlowTheme.of(context).white,
fontSize: 18,
),
borderSide: BorderSide(
color: Colors.transparent,
width: 1,
),
borderRadius: BorderRadius.circular(50),
),
),
),
Align(
alignment: AlignmentDirectional(-1, -1),
child: Container(
width: MediaQuery.of(context).size.width,
height: 262,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
FlutterFlowTheme.of(context).white,
Color(0x00FFFFFF)
],
stops: [0, 1],
begin: AlignmentDirectional(0, -1),
end: AlignmentDirectional(0, 1),
),
),
alignment: AlignmentDirectional(0, 0),
child: Padding(
padding:
EdgeInsetsDirectional.fromSTEB(0, 20, 0, 0),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Align(
alignment: AlignmentDirectional(0, 0),
child: Padding(
padding: EdgeInsetsDirectional.fromSTEB(
30, 30, 30, 0),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Align(
alignment: AlignmentDirectional(
-0.68, -0.75),
child: Text(
'Hello ',
textAlign: TextAlign.start,
style: FlutterFlowTheme.of(context)
.title2
.override(
fontFamily: 'Overpass',
fontSize: 30,
),
),
),
Align(
alignment:
AlignmentDirectional(0.63, -0.75),
child: AuthUserStreamWidget(
builder: (context) => Text(
currentUserDisplayName
.maybeHandleOverflow(
maxChars: 13,
replacement: '…',
),
textAlign: TextAlign.start,
style:
FlutterFlowTheme.of(context)
.title2
.override(
fontFamily: 'Overpass',
fontSize: 30,
),
),
),
),
],
),
),
),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.spaceAround,
children: [
Align(
alignment:
AlignmentDirectional(-0.05, -0.85),
child: Text(
'Find a great sport near you in 2 minutes',
style: FlutterFlowTheme.of(context)
.bodyText1
.override(
fontFamily: 'Overpass',
color: Color(0xFF504848),
fontSize: 16,
fontWeight: FontWeight.w300,
),
),
),
],
),
],
),
),
),
),
Align(
alignment: AlignmentDirectional(0, 1),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Align(
alignment: AlignmentDirectional(0, 1),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(
child: Align(
alignment: AlignmentDirectional(0, 1),
child: FlutterFlowAdBanner(
width:
MediaQuery.of(context).size.width,
height: 50,
showsTestAd: true,
iOSAdUnitID:
'ca-app-pub-4806655917667448/9288549735',
androidAdUnitID:
'ca-app-pub-4806655917667448/4144034269',
),
),
),
],
),
),
],
),
),
],
),
],
),
));
},
);
}
}
I have tried using the Fluster package to implement clusters but my current knowledge in flutter/dart is not allowing me to go further in my implementation.