Skip to content

Commit 9c00bc5

Browse files
afgprogrammerafgprogrammer
committed
Add map styles
1 parent 2385701 commit 9c00bc5

File tree

2 files changed

+1070
-238
lines changed

2 files changed

+1070
-238
lines changed

Diff for: ‎lib/main.dart

+104-238
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import 'dart:async';
22

33
import 'package:custom_info_window/custom_info_window.dart';
4+
import 'package:day41/model/map_style.dart';
45
import 'package:flutter/foundation.dart';
5-
import 'package:flutter/gestures.dart';
66
import 'package:flutter/material.dart';
77
import 'package:google_maps_flutter/google_maps_flutter.dart';
88

@@ -28,247 +28,46 @@ class _HomePageState extends State<HomePage> {
2828
zoom: 14.4746,
2929
);
3030

31-
String mapStyle = """
32-
[
33-
{
34-
"elementType": "geometry",
35-
"stylers": [
36-
{
37-
"color": "#1d2c4d"
38-
}
39-
]
40-
},
41-
{
42-
"elementType": "labels.text.fill",
43-
"stylers": [
44-
{
45-
"color": "#8ec3b9"
46-
}
47-
]
48-
},
49-
{
50-
"elementType": "labels.text.stroke",
51-
"stylers": [
52-
{
53-
"color": "#1a3646"
54-
}
55-
]
56-
},
57-
{
58-
"featureType": "administrative.country",
59-
"elementType": "geometry.stroke",
60-
"stylers": [
61-
{
62-
"color": "#4b6878"
63-
}
64-
]
65-
},
66-
{
67-
"featureType": "administrative.land_parcel",
68-
"elementType": "labels.text.fill",
69-
"stylers": [
70-
{
71-
"color": "#64779e"
72-
}
73-
]
74-
},
75-
{
76-
"featureType": "administrative.province",
77-
"elementType": "geometry.stroke",
78-
"stylers": [
79-
{
80-
"color": "#4b6878"
81-
}
82-
]
83-
},
84-
{
85-
"featureType": "landscape.man_made",
86-
"elementType": "geometry.stroke",
87-
"stylers": [
88-
{
89-
"color": "#334e87"
90-
}
91-
]
92-
},
93-
{
94-
"featureType": "landscape.natural",
95-
"elementType": "geometry",
96-
"stylers": [
97-
{
98-
"color": "#023e58"
99-
}
100-
]
101-
},
102-
{
103-
"featureType": "poi",
104-
"elementType": "geometry",
105-
"stylers": [
106-
{
107-
"color": "#283d6a"
108-
}
109-
]
110-
},
111-
{
112-
"featureType": "poi",
113-
"elementType": "labels.text.fill",
114-
"stylers": [
115-
{
116-
"color": "#6f9ba5"
117-
}
118-
]
119-
},
120-
{
121-
"featureType": "poi",
122-
"elementType": "labels.text.stroke",
123-
"stylers": [
124-
{
125-
"color": "#1d2c4d"
126-
}
127-
]
128-
},
129-
{
130-
"featureType": "poi.park",
131-
"elementType": "geometry.fill",
132-
"stylers": [
133-
{
134-
"color": "#023e58"
135-
}
136-
]
137-
},
138-
{
139-
"featureType": "poi.park",
140-
"elementType": "labels.text.fill",
141-
"stylers": [
142-
{
143-
"color": "#3C7680"
144-
}
145-
]
146-
},
147-
{
148-
"featureType": "road",
149-
"elementType": "geometry",
150-
"stylers": [
151-
{
152-
"color": "#304a7d"
153-
}
154-
]
155-
},
156-
{
157-
"featureType": "road",
158-
"elementType": "labels.text.fill",
159-
"stylers": [
160-
{
161-
"color": "#98a5be"
162-
}
163-
]
164-
},
165-
{
166-
"featureType": "road",
167-
"elementType": "labels.text.stroke",
168-
"stylers": [
169-
{
170-
"color": "#1d2c4d"
171-
}
172-
]
173-
},
174-
{
175-
"featureType": "road.highway",
176-
"elementType": "geometry",
177-
"stylers": [
178-
{
179-
"color": "#2c6675"
180-
}
181-
]
182-
},
183-
{
184-
"featureType": "road.highway",
185-
"elementType": "geometry.stroke",
186-
"stylers": [
187-
{
188-
"color": "#255763"
189-
}
190-
]
191-
},
192-
{
193-
"featureType": "road.highway",
194-
"elementType": "labels.text.fill",
195-
"stylers": [
196-
{
197-
"color": "#b0d5ce"
198-
}
199-
]
200-
},
201-
{
202-
"featureType": "road.highway",
203-
"elementType": "labels.text.stroke",
204-
"stylers": [
205-
{
206-
"color": "#023e58"
207-
}
208-
]
209-
},
210-
{
211-
"featureType": "transit",
212-
"elementType": "labels.text.fill",
213-
"stylers": [
214-
{
215-
"color": "#98a5be"
216-
}
217-
]
218-
},
219-
{
220-
"featureType": "transit",
221-
"elementType": "labels.text.stroke",
222-
"stylers": [
223-
{
224-
"color": "#1d2c4d"
225-
}
226-
]
227-
},
228-
{
229-
"featureType": "transit.line",
230-
"elementType": "geometry.fill",
231-
"stylers": [
232-
{
233-
"color": "#283d6a"
234-
}
235-
]
236-
},
237-
{
238-
"featureType": "transit.station",
239-
"elementType": "geometry",
240-
"stylers": [
241-
{
242-
"color": "#3a4762"
243-
}
244-
]
245-
},
246-
{
247-
"featureType": "water",
248-
"elementType": "geometry",
249-
"stylers": [
250-
{
251-
"color": "#0e1626"
252-
}
253-
]
254-
},
255-
{
256-
"featureType": "water",
257-
"elementType": "labels.text.fill",
258-
"stylers": [
259-
{
260-
"color": "#4e6d70"
261-
}
262-
]
263-
}
264-
]
265-
""";
266-
26731
Map<String, Marker> _markers = {};
26832
Map<CircleId, Circle> circles = <CircleId, Circle>{};
26933

34+
int _circleIdCounter = 1;
35+
CircleId? selectedCircle;
27036
CustomInfoWindowController _customInfoWindowController = CustomInfoWindowController();
27137

38+
List<dynamic> _mapThemes =[
39+
{
40+
'name': 'Standard',
41+
'style': MapStyle().dark,
42+
'image': 'https://maps.googleapis.com/maps/api/staticmap?center=-33.9775,151.036&zoom=13&format=png&maptype=roadmap&style=element:labels%7Cvisibility:off&style=feature:administrative.land_parcel%7Cvisibility:off&style=feature:administrative.neighborhood%7Cvisibility:off&size=164x132&key=AIzaSyDk4C4EBWgjuL1eBnJlu1J80WytEtSIags&scale=2'
43+
},
44+
{
45+
'name': 'Sliver',
46+
'style': MapStyle().sliver,
47+
'image': 'https://maps.googleapis.com/maps/api/staticmap?center=-33.9775,151.036&zoom=13&format=png&maptype=roadmap&style=element:geometry%7Ccolor:0xf5f5f5&style=element:labels%7Cvisibility:off&style=element:labels.icon%7Cvisibility:off&style=element:labels.text.fill%7Ccolor:0x616161&style=element:labels.text.stroke%7Ccolor:0xf5f5f5&style=feature:administrative.land_parcel%7Cvisibility:off&style=feature:administrative.land_parcel%7Celement:labels.text.fill%7Ccolor:0xbdbdbd&style=feature:administrative.neighborhood%7Cvisibility:off&style=feature:poi%7Celement:geometry%7Ccolor:0xeeeeee&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0x757575&style=feature:poi.park%7Celement:geometry%7Ccolor:0xe5e5e5&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0x9e9e9e&style=feature:road%7Celement:geometry%7Ccolor:0xffffff&style=feature:road.arterial%7Celement:labels.text.fill%7Ccolor:0x757575&style=feature:road.highway%7Celement:geometry%7Ccolor:0xdadada&style=feature:road.highway%7Celement:labels.text.fill%7Ccolor:0x616161&style=feature:road.local%7Celement:labels.text.fill%7Ccolor:0x9e9e9e&style=feature:transit.line%7Celement:geometry%7Ccolor:0xe5e5e5&style=feature:transit.station%7Celement:geometry%7Ccolor:0xeeeeee&style=feature:water%7Celement:geometry%7Ccolor:0xc9c9c9&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x9e9e9e&size=164x132&key=AIzaSyDk4C4EBWgjuL1eBnJlu1J80WytEtSIags&scale=2'
48+
},
49+
{
50+
'name': 'Retro',
51+
'style': MapStyle().retro,
52+
'image': 'https://maps.googleapis.com/maps/api/staticmap?center=-33.9775,151.036&zoom=13&format=png&maptype=roadmap&style=element:geometry%7Ccolor:0xebe3cd&style=element:labels%7Cvisibility:off&style=element:labels.text.fill%7Ccolor:0x523735&style=element:labels.text.stroke%7Ccolor:0xf5f1e6&style=feature:administrative%7Celement:geometry.stroke%7Ccolor:0xc9b2a6&style=feature:administrative.land_parcel%7Cvisibility:off&style=feature:administrative.land_parcel%7Celement:geometry.stroke%7Ccolor:0xdcd2be&style=feature:administrative.land_parcel%7Celement:labels.text.fill%7Ccolor:0xae9e90&style=feature:administrative.neighborhood%7Cvisibility:off&style=feature:landscape.natural%7Celement:geometry%7Ccolor:0xdfd2ae&style=feature:poi%7Celement:geometry%7Ccolor:0xdfd2ae&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0x93817c&style=feature:poi.park%7Celement:geometry.fill%7Ccolor:0xa5b076&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0x447530&style=feature:road%7Celement:geometry%7Ccolor:0xf5f1e6&style=feature:road.arterial%7Celement:geometry%7Ccolor:0xfdfcf8&style=feature:road.highway%7Celement:geometry%7Ccolor:0xf8c967&style=feature:road.highway%7Celement:geometry.stroke%7Ccolor:0xe9bc62&style=feature:road.highway.controlled_access%7Celement:geometry%7Ccolor:0xe98d58&style=feature:road.highway.controlled_access%7Celement:geometry.stroke%7Ccolor:0xdb8555&style=feature:road.local%7Celement:labels.text.fill%7Ccolor:0x806b63&style=feature:transit.line%7Celement:geometry%7Ccolor:0xdfd2ae&style=feature:transit.line%7Celement:labels.text.fill%7Ccolor:0x8f7d77&style=feature:transit.line%7Celement:labels.text.stroke%7Ccolor:0xebe3cd&style=feature:transit.station%7Celement:geometry%7Ccolor:0xdfd2ae&style=feature:water%7Celement:geometry.fill%7Ccolor:0xb9d3c2&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x92998d&size=164x132&key=AIzaSyDk4C4EBWgjuL1eBnJlu1J80WytEtSIags&scale=2'
53+
},
54+
{
55+
'name': 'Dark',
56+
'style': MapStyle().dark,
57+
'image': 'https://maps.googleapis.com/maps/api/staticmap?center=-33.9775,151.036&zoom=13&format=png&maptype=roadmap&style=element:geometry%7Ccolor:0x212121&style=element:labels%7Cvisibility:off&style=element:labels.icon%7Cvisibility:off&style=element:labels.text.fill%7Ccolor:0x757575&style=element:labels.text.stroke%7Ccolor:0x212121&style=feature:administrative%7Celement:geometry%7Ccolor:0x757575&style=feature:administrative.country%7Celement:labels.text.fill%7Ccolor:0x9e9e9e&style=feature:administrative.land_parcel%7Cvisibility:off&style=feature:administrative.locality%7Celement:labels.text.fill%7Ccolor:0xbdbdbd&style=feature:administrative.neighborhood%7Cvisibility:off&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0x757575&style=feature:poi.park%7Celement:geometry%7Ccolor:0x181818&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0x616161&style=feature:poi.park%7Celement:labels.text.stroke%7Ccolor:0x1b1b1b&style=feature:road%7Celement:geometry.fill%7Ccolor:0x2c2c2c&style=feature:road%7Celement:labels.text.fill%7Ccolor:0x8a8a8a&style=feature:road.arterial%7Celement:geometry%7Ccolor:0x373737&style=feature:road.highway%7Celement:geometry%7Ccolor:0x3c3c3c&style=feature:road.highway.controlled_access%7Celement:geometry%7Ccolor:0x4e4e4e&style=feature:road.local%7Celement:labels.text.fill%7Ccolor:0x616161&style=feature:transit%7Celement:labels.text.fill%7Ccolor:0x757575&style=feature:water%7Celement:geometry%7Ccolor:0x000000&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x3d3d3d&size=164x132&key=AIzaSyDk4C4EBWgjuL1eBnJlu1J80WytEtSIags&scale=2'
58+
},
59+
{
60+
'name': 'Night',
61+
'style': MapStyle().night,
62+
'image': 'https://maps.googleapis.com/maps/api/staticmap?center=-33.9775,151.036&zoom=13&format=png&maptype=roadmap&style=element:geometry%7Ccolor:0x242f3e&style=element:labels%7Cvisibility:off&style=element:labels.text.fill%7Ccolor:0x746855&style=element:labels.text.stroke%7Ccolor:0x242f3e&style=feature:administrative.land_parcel%7Cvisibility:off&style=feature:administrative.locality%7Celement:labels.text.fill%7Ccolor:0xd59563&style=feature:administrative.neighborhood%7Cvisibility:off&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0xd59563&style=feature:poi.park%7Celement:geometry%7Ccolor:0x263c3f&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0x6b9a76&style=feature:road%7Celement:geometry%7Ccolor:0x38414e&style=feature:road%7Celement:geometry.stroke%7Ccolor:0x212a37&style=feature:road%7Celement:labels.text.fill%7Ccolor:0x9ca5b3&style=feature:road.highway%7Celement:geometry%7Ccolor:0x746855&style=feature:road.highway%7Celement:geometry.stroke%7Ccolor:0x1f2835&style=feature:road.highway%7Celement:labels.text.fill%7Ccolor:0xf3d19c&style=feature:transit%7Celement:geometry%7Ccolor:0x2f3948&style=feature:transit.station%7Celement:labels.text.fill%7Ccolor:0xd59563&style=feature:water%7Celement:geometry%7Ccolor:0x17263c&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x515c6d&style=feature:water%7Celement:labels.text.stroke%7Ccolor:0x17263c&size=164x132&key=AIzaSyDk4C4EBWgjuL1eBnJlu1J80WytEtSIags&scale=2'
63+
},
64+
{
65+
'name': 'Aubergine',
66+
'style': MapStyle().aubergine,
67+
'image': 'https://maps.googleapis.com/maps/api/staticmap?center=-33.9775,151.036&zoom=13&format=png&maptype=roadmap&style=element:geometry%7Ccolor:0x1d2c4d&style=element:labels%7Cvisibility:off&style=element:labels.text.fill%7Ccolor:0x8ec3b9&style=element:labels.text.stroke%7Ccolor:0x1a3646&style=feature:administrative.country%7Celement:geometry.stroke%7Ccolor:0x4b6878&style=feature:administrative.land_parcel%7Cvisibility:off&style=feature:administrative.land_parcel%7Celement:labels.text.fill%7Ccolor:0x64779e&style=feature:administrative.neighborhood%7Cvisibility:off&style=feature:administrative.province%7Celement:geometry.stroke%7Ccolor:0x4b6878&style=feature:landscape.man_made%7Celement:geometry.stroke%7Ccolor:0x334e87&style=feature:landscape.natural%7Celement:geometry%7Ccolor:0x023e58&style=feature:poi%7Celement:geometry%7Ccolor:0x283d6a&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0x6f9ba5&style=feature:poi%7Celement:labels.text.stroke%7Ccolor:0x1d2c4d&style=feature:poi.park%7Celement:geometry.fill%7Ccolor:0x023e58&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0x3C7680&style=feature:road%7Celement:geometry%7Ccolor:0x304a7d&style=feature:road%7Celement:labels.text.fill%7Ccolor:0x98a5be&style=feature:road%7Celement:labels.text.stroke%7Ccolor:0x1d2c4d&style=feature:road.highway%7Celement:geometry%7Ccolor:0x2c6675&style=feature:road.highway%7Celement:geometry.stroke%7Ccolor:0x255763&style=feature:road.highway%7Celement:labels.text.fill%7Ccolor:0xb0d5ce&style=feature:road.highway%7Celement:labels.text.stroke%7Ccolor:0x023e58&style=feature:transit%7Celement:labels.text.fill%7Ccolor:0x98a5be&style=feature:transit%7Celement:labels.text.stroke%7Ccolor:0x1d2c4d&style=feature:transit.line%7Celement:geometry.fill%7Ccolor:0x283d6a&style=feature:transit.station%7Celement:geometry%7Ccolor:0x3a4762&style=feature:water%7Celement:geometry%7Ccolor:0x0e1626&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x4e6d70&size=164x132&key=AIzaSyDk4C4EBWgjuL1eBnJlu1J80WytEtSIags&scale=2'
68+
}
69+
];
70+
27271
@override
27372
void dispose() {
27473
_customInfoWindowController.dispose();
@@ -365,7 +164,6 @@ class _HomePageState extends State<HomePage> {
365164
},
366165
onMapCreated: (GoogleMapController controller) {
367166
_controller = controller;
368-
_controller?.setMapStyle(mapStyle);
369167
_customInfoWindowController.googleMapController = controller;
370168
}
371169
),
@@ -412,6 +210,74 @@ class _HomePageState extends State<HomePage> {
412210
],
413211
)
414212
),
213+
),
214+
Positioned(
215+
bottom: 160,
216+
right: 15,
217+
child: Container(
218+
width: 35,
219+
height: 50,
220+
decoration: BoxDecoration(
221+
borderRadius: BorderRadius.circular(10),
222+
color: Colors.white
223+
),
224+
child: Column(
225+
mainAxisAlignment: MainAxisAlignment.start,
226+
children: [
227+
MaterialButton(
228+
onPressed: () {
229+
showModalBottomSheet(
230+
context: context,
231+
builder: (context) => Container(
232+
padding: EdgeInsets.all(20),
233+
color: Colors.white,
234+
height: MediaQuery.of(context).size.height * 0.3,
235+
child: Column(
236+
crossAxisAlignment: CrossAxisAlignment.start,
237+
children: [
238+
Text("Select Theme", style: TextStyle(color: Colors.black, fontWeight: FontWeight.w600, fontSize: 18),),
239+
SizedBox(height: 20,),
240+
Container(
241+
width: double.infinity,
242+
height: 100,
243+
child: ListView.builder(
244+
scrollDirection: Axis.horizontal,
245+
itemCount: _mapThemes.length,
246+
itemBuilder: (context, index) {
247+
return GestureDetector(
248+
onTap: () {
249+
_controller?.setMapStyle(_mapThemes[index]['style']);
250+
Navigator.pop(context);
251+
},
252+
child: Container(
253+
width: 100,
254+
margin: EdgeInsets.only(right: 10),
255+
decoration: BoxDecoration(
256+
borderRadius: BorderRadius.circular(10),
257+
image: DecorationImage(
258+
fit: BoxFit.cover,
259+
image: NetworkImage(_mapThemes[index]['image']),
260+
)
261+
),
262+
),
263+
);
264+
}
265+
),
266+
),
267+
],
268+
)
269+
),
270+
);
271+
},
272+
padding: EdgeInsets.all(0),
273+
shape: RoundedRectangleBorder(
274+
borderRadius: BorderRadius.circular(10),
275+
),
276+
child: Icon(Icons.layers_rounded, size: 25),
277+
),
278+
],
279+
)
280+
),
415281
)
416282
],
417283
),

0 commit comments

Comments
 (0)