Flutter网格表单插件apptive_grid_form的使用

安装

在使用apptive_grid_form之前，你需要在pubspec.yaml文件中添加依赖：

dependencies:
  apptive_grid_form: ^版本号

然后运行flutter pub get来安装该包。

设置

为了使用任何ApptiveGrid功能，你必须将你的应用包装在一个ApptiveGrid小部件中：

import 'package:apptive_grid_core/apptive_grid_core.dart';

void main() {
  runApp(
    ApptiveGrid(
      options: ApptiveGridOptions(
        environment: ApptiveGridEnvironment.alpha,
      ),
      child: MyApp(),
    ),
  );
}

额外配置

由于apptive_grid_form使用了某些包和插件来提供特定的功能，因此需要进行一些额外的配置。

iOS 权限设置

如果你的应用需要访问附件或地理定位表单条目，则需要向你的应用的ios/Runner/Info.plist文件中添加以下条目：

<key>UIBackgroundModes</key>
<array>
   <string>fetch</string>
   <string>remote-notification</string>
</array>
<key>UISupportsDocumentBrowser</key>
<true/>
<key>LSSupportsOpeningDocumentsInPlace</key>
<true/>
<key>NSLocationWhenInUseUsageDescription</key>
<string>获取当前地理位置用于地理定位表单</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>用于从图库中选择图片的附件表单</string>
<key>NSCameraUsageDescription</key>
<string>用于通过相机拍摄照片的附件表单</string>
<key>NSMicrophoneUsageDescription</key>
<string>用于录制视频的附件表单</string>

此外，你还需要向你的podfile添加以下宏，以确保Apple接受你的应用提交：

PERMISSION_CAMERA=1
'PERMISSION_PHOTOS=1'
'PERMISSION_LOCATION=1'

Android 权限设置

如果你的应用需要访问地理位置信息，需要在AndroidManifest.xml文件中添加以下权限：

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

如果你的应用需要访问附件信息（如照片或视频），需要在AndroidManifest.xml文件中添加以下权限：

<uses-permission android:name="android.permission.CAMERA" />

添加 Google Maps 和 Places API 密钥

如果你的应用需要使用地理定位功能，你需要为Android和iOS应用添加Google Maps密钥。首先，在ios/Runner/AppDelegate.swift文件中添加以下代码：

import UIKit
import Flutter
import GoogleMaps

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

然后，在AndroidManifest.xml文件中添加以下代码：

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>

对于更多详细信息和创建密钥的指南，请参阅google_maps_flutter的文档。

如果你的应用需要通过名称搜索位置或逆地理编码，你需要添加一个Google Places API密钥。在ApptiveGrid小部件中添加如下配置：

ApptiveGrid(
    formWidgetConfigurations: [
      const GeolocationFormWidgetConfiguration(
        placesApiKey: 'YOUR_PLACES_API_KEY',
      ),
    ],
    child: MyApp(),
)

确保API密钥具有Places API（按名称搜索）和/或Geocoding API（逆地理编码）的权限。

对于更多详细信息和创建密钥的指南，请参阅google_maps_webservice的文档。

显示表单

为了在你的应用中显示一个ApptiveGrid表单，你可以使用ApptiveGridForm小部件：

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: ApptiveGridForm(
      uri: Uri.parse('YOUR_FORM_URI'),
    ),
  );
}

这可以用于空表单和预填充表单。

自定义

表单会根据应用程序的主题进行调整，以与应用程序的其余部分融合。你可以通过向ApptiveGridForm提供更多的参数来自定义标题样式和内边距：

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: ApptiveGridForm(
      formUri: FormUri.fromUri('YOUR_FORM_URI'),
      titleStyle: Theme.of(context).textTheme.headline6,
      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 0),
      titlePadding: const EdgeInsets.all(16),
    ),
  );
}

完整示例

下面是一个完整的示例代码，展示了如何在应用中使用apptive_grid_form插件：

// ignore_for_file: public_member_api_docs

import 'package:apptive_grid_form/apptive_grid_form.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    ApptiveGrid(
      options: ApptiveGridOptions(
        environment: ApptiveGridEnvironment.alpha,
        attachmentConfigurations: attachmentConfigurationMapFromConfigString(
          'YOUR_ATTACHMENT_CONFIGURATION',
        ),
        authenticationOptions: const ApptiveGridAuthenticationOptions(
          autoAuthenticate: true,
          redirectScheme: 'apptivegrid',
        ),
        formWidgetConfigurations: [
          const GeolocationFormWidgetConfiguration(
            placesApiKey: 'YOUR_PLACES_API_KEY',
          ),
        ],
      ),
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ApptiveGrid',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('ApptiveGrid Forms'),
        ),
        body: ApptiveGridForm(
          uri: Uri.parse(
            'YOUR_FORM_URI',
          ),
          titleStyle: Theme.of(context).textTheme.titleLarge,
          contentPadding:
              const EdgeInsets.symmetric(horizontal: 16, vertical: 0),
          titlePadding: const EdgeInsets.all(16),
        ),
      ),
    );
  }
}