Multiview map¶
Setup¶
Prerequisites¶
Build and run¶
Go to the multiview_map
directory,
within the flutter examples directory - that is the name of this example project.
Note - the gem_kit
directory containing the Maps SDK for Flutter
should be in the plugins
directory of the example, e.g.
example_pathname/plugins/gem_kit
- see the environment setup guide above.
Replace example_pathname
with the actual example path name,
such as address_search
Download project dependencies:
flutter upgrade
run the following terminal commands in the project directory,
where the pubspec.yaml
file is located:
flutter clean
flutter pub get
Run the example:
First, verify that the ANDROID_SDK_ROOT
environment variable
is set to the root path of your android SDK.
In android/build.gradle
add the maven {}
block as shown,
within the allprojects {} block
, for both debug and release builds,
without the line numbers, those are for reference:
1allprojects {
2 repositories {
3 google()
4 mavenCentral()
5 maven {
6 url "${rootDir}/../plugins/gem_kit/android/build"
7 }
8 }
9}
in android/app/build.gradle
within the android {}
block, in the defaultConfig {}
block,
the android SDK version minSdk
must be set as shown below.
Additionally, for release builds, in android/app/build.gradle
,
within the android {}
block, add the buildTypes {}
block as shown:
Replace example_pathname
with the actual example pathname, such as center_coordinates
1android {
2 defaultConfig {
3 applicationId "com.magiclane.gem_kit.examples.example_pathname"
4 minSdk 21
5 targetSdk flutter.targetSdk
6 versionCode flutterVersionCode.toInteger()
7 versionName flutterVersionName
8 }
9 buildTypes {
10 release {
11 minifyEnabled false
12 shrinkResources false
13
14 // TODO: Add your own signing config for the release build.
15 // Signing with the debug keys for now, so `flutter run --release` works.
16 signingConfig signingConfigs.debug
17 }
18 }
19}
Then run the project:
flutter run --debug
flutter run --release
In the ios/Podfile
configuration text file, at the top, set the minimum ios
platform to 13 like this:
platform :ios, '13.0'
Then run the project:
flutter run --debug
flutter run --release
How it works¶
1import 'package:gem_kit/core.dart';
2import 'package:gem_kit/map.dart';
3import 'package:flutter/material.dart' hide Route;
The dart
material package is imported, as well as the
required gem_kit
packages.
1// Arrange MapViews in a grid with fixed number on elements on row
2body: GridView.builder(
3 physics: const NeverScrollableScrollPhysics(),
4 gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
5 itemCount: _mapViewsCount,
6 itemBuilder: (context, index) {
7 return Container(
8 clipBehavior: Clip.hardEdge,
9 decoration: BoxDecoration(
10 border: Border.all(color: Colors.black, width: 1),
11 borderRadius: BorderRadius.circular(10),
12 boxShadow: const [
13 BoxShadow(color: Colors.grey, offset: Offset(0, -2), spreadRadius: 1, blurRadius: 2)
14 ]),
15 margin: const EdgeInsets.all(5),
16 child: const GemMap());
17 }));
A GridView
is used to create a grid with maximum 2 map views per row.
Each map view is created by GemMap()
and enclosed in a Container
as a grid element.
1void _addViewButtonPressed() => setState(() {
2 if (_mapViewsCount < 4) {
3 _mapViewsCount += 1;
4 }
5 });
6void _removeViewButtonPressed() => setState(() {
7 if (_mapViewsCount > 0) {
8 _mapViewsCount -= 1;
9 }
10 });
The number of interactive map views (initially zero), to display, are stored in _mapViewsCount
and are increased/decreased interactively by the user using the functions shown above.
Each map is a separate view and can be panned/zoomed independently of the others.