volunteers

A new Flutter project to show volunteer information on a map as proof of concept.

flutter_map widget is used in the app to display a Leaflet map provided by raster sources. Potentially swtich to flutter-mapbox-gl widget for vector sources but not until the clustering support is available.

OS Maps API is applied to request map data. Open data for EPSG:3857 is available from zoom level 7 to 16. For zoom level above 17, please upgrade to Premium plan, or the imagery will become blurry.

Enviroment Variables

• OS_MAPS_API_KEY - a valid OS DataHub MAPS API key
• OS_MAP_STYLE - an OS map style layer, e.g. Road, Outdoor or Light

Install Flutter

To install and run Flutter development environment, follow the official online documentation to get started.

Check if there are any dependencies you need to install to complete the setup:

$ flutter doctor -v

Add Firebase to the app

Web

Update the web/firebase-config.js with your firebaseConfig.

Android

Put google-services.json at the Android app module root directory.

iOS

Open ios/Runner.xcworkspace and add the GoogleService-Info.plist file to Runner folder.

Run the mobile app

Check running devices:

$ flutter devices

Run on a single device (you can find deviceId at the result of the second column from the above command):

$ flutter run -d <deviceId> -v --dart-define=OS_MAPS_API_KEY=<INSERT_YOUR_API_KEY_HERE> --dart-define=OS_MAP_STYLE=<INSERT_OS_MAP_STYLE_HERE>

Press r in terminal to perform Hot reload. Change deviceId to all to run on multiple devices.

If you are debugging in VS Code, follow this flutter wiki page to create a launch.json, and then add --dart-define values in the args field for configurations.

The launch.json should look something like this:

{
	"version": "0.2.0",
	"configurations": [
		{
			"name": "Current Device",
			"request": "launch",
			"type": "dart"
		},
		{
			"name": "Android",
			"request": "launch",
			"type": "dart",
			"deviceId": "<INSERT_YOUR_DEVICE_ID>",
			"args": [
				"-v",
				"--dart-define",
				"OS_MAPS_API_KEY=<INSERT_YOUR_API_KEY_HERE>",
				"--dart-define",
				"OS_MAP_STYLE=<INSERT_OS_MAP_STYLE_HERE>"
			]
		},
		{
			"name": "iPhone",
			"request": "launch",
			"type": "dart",
			"deviceId": "<INSERT_YOUR_DEVICE_ID>",
			"args": [
				"-v",
				"--dart-define",
				"OS_MAPS_API_KEY=<INSERT_YOUR_API_KEY_HERE>",
				"--dart-define",
				"OS_MAP_STYLE=<INSERT_OS_MAP_STYLE_HERE>"
			]
		},
	],
	"compounds": [
		{
			"name": "All Devices",
			"configurations": ["Android", "iPhone"],
		}
	]
}

Run the web app

Run the following commands to use the latest version of the Flutter SDK:

$ flutter channel stable
$ flutter upgrade

To serve your app from localhost in Chrome (web):

$ flutter run -d chrome --web-hostname 0.0.0.0 --web-port 12345 -v --dart-define=OS_MAPS_API_KEY=<INSERT_YOUR_API_KEY_HERE> --dart-define=OS_MAP_STYLE=<INSERT_OS_MAP_STYLE_HERE> --release

If you are debugging in VS Code, add the following snippet to the launch.json configurations:

{
	"name": "Chrome",
	"request": "launch",
	"type": "dart",
	"deviceId": "chrome",
	"args": [
		"-v",
		"--web-hostname",
		"0.0.0.0",
		"--web-port",
		"12345",
		"--dart-define",
		"OS_MAPS_API_KEY=<INSERT_YOUR_API_KEY_HERE>",
		"--dart-define",
		"OS_MAP_STYLE=<INSERT_OS_MAP_STYLE_HERE>",
		"--release" // Fix: failed to establish connection
	]
},

Once saved, the configuration Chrome will show up in the drop-down at the top of the Debug side bar.

You can also test the web app on your mobile browser in the same Local Area Network (LAN):

$ http://your-local-IP-address:12345

In order to access location, use ngrok to create a public HTTPS url as getCurrentPosition() and watchPosition() are deprecated on insecure origins.

$ ngrok http 12345

Besides, test the web build locally before deploy to Firebase hosting:

$ flutter build web -v --dart-define=OS_MAPS_API_KEY=<INSERT_YOUR_API_KEY_HERE> --dart-define=OS_MAP_STYLE=<INSERT_OS_MAP_STYLE_HERE>
$ firebase emulators:start

Run the tests

Execute the following command:

$ flutter test

You can use --coverage flag to generate the coverage report for Coveralls or Codecov. If you want to view the report locally, install lcov $ brew install lcov and use genhtml command:

$ genhtml coverage/lcov.info -o coverage/html

Troubleshooting

Soical Login

Google Sign-in for iOS requires a custom URL Scheme to be added to your project.

Google Sign-in for Android requires you to provide a SHA-1. You can easily get the SHA-1 of your signing certificate using the Gradle signingReport command:

$ cd android
$ ./gradlew signingReport