apptive_grid_form

Description:

apptive grid form

ApptiveGrid Form #

A Flutter Package to display ApptiveGrid Forms inside a Flutter App
Setup #
In order to use any ApptiveGrid Feature you must wrap your App with a ApptiveGrid Widget
import 'package:apptive_grid_core/apptive_grid_core.dart';

void main() {
runApp(
ApptiveGrid(
options: ApptiveGridOptions(
environment: ApptiveGridEnvironment.alpha,
),
child: MyApp(),
),
);
}
copied to clipboard
Additional Configurations #
There are some steps necessary because apptive_grid_form uses packages and plugins to provide certain functionality.
iOS Entitlements
Add the following entries to your app's ios/Runner/Info.plist if not there yet. Used for Attachments and Geolocation Form entries.
Note that the Entries starting with NS are mandatory for releasing even if you are not using Attachments/Geolocations in your forms
<key>UIBackgroundModes</key>
<array>
<string>fetch</string>
<string>remote-notification</string>
</array>
<key>UISupportsDocumentBrowser</key>
<true/>
<key>LSSupportsOpeningDocumentsInPlace</key>
<true/>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Get your current location in Geolocation Forms</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Used for picking images from gallery in Attachments in Forms</string>
<key>NSCameraUsageDescription</key>
<string>Used for taking pictures with the camera in Attachments in Forms</string>
<key>NSMicrophoneUsageDescription</key>
<string>Used for recording videos in Attachments in Forms</string>
copied to clipboard
You need to add macros to your podfile to make sure Apple accepts your app submission.
Follow the guide in Setup/iOS and make sure you remove the # character for the following permissions

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

Android Permissions
If you are using Geolocation in Forms add the following permissions to your AndroidManifest
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
copied to clipboard
If you are using Attachments in Forms add the following permission to your AndroidManifest
<uses-permission android:name="android.permission.CAMERA" />
copied to clipboard
Google Maps and Places Api Key
If you are using Geolocation in Forms you need to add a Google Maps Key to your Android and iOS App
ios/Runner/App
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)
}
}
copied to clipboard
AndroidManifest
<manifest ...
<application ...
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="YOUR KEY HERE"/>
copied to clipboard
For more information and a guide to create a key check the documentation of google_maps_flutter
In order to provide the ability so search for locations by names and reverse geocode locations on a map to an address you need to add a Google Places Api Key.
Add it to your base ApptiveGrid Widget like this:
ApptiveGrid(
formWidgetConfigurations: [
const GeolocationFormWidgetConfiguration(
placesApiKey: 'YOUR_PLACES_API_KEY',
),
],
child: MyApp(),
)
copied to clipboard
Make sure the Api Key has the permission for Places API (Search by Name) and/or Geocoding API (Reverse Geocoding)
For more information and a guide to create a key check the documentation of google_maps_webservice
Showing a Form #
In order to display an ApptiveGrid Form in your App use the ApptiveGridForm Widget
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ApptiveGridForm(
uri: Uri.parse('YOUR_FORM_URI'),
),
);
}
copied to clipboard
This works with empty forms and with pre-filled Forms.
Customization #
The Form will adjust to the App Theme to blend into the rest of the App. You can adjust the Title Style and the Padding by providing more arguments to ApptiveGridForm.
@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),
),
);
}
copied to clipboard