add instructions

This commit is contained in:
Freek van de Ven 2021-09-29 16:54:22 +02:00
parent 7e789a2789
commit b630b54519
2 changed files with 142 additions and 26 deletions

152
README.md
View file

@ -11,29 +11,153 @@ and the Flutter guide for
[developing packages and plugins](https://flutter.dev/developing-packages).
-->
TODO: Put a short description of the package here that helps potential users
know whether this package might be useful for them.
# Track and Trace with Google Maps For Flutter
A Flutter packages that provides a wrapper around a [Google Maps](https://developers.google.com/maps/) widget.
## Features
TODO: List what your package can do. Maybe include images, gifs, or videos.
* Show a Google Map with 2 markers on it
* Calculate a Route between the two markers
* Update the route and route information with a set time interval
* Retrieve the travel distance and time
* Use custom styling for the map, markers and line
* Automatically center the view between the two markers
* Make all Google Maps settings available through the GoogleTrackTraceMap
## Getting started
TODO: List prerequisites and provide or point to information on how to
start using the package.
Because this package uses Google Maps for the Map and the route calculation you need to follow the Flutter Google Maps guide:
## Usage
* Get an API key at <https://cloud.google.com/maps-platform/>.
TODO: Include short and useful examples for package users. Add longer examples
to `/example` folder.
* Enable Google Map SDK for each platform.
* Go to [Google Developers Console](https://console.cloud.google.com/).
* Choose the project that you want to enable Google Maps on.
* Select the navigation menu and then select "Google Maps".
* Select "APIs" under the Google Maps menu.
* To enable Google Maps for Android, select "Maps SDK for Android" in the "Additional APIs" section, then select "ENABLE".
* To enable Google Maps for iOS, select "Maps SDK for iOS" in the "Additional APIs" section, then select "ENABLE".
* Make sure the APIs you enabled are under the "Enabled APIs" section.
```dart
const like = 'sample';
For more details, see [Getting started with Google Maps Platform](https://developers.google.com/maps/gmp-get-started).
### Android
1. Set the `minSdkVersion` in `android/app/build.gradle`:
```groovy
android {
defaultConfig {
minSdkVersion 20
}
}
```
## Additional information
This means that app will only be available for users that run Android SDK 20 or higher.
TODO: Tell users more about the package: where to find more information, how to
contribute to the package, how to file issues, what response they can expect
from the package authors, and more.
2. Specify your API key in the application manifest `android/app/src/main/AndroidManifest.xml`:
```xml
<manifest ...
<application ...
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="YOUR KEY HERE"/>
```
### iOS
This plugin requires iOS 9.0 or higher. To set up, specify your API key in the application delegate `ios/Runner/AppDelegate.m`:
```objectivec
#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[GMSServices provideAPIKey:@"YOUR KEY HERE"];
[GeneratedPluginRegistrant registerWithRegistry:self];
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end
```
Or in your swift code, specify your API key in the application delegate `ios/Runner/AppDelegate.swift`:
```swift
import UIKit
import Flutter
import GoogleMaps
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
GMSServices.provideAPIKey("YOUR KEY HERE")
GeneratedPluginRegistrant.register(with: self)
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
```
## Usage
```dart
class TrackTraceDemo extends StatefulWidget {
const TrackTraceDemo({Key? key}) : super(key: key);
@override
State<TrackTraceDemo> createState() => _TrackTraceDemoState();
}
class _TrackTraceDemoState extends State<TrackTraceDemo> {
TrackTraceController? controller;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: (controller == null || controller!.route == null)
? const Text('TrackTrace example')
: Text(controller!.route!.duration.toString() +
' seconds, distance: ' +
(controller!.route!.distance / 1000).toString() +
' km')),
body: GoogleTrackTraceMap(
startPosition: const Marker(
markerId: MarkerId('Start location'),
position: LatLng(52.356057, 4.897540),
),
destinationPosition: const Marker(
markerId: MarkerId('Destination location'),
position: LatLng(52.364709, 4.877157)),
googleAPIKey: '', // put your own API key here
travelMode: TravelMode.bicycling,
routeUpdateInterval: 60,
timerPrecision: TimePrecision.everySecond,
zoomGesturesEnabled: true,
line: const Polyline(
polylineId: PolylineId('test route'),
color: Colors.purple,
width: 7,
),
onMapCreated: (ctr) => {
controller = ctr,
ctr.addListener(() {
setState(() {});
}),
},
),
);
}
}
```
See the `example` directory for a complete sample app.

View file

@ -1,16 +1,8 @@
# tracktrace_example
# google_track_trace
A new Flutter project.
Demonstrates how to use the google_track_trace package with an Amsterdam example.
## Getting Started
This project is a starting point for a Flutter application.
A few resources to get you started if this is your first Flutter project:
- [Lab: Write your first Flutter app](https://flutter.dev/docs/get-started/codelab)
- [Cookbook: Useful Flutter samples](https://flutter.dev/docs/cookbook)
For help getting started with Flutter, view our
[online documentation](https://flutter.dev/docs), which offers tutorials,
samples, guidance on mobile development, and a full API reference.
For help getting started with Flutter, view our online
[documentation](https://flutter.dev/).