Flutter 3D打印或模型生成插件Polymaker的使用

Flutter 3D打印或模型生成插件Polymaker的使用

Polymaker 是一个用于在 Google 地图上更容易地映射多边形位置的 Flutter 插件。由于其实时显示的功能，特别是在编辑模式下，我们可以准确地知道位置，而无需通过后端系统进行猜测。

Polymaker 只需要一行代码即可运行，并返回位置的 List 值。

工具特性：

• 获取当前位置
• 进入编辑模式
• 关闭编辑模式
• 完成编辑
• 撤销到前一个位置
• 实时多边形以查看结果
• 自定义标记作为指向数字
• 点距离
• 跟踪模式：LINEAR 和 PLANAR
• 自定义地图类型

计费

要使用这些功能，你必须在 Google Cloud 中启用某些 API：

• Google Maps for Android/iOS

设置

ANDROID

在 <strong>android/app/src/main/AndroidManifest.xml</strong> 添加权限：

<uses-permission  android:name="android.permission.INTERNET"/>
<uses-permission  android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission  android:name="android.permission.ACCESS_FINE_LOCATION" />

在 <strong>android/app/src/main/AndroidManifest.xml</strong> 插入 Google Maps Key：

<application
	android:name="io.flutter.app.FlutterApplication"
	android:label="example"
	android:icon="@mipmap/ic_launcher">
	.....
	<meta-data  android:name="com.google.android.geo.API_KEY"
		android:value="YOUR API KEY"/>
	<meta-data  android:name="com.google.android.gms.version"
		android:value="@integer/google_play_services_version" />
</application>

在 <strong>android/app/build.gradle</strong> 设置你的 SDK 版本为最新：

compileSdkVersion 29
....
defaultConfig {
  ....
  targetSdkVersion 29
  ....
}

IOS

在应用代理中指定你的 API 密钥（ios/Runner/AppDelegate.m）：

#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

或者在 Swift 代码中指定你的 API 密钥（ios/Runner/AppDelegate.swift）：

import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("YOUR KEY HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

在应用程序的 Info.plist 文件中添加嵌入视图预览属性，键为 io.flutter.embedded_views_preview，值为 YES；同时定义 NSLocationWhenInUseUsageDescription：

<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs your location to test the location feature of the Google Maps location picker plugin.</string>
<key>io.flutter.embedded_views_preview</key>
<true/>

如何使用

使用 Polymaker 非常简单，只需要一行代码：

import  'package:polymaker/polymaker.dart'  as polymaker;

// 打开 Polymaker 并获取返回的 List<LatLng>
var result =  await polymaker.getLocation(context);

getLocation() 的自定义属性

示例代码

以下是一个完整的示例代码，展示了如何使用 Polymaker 插件：

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:polymaker/core/models/trackingmode.dart';
import 'package:polymaker/polymaker.dart' as polymaker;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PolyMaker Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("PolyMaker Demo"),
      ),
      body: HomeBody(),
    );
  }
}

class HomeBody extends StatefulWidget {
  [@override](/user/override)
  _HomeBodyState createState() => _HomeBodyState();
}

class _HomeBodyState extends State<HomeBody> {
  List<LatLng>? locationList;

  void getLocation() async {
    var result = await polymaker.getLocation(
      context,
      trackingMode: TrackingMode.PLANAR,
      enableDragMarker: true,
    );
    if (result != null) {
      setState(() {
        locationList = result;
      });
    }
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    locationList = [];
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            "Location Result: \n" +
                (locationList != null
                    ? locationList!
                        .map((val) => "[${val.latitude}, ${val.longitude}]\n")
                        .toString()
                    : ""),
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 18),
          ),
          SizedBox(height: 10),
          Container(
            height: 45,
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                primary: Colors.blue,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10)),
              ),
              onPressed: () => getLocation(),
              child: Text(
                "Get Polygon Location",
                style: TextStyle(fontSize: 16, color: Colors.white),
              ),
            ),
          ),
        ],
      ),
    );
  }
}