In my previous article, I described the process of developing a Flutter plugin from scratch, from project creation to release. A plugin for Flutter positioning based on the German Positioning SDK will be developed for the Flutter Weather project.

Complete code in git repository github.com/KinsomyJS/l…

To apply for the key

First of all, enter the Autonavi map positioning SDK document to download the positioning SDK, and apply for the APP key according to the requirements. There is no more introduction here, the document is very detailed

Configure the environment

There is also a demo of the configuration project in the SDK documentation, but since the Flutter plugin project is not an Android project, it will be different. Roughly divided into the following steps:

1. Integrate remote dependencies

compile 'com.amap.api:location:latest.integration'
Copy the code

2. Configure the App Key

Configure the Key in the application tag of androidmanifest.xml:

<meta-data android:name="com.amap.api.v2.apikey" 
    android:value="Your Key">
</meta-data>
Copy the code

3. The declaration service

Declare the service component in the Application tag:

<service android:name="com.amap.api.location.APSService"></service>
Copy the code

4. Declare permissions

The purpose of the Flutter plugin is to isolate the implementation of the SDK native code, so that users can directly use the DART code to obtain the location information provided by the SDK. The code that the plugin interacts with the user is the interface provided in the DART file under liBS. Under the Android folder of the plugin is a complete Android project structure under which we complete the above four steps. The only difference is that configuring app Key takes the Manifestplaceholder property of Gradle and reserves it for the user to fill out.

Configure the app key and rewrite it as:

<meta-data
    android:name="com.amap.api.v2.apikey"
    ndroid:value="${LOCATION_APP_KEY}"/>
Copy the code

The LOCATION_APP_KEY can be used by users to fill in the app/build.gradle file of their Own Flutter project android project when using the plugin.

android {
    compileSdkVersion 27

    lintOptions {
       ...
    }

    defaultConfig {
        ...
        manifestPlaceholders = [
                LOCATION_APP_KEY : "b947abf0a6820efedc65d06428f14281"./// Autonavi key]}}Copy the code

So far, a positioning plug-in project based on autonavi SDK even if configured, the following is the implementation part.

implementation

The user does not need to care about the code on Android or Ios platforms. The only thing that needs to be configured for the Flutter plug-in project is the AUtonavi Open Platform app key mentioned above.

Because the SDK of a specific platform is now developed as a plug-in for the use of The Flutter app, it can be understood that normal development projects on Android or ios platforms will pass the data needed by the Flutter app. The Flutter plug-in is only encapsulated and isolated on the implementation of the specific platform. Encapsulates the DART interface, isolating the differences between the two platform implementations.

Understanding this concept, it’s easy to write a flutter plugin. Dart and Java’s interaction with Flutter and Native Interaction is described in the previous section on Flutter Exploration and Practice. Here’s a hands-on look at the source code.

The Java part

Part of Java code written in the book of the AmapLocationPlugin. Under the Java classes, it respectively MethodChannel. MethodCallHandler, EventChannel. StreamHandler. And instantiate MethodChannel and EventChannel in the registerWith method call.

final MethodChannel methodChannel = new MethodChannel(registrar.messenger(), "plugin.kinsomy.com/methodchannel");

final EventChannel eventChannel = new EventChannel(registrar.messenger(), "plugin.kinsomy.com/eventchannel");
Copy the code
  • Rewrite MethodChannel. MethodCallHandler onMethodCall method accepts the dart code method call
	@Override
	public void onMethodCall(MethodCall call, Result result) {
		if (call.method.equals("startLocation")) {
			// Start positioning
			mLocationClient.startLocation();
		} else if (call.method.equals("stopLocation")) {
			// Stop positioning
			mLocationClient.stopLocation();
		} else if (call.method.equals("getLocation")) {
			result.success(mLocation);
		} else{ result.notImplemented(); }}Copy the code
  • . Rewrite the EventChannel StreamHandler onListen, this method is carried a EventChannel EventSink instance, through the instance objects can call mEventSink. Success () to the dart transfer data stream, The location information in the plugin
        @Override
	public void onListen(Object o, EventChannel.EventSink eventSink) {
		this.mEventSink = eventSink;
	}
Copy the code
  • The location information is obtained through the AMapLocationClient of The Autonavi SDK and encapsulated as JSON string for DART call.

The dart part

The dart code is in the amap_location_plugin.dart file in the lib folder at the root of the project.

  • Instantiate MethodChannel and EventChannel in the constructor with the same channel name as in the Java code
factory AmapLocation() {
    if (_instance == null) {
      final MethodChannel methodChannel =
          const MethodChannel('plugin.kinsomy.com/methodchannel');
      final EventChannel eventChannel =
          const EventChannel('plugin.kinsomy.com/eventchannel');
      _instance = AmapLocation.private(methodChannel, eventChannel);
    }
    return _instance;
  }
Copy the code
  • Provides interface methods to start startLocation and corresponding stop location
Future<void> get startLocation =>
      _methodChannel.invokeMethod("startLocation");
Copy the code
  • The instantiated Stream receives the location data returned by the event
Stream<String> _onLocationFetched;
_onLocationFetched =
        _eventChannel.receiveBroadcastStream().map((dynamic event) => event);
Copy the code

Now that the flutter positioning plugin based on the Autonavi positioning SDK is complete, write a demo in the example to test it.

At present, this plugin is a simple version, but in the future, we hope to add a series of functions such as maps, navigation, route planning and so on

The project addressWelcome to contribute code and issue, if you like, you can give a star

Reference documentation

  1. Developing Packages & Plugins

  2. Flutter/plugins git repository

  3. Dart packages

  4. Gain insight into the Flutter Platform Channel