Search Category¶
Setup¶
Prerequisites¶
Build and run¶
Go to the search_category
directory within the Flutter examples directory.
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';
4
5void main() async {
6 const projectApiToken = String.fromEnvironment('GEM_TOKEN');
7 await GemKit.initialize(appAuthorization: projectApiToken);
8 runApp(const MyApp());
9}
10
11class MyApp extends StatelessWidget {
12 const MyApp({super.key});
13
14 @override
15 Widget build(BuildContext context) {
16 return const MaterialApp(
17 debugShowCheckedModeBanner: false,
18 title: 'Search Category',
19 home: MyHomePage(),
20 );
21 }
22}
23
24class MyHomePage extends StatefulWidget {
25 const MyHomePage({super.key});
26
27 @override
28 State<MyHomePage> createState() => _MyHomePageState();
29}
30
31class _MyHomePageState extends State<MyHomePage> {
32 late GemMapController _mapController;
33
34 @override
35 void dispose() {
36 GemKit.release();
37 super.dispose();
38 }
39
40 @override
41 Widget build(BuildContext context) {
42 return Scaffold(
43 appBar: AppBar(
44 backgroundColor: Colors.deepPurple[900],
45 title: const Text("Search Category", style: TextStyle(color: Colors.white)),
46 actions: [
47 IconButton(
48 onPressed: () => _onSearchButtonPressed(context),
49 icon: const Icon(Icons.search, color: Colors.white),
50 ),
51 ],
52 ),
53 body: GemMap(
54 onMapCreated: _onMapCreated,
55 ),
56 );
57 }
58
59 void _onMapCreated(GemMapController controller) {
60 _mapController = controller;
61 }
62
63 // Custom method for navigating to search screen
64 void _onSearchButtonPressed(BuildContext context) async {
65 final x = MediaQuery.of(context).size.width / 2;
66 final y = MediaQuery.of(context).size.height / 2;
67 final mapCoords = _mapController.transformScreenToWgs(XyType(x: x.toInt(), y: y.toInt()));
68
69 final result = await Navigator.of(context).push(MaterialPageRoute<dynamic>(
70 builder: (context) => SearchPage(controller: _mapController, coordinates: mapCoords!),
71 ));
72
73 if (result is Landmark) {
74 _mapController.activateHighlight([result], renderSettings: RenderSettings());
75 _mapController.centerOnCoordinates(result.coordinates);
76 }
77 }
78}
In this example, you learned how to enable searches for landmarks using the gem_kit package.