feat(flutter) Flutter Documentation

capi/src/init-node/index.ts

@@ -36,6 +36,7 @@ const supportedLanguages = [
   "jsx",
   "sql",
   "groovy",
+  "dart"
 ];
 
 loadLanguages(supportedLanguages);

capi/src/init-node/valid-tags.json

@@ -55,5 +55,6 @@
   "thead": true,
   "tr": true,
   "ui-component-props": true,
-  "ul": true
+  "ul": true,
+  "small": true
 }

client/src/docs-ui/choose-integration-anchor/__snapshots__/choose-integration-anchor.spec.ts.snap

@@ -62,6 +62,12 @@ exports[`docs-choose-integration-anchor Render logic should render 1`] = `
         Ionic
       </h4>
     </docs-card>
+    <docs-card vertical="">
+      <img alt="Flutter (Preview) Logo" slot="graphic" src="/assets/integrations/flutter.svg">
+      <h4 slot="heading">
+        Flutter (Preview)
+      </h4>
+    </docs-card>
   </amplify-responsive-grid>
 </docs-choose-integration-anchor>
 `;

client/src/docs-ui/footer/__snapshots__/footer.spec.ts.snap

@@ -59,6 +59,8 @@ exports[`docs-footer Render logic should render 1`] = `
               privacy policy
             </amplify-external-link>
             .
+            <ul></ul>
+            Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.
           </span>
         </div>
       </div>

client/src/docs-ui/footer/footer.tsx

@@ -69,6 +69,8 @@ export class DocsFooter {
                   privacy policy
                 </amplify-external-link>
                 .
+                <ul/>
+                {'Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.'}
               </span>
             </div>
           </div>

client/src/docs-ui/landing-hero-cta/landing-hero-cta.tsx

@@ -44,6 +44,16 @@ export class DocsLandingHeroCTA {
               alt="Android Icon"
             />
           </docs-internal-link>
+          <docs-internal-link
+            href="/start/q/integration/flutter"
+            class="scale-up-on-hover"
+          >
+            <img
+              class={platformIcon}
+              src="/assets/integrations/flutter.svg"
+              alt="Flutter Icon"
+            />
+          </docs-internal-link>
         </div>
       </Host>
     );

client/src/utils/filter-data.ts

@@ -17,7 +17,12 @@ type FilterMetadataByOption<T extends readonly string[]> = Record<
  * platform filter constants
  */
 
-export const PLATFORM_FILTER_OPTIONS = ["js", "android", "ios"] as const;
+export const PLATFORM_FILTER_OPTIONS = [
+  "js",
+  "android",
+  "ios",
+  "flutter",
+] as const;
 
 export const platformFilterMetadataByOption: FilterMetadataByOption<typeof PLATFORM_FILTER_OPTIONS> = {
   js: {
@@ -32,6 +37,10 @@ export const platformFilterMetadataByOption: FilterMetadataByOption<typeof PLATF
     label: "iOS",
     graphicURI: "/assets/integrations/ios.svg",
   },
+  flutter: {
+    label: "Flutter (Preview)",
+    graphicURI: "/assets/integrations/flutter.svg",
+  },
 } as const;
 
 /**
@@ -74,6 +83,7 @@ export const mobileFilterMetadataByOption = {
   ios: platformFilterMetadataByOption.ios,
   "react-native": frameworkFilterMetadataByOption["react-native"],
   ionic: frameworkFilterMetadataByOption.ionic,
+  flutter: platformFilterMetadataByOption.flutter,
 };
 
 export const webFilterMetadataByOption = {

cspell.json

@@ -344,6 +344,7 @@
     "cancelHandler",
     "CannedAccessControlList.PublicRead",
     "CannedAccessControlList",
+    "cantguessthis",
     "capacityInBytes",
     "Capitan",
     "captcha",
@@ -466,6 +467,7 @@
     "DeltaSync",
     "Deltum",
     "deserialize",
+    "destinationpath",
     "details.getDestination",
     "dev",
     "devcorpuser",
@@ -549,6 +551,7 @@
     "getApplicationContext",
     "getCacheCurSize",
     "getCredentials",
+    "GETCURRENTUSER",
     "getDeliveryMedium",
     "getIdentityId",
     "getIdToken",
@@ -740,6 +743,8 @@
     "mouseover",
     "mqttv",
     "msg",
+    "mysupersecurepassword",
+    "myusername",
     "Mult",
     "multenvtest",
     "multienv",
@@ -766,6 +771,8 @@
     "mykey",
     "mylambda",
     "mynextapp",
+    "mynewpassword",
+    "myoldpassword",
     "myPrivatePrefix,",
     "myprivateprefix",
     "myPublicPrefix,",
@@ -901,6 +908,7 @@
     "proxied",
     "pseudocode",
     "publicRead",
+    "pubspec",
     "pubsub",
     "Pubsub",
     "PubSub",
@@ -1058,6 +1066,7 @@
     "SSECustomerKeyMD5",
     "SSEKMS",
     "ssn",
+    "Stateful",
     "status#createdAt",
     "statusCreatedAt",
     "Storage.get",
@@ -1264,7 +1273,12 @@
     "confirmsignupcustomflow",
     "confirmingsignincustomflow",
     "verifyingattributes",
-    "resettingpassword"
+    "resettingpassword",
+    "pubspec",
+    "Stateful",
+    "GETCURRENTUSER",
+    "amplifyconfig",
+    "Uploader"
   ],
   "flagWords": ["hte"]
 }

docs/fragments/lib/flutter.md

@@ -0,0 +1,14 @@
+<amplify-callout warning>
+
+Welcome to Flutter Developer Preview documentation.
+
+</amplify-callout>
+
+## Amplify Flutter
+
+This guide shows how to build an app using our Amplify Libraries for Flutter and the Amplify CLI toolchain.
+
+
+<docs-internal-link-button href="~/lib/project-setup/prereq.md">
+  <span slot="text">Get Started 🚀</span>
+</docs-internal-link-button>

docs/lib/analytics/autotrack.md

@@ -5,4 +5,5 @@ description: The Amplify analytics plugin records when an application opens and
 
 <inline-fragment platform="js" src="~/lib/analytics/fragments/js/autotrack.md"></inline-fragment>
 <inline-fragment platform="ios" src="~/lib/analytics/fragments/autotrack.md"></inline-fragment>
-<inline-fragment platform="android" src="~/lib/analytics/fragments/autotrack.md"></inline-fragment>
+<inline-fragment platform="android" src="~/lib/analytics/fragments/autotrack.md"></inline-fragment>
+<inline-fragment platform="flutter" src="~/lib/analytics/fragments/autotrack.md"></inline-fragment>

docs/lib/analytics/existing-resources.md

@@ -5,3 +5,4 @@ description: Configure the Amplify Libraries to use existing Amazon Pinpoint res
 
 <inline-fragment platform="android" src="~/lib/analytics/fragments/existing-resources.md"></inline-fragment>
 <inline-fragment platform="ios" src="~/lib/analytics/fragments/existing-resources.md"></inline-fragment>
+<inline-fragment platform="flutter" src="~/lib/analytics/fragments/existing-resources.md"></inline-fragment>

docs/lib/analytics/fragments/existing-resources.md

@@ -1,6 +1,6 @@
 Existing Amazon Pinpoint resources can be used with the Amplify Libraries by referencing your **Application ID** and **Region** in your `amplifyconfiguration.json` file.
 
-```json
+```dart
 {
     "analytics": {
         "plugins": {

docs/lib/analytics/fragments/flutter/getting-started/10_preReq.md

@@ -0,0 +1,3 @@
+* [Install and configure Amplify CLI](https://docs.amplify.aws/cli/start/install)
+* A Flutter application targeting Flutter SDK >= 1.20 with Amplify libraries integrated
+    * For a full example of please follow the [project setup walkthrough](~/lib/project-setup/create-application.md)

docs/lib/analytics/fragments/flutter/getting-started/20_installLib.md

@@ -0,0 +1,17 @@
+In your Flutter project directory, open **pubspec.yaml**.  
+
+> You will already have configured Amplify by following the steps in the project setup. 
+
+Add Analytics by adding these libraries into your dependencies block: 
+
+```yaml 
+dependencies:
+
+  # Should already be added during Project Setup walkthrough 
+  amplify_core:
+    path: '<1.0.0'
+
+  # Add these lines in `dependencies` 
+  amplify_analytics_pinpoint:
+    path: '<1.0.0'
+```

docs/lib/analytics/fragments/flutter/getting-started/30_initAnalytics.md

@@ -0,0 +1,37 @@
+To initialize the Amplify Auth and Analytics categories call the `Amplify.addPlugin()` method for each category. To complete initialization call `Amplify.configure()`.
+
+Add the following code to the `initState` method 
+
+
+```dart
+Amplify.addPlugin(new AWSCognitoAuthPlugin());
+Amplify.addPlugin(new AmplifyAnalyticsPinpointPlugin());
+```
+
+(VERIFY, To be determined) Make sure that the amplifyconfiguration.dart file generated in the project setup is included and sent to Amplify.configure: 
+
+```dart 
+import 'amplifyconfiguration.dart';
+
+Amplify.configure( amplifyConfig )
+```
+
+Your class will look like this:
+
+```dart
+import 'amplifyconfiguration.dart';
+
+class MyAmplifyApp extends StatefulWidget {
+
+    @override
+    void initState() {
+        super.initState(); 
+
+        Amplify.addPlugin(new AWSCognitoAuthPlugin());
+        Amplify.addPlugin(new AWSPinpointAnalyticsPlugin(this));
+
+        Amplify.configure( amplifyConfig ); 
+
+    }
+}
+```

docs/lib/analytics/fragments/flutter/getting-started/40_record.md

@@ -0,0 +1,12 @@
+To record an event, create an `AnalyticsEvent` and call `Amplify.Analytics.recordEvent()`:
+
+```dart
+AnalyticsEvent event = AnalyticsEvent("test");
+
+event.properties.addBoolProperty("boolKey", true);
+event.properties.addDoubleProperty("doubleKey", 10.0);
+event.properties.addIntProperty("intKey", 10);
+event.properties.addStringProperty("stringKey", "stringValue");
+
+Amplify.Analytics.recordEvent(event: event);
+```

docs/lib/analytics/fragments/flutter/identifyuser.md

@@ -0,0 +1,28 @@
+This call sends information that you have specified about a user to Amazon Pinpoint. This could be for an unauthenticated (guest) or an authenticated user.
+
+You can get the current user's ID from the Amplify Auth category as shown below. Be sure you have it added and setup per the Auth category documentation.
+
+If you have asked for location access and received permission, you can also provide that in `AnalyticsUserProfileLocation`
+
+
+```dart
+
+AnalyticsUserProfileLocation location = new AnalyticsUserProfileLocation();
+    location.latitude = 47.606209;
+    location.longitude = -122.332069;
+    location.postalCode = "98122";
+    location.city = "Seattle";
+    location.region = "WA";
+    location.country = "USA";
+
+AnalyticsProperties properties = new AnalyticsProperties();
+    properties.addStringProperty("phoneNumber", "+11234567890"); 
+    properties.addIntProperty("age", 25); 
+
+AnalyticsUserProfile userProfile = new AnalyticsUserProfile();
+    userProfile.name = username;
+    userProfile.email = "name@example.com";
+    userProfile.location = location; 
+
+Amplify.Analytics.identifyUser(userId: userId, userProfile: profile);
+```