add flutter_map init

Author: FlutterWiz

.gitignore

@@ -25,3 +25,4 @@ doc/api/
 
 .flutter-plugins
 .flutter-plugins-dependencies
+lib/core/config/app_config.dart

ios/Podfile.lock

@@ -0,0 +1,22 @@
+PODS:
+  - Flutter (1.0.0)
+  - geolocator_apple (1.2.0):
+    - Flutter
+
+DEPENDENCIES:
+  - Flutter (from `Flutter`)
+  - geolocator_apple (from `.symlinks/plugins/geolocator_apple/ios`)
+
+EXTERNAL SOURCES:
+  Flutter:
+    :path: Flutter
+  geolocator_apple:
+    :path: ".symlinks/plugins/geolocator_apple/ios"
+
+SPEC CHECKSUMS:
+  Flutter: e0871f40cf51350855a761d2e70bf5af5b9b5de7
+  geolocator_apple: 9bcea1918ff7f0062d98345d238ae12718acfbc1
+
+PODFILE CHECKSUM: 819463e6a0290f5a72f145ba7cde16e8b6ef0796
+
+COCOAPODS: 1.16.2

lib/core/config/app_config_example.dart

@@ -0,0 +1,5 @@
+// You may use dotenv package instead
+
+class AppConfigExample {
+  static const String apiKey = 'Your API Key';
+}

lib/core/constants/colors.dart

@@ -3,3 +3,4 @@ import 'package:flutter/material.dart';
 const Color white = Colors.white;
 const Color black = Colors.black;
 const Color transparent = Colors.transparent;
+const Color red = Colors.red;

lib/core/init/app_widget.dart

@@ -4,7 +4,7 @@ import 'package:mapmotion_flutter/core/di/dependency_injector.dart';
 import 'package:mapmotion_flutter/presentation/blocs/application_life_cycle/application_life_cycle_cubit.dart';
 import 'package:mapmotion_flutter/presentation/blocs/location/location_cubit.dart';
 import 'package:mapmotion_flutter/presentation/blocs/permission/permission_cubit.dart';
-import 'package:mapmotion_flutter/presentation/views/home/home_view.dart';
+import 'package:mapmotion_flutter/presentation/views/map/map_view.dart';
 
 class AppWidget extends StatelessWidget {
   const AppWidget({super.key});
@@ -25,7 +25,7 @@ class AppWidget extends StatelessWidget {
       ],
       child: const MaterialApp(
         debugShowCheckedModeBanner: false,
-        home: HomeView(),
+        home: MapView(),
       ),
     );
   }

lib/presentation/views/map/map_view.dart

@@ -0,0 +1,67 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_map/flutter_map.dart';
+import 'package:latlong2/latlong.dart';
+import 'package:mapmotion_flutter/core/config/app_config.dart';
+import 'package:mapmotion_flutter/presentation/views/map/widgets/center_button.dart';
+import 'package:mapmotion_flutter/presentation/views/map/widgets/custom_marker.dart';
+
+class MapView extends StatefulWidget {
+  const MapView({Key? key}) : super(key: key);
+
+  @override
+  State<MapView> createState() => _MapViewState();
+}
+
+class _MapViewState extends State<MapView> {
+  final _mapController = MapController();
+
+  @override
+  Widget build(BuildContext context) {
+    final stadiaApiKey = AppConfig.apiKey;
+
+    return Scaffold(
+      appBar: AppBar(title: const Text('MapMotion Flutter')),
+      body: Stack(
+        alignment: Alignment.bottomCenter,
+        children: [
+          FlutterMap(
+            mapController: _mapController,
+            options: MapOptions(
+              initialCenter: const LatLng(51.509364, -0.128928),
+              initialZoom: 9.2,
+              interactionOptions: const InteractionOptions(
+                flags: InteractiveFlag.all & ~InteractiveFlag.rotate,
+              ),
+              cameraConstraint: CameraConstraint.contain(
+                bounds: LatLngBounds(const LatLng(-90, -180), const LatLng(90, 180)),
+              ),
+            ),
+            children: [
+              TileLayer(
+                // Bring your own tiles
+                urlTemplate: 'https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}@2x.png?api_key=$stadiaApiKey',
+                userAgentPackageName: 'com.example.app', // Add your app identifier
+                // And many more recommended properties!
+              ),
+              const MarkerLayer(
+                markers: [
+                  Marker(
+                    point: const LatLng(51.509364, -0.128928),
+                    width: 50,
+                    height: 50,
+                    child: CustomMarker(),
+                  ),
+                ],
+              ),
+            ],
+          ),
+          CenterButton(
+            onPressed: () {
+              _mapController.move(const LatLng(51.509364, -0.128928), 9.2);
+            },
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/presentation/views/map/widgets/center_button.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+import 'package:mapmotion_flutter/core/constants/colors.dart';
+
+class CenterButton extends StatelessWidget {
+  const CenterButton({Key? key, required this.onPressed}) : super(key: key);
+
+  final VoidCallback onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(bottom: 28),
+      child: OutlinedButton(
+        onPressed: onPressed,
+        child: const Text('Center'),
+        style: ButtonStyle(
+          backgroundColor: WidgetStateProperty.all(white),
+        ),
+      ),
+    );
+  }
+}

lib/presentation/views/map/widgets/custom_marker.dart

@@ -0,0 +1,16 @@
+import 'package:flutter/material.dart';
+import 'package:mapmotion_flutter/core/constants/colors.dart';
+
+class CustomMarker extends StatelessWidget {
+  const CustomMarker({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 50,
+      height: 50,
+      decoration: const BoxDecoration(color: red, shape: BoxShape.circle),
+      child: const Icon(Icons.person),
+    );
+  }
+}

pubspec.yaml

@@ -22,6 +22,8 @@ dependencies:
   geolocator: ^13.0.2
   equatable: ^2.0.7
   flutter_bloc: ^9.0.0
+  flutter_map: ^8.0.0
+  latlong2: ^0.9.1
   cupertino_icons: ^1.0.8
 
 dev_dependencies: