Add map type toggle to place_tracker demo. (#23)

Button will toggle between normal, satellite, terrain, hybrid, and none MapTypes.

place_tracker/lib/place_map.dart

@@ -166,7 +166,7 @@ class PlaceMapState extends State<PlaceMap> {
     );
   }
 
-  void _onAddPlaceFabPressed() async {
+  void _onAddPlacePressed() async {
     Marker newMarker = await mapController.addMarker(
       MarkerOptions(
         position: LatLng(
@@ -234,6 +234,15 @@ class PlaceMapState extends State<PlaceMap> {
     }
   }
 
+  void _onToggleMapTypePressed() {
+    final MapType nextType =
+      MapType.values[(mapController.options.mapType.index + 1) % MapType.values.length];
+
+    mapController.updateMapOptions(
+      GoogleMapOptions(mapType: nextType),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -278,9 +287,10 @@ class PlaceMapState extends State<PlaceMap> {
                 onSavePressed: () => _confirmAddPlace(context),
                 onCancelPressed: _cancelAddPlace,
               ),
-              _AddPlaceFab(
+              _MapFabs(
                 visible: _pendingMarker == null,
-                onPressed: _onAddPlaceFabPressed,
+                onAddPlacePressed: _onAddPlacePressed,
+                onToggleMapTypePressed: _onToggleMapTypePressed,
               ),
             ],
           ),
@@ -307,8 +317,8 @@ class _CategoryButtonBar extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Opacity(
+    return Visibility(
-      opacity: visible ? 1.0 : 0.0,
+      visible: visible,
       child: Container(
         padding: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 14.0),
         alignment: Alignment.bottomCenter,
@@ -369,8 +379,8 @@ class  _AddPlaceButtonBar extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Opacity(
+    return Visibility(
-      opacity: visible ? 1.0 : 0.0,
+      visible: visible,
       child: Container(
         padding: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 14.0),
         alignment: Alignment.bottomCenter,
@@ -400,33 +410,49 @@ class  _AddPlaceButtonBar extends StatelessWidget {
   }
 }
 
-class _AddPlaceFab extends StatelessWidget {
+class _MapFabs extends StatelessWidget {
-  const _AddPlaceFab({
+  const _MapFabs({
     Key key,
     @required this.visible,
-    @required this.onPressed,
+    @required this.onAddPlacePressed,
+    @required this.onToggleMapTypePressed,
   }) : assert(visible != null),
-        assert(onPressed != null),
+        assert(onAddPlacePressed != null),
+        assert(onToggleMapTypePressed != null),
         super(key: key);
 
   final bool visible;
-  final VoidCallback onPressed;
+  final VoidCallback onAddPlacePressed;
+  final VoidCallback onToggleMapTypePressed;
 
   @override
   Widget build(BuildContext context) {
-    return Opacity(
+    return Container(
-      opacity: visible ? 1.0 : 0.0,
+      alignment: Alignment.topRight,
-      child: Padding(
+      margin: const EdgeInsets.only(top: 12.0, right: 12.0),
-        padding: const EdgeInsets.all(16.0),
+      child: Visibility(
-        child: Align(
+        visible: visible,
-          alignment: Alignment.topRight,
+        child: Column(
-          child: FloatingActionButton(
+          children: <Widget>[
-            onPressed: onPressed,
+            FloatingActionButton(
-            materialTapTargetSize: MaterialTapTargetSize.padded,
+              heroTag: "add_place_button",
-            backgroundColor: Colors.green,
+              onPressed: onAddPlacePressed,
-            child: const Icon(Icons.add_location, size: 36.0),
+              materialTapTargetSize: MaterialTapTargetSize.padded,
-          ),
+              backgroundColor: Colors.green,
+              child: const Icon(Icons.add_location, size: 36.0),
+            ),
+            SizedBox(height: 12.0),
+            FloatingActionButton(
+              heroTag: "toggle_map_type_button",
+              onPressed: onToggleMapTypePressed,
+              materialTapTargetSize: MaterialTapTargetSize.padded,
+              mini: true,
+              backgroundColor: Colors.green,
+              child: const Icon(Icons.layers, size: 28.0),
+            ),
+          ],
         ),
+
       ),
     );
   }