Create custom bridge for AWS AppSync in Flutter
Switch branches/tags
Nothing to show
Clone or download

Flutter AppSync Demo

Create custom bridge for AWS AppSync


This project is an example of using Flutter with the AWS AppSync solution. It is configured in state UE CENTRAL 1 (Francfort)


AWS AppSync automatically updates web and mobile application data in real time, and offline user data is updated as soon as it is reconnected. If you use AppSync as a simple GraphQL API without the subscribe feature then it would be better to use the following plugin: :

The bridge is based on the official documentation of the AppSync SDK.

AWS AppSync SDK Android :

AWS AppSync SDK iOS :

If you want more information on the development of a flutter plugin here is an official link:

To make this example work, AppSync is configured with the following GraphQL schema :

GraphQL schema

The GraphQL schema:

type Message {
	id: ID!
	content: String!
	sender: String!

type Mutation {
	newMessage(content: String!, sender: String!): Message

type Query {
	getMessages: [Message]

type Subscription {
	subscribeToNewMessage: Message
		@aws_subscribe(mutations: ["newMessage"])

schema {
	query: Query
	mutation: Mutation
	subscription: Subscription

To create your GraphQL schema for AppSync, see the link


AppSync will be secured by API Key.

Data Source

The Data Source used by AppSync is a lambda. Here is this example here is a simplified version :

var incrementId = 0;
var messages = [];

exports.handler = async (event, context, callback) => {
    switch (event.field) {
        // match with Data Template resolver
        case 'getMessages':
            getMessages(event, context, callback);
        case 'newMessage':
            newMessage(event, context, callback);
        default: throw new Error("unsupported");

function getMessages(event, context, callback) {
    callback(null, messages);

async function newMessage(event, context, callback) {
    const args = event.arguments;
    const msg = {
        id: (++incrementId).toString(),
        content: args.content,
        sender: args.sender,
        conversationId: args.conversationId
    callback(null, msg);

To link the GraphQL schema methods to the lambda refer to the following link :


Request template resolver for NewMessage Mutation :

    "version" : "2017-02-28",
    "operation": "Invoke",
    "payload": {
    	"field" : "newMessage",
        "arguments": $util.toJson($context.args)

Request template resolver for GetMessages Query :

    "version" : "2017-02-28",
    "operation": "Invoke",
    "payload": {
    	"field" : "getMessages",
        "arguments": $util.toJson($context.args)

Configuration sample

To configure AppSync in the project, modify the constants of the file /lib/constants.dart


Custom Configuration in your project

1. Android

Step 1: add aws android SDK classpath

// android/build.gradle
buildscript {

    dependencies {
        classpath 'com.amazonaws:aws-android-sdk-appsync-gradle-plugin:2.6.17'


Step 2: Plugin plugin and SDK

// android/app/build.gradle

apply plugin: 'com.amazonaws.appsync'

dependencies {
    implementation 'com.amazonaws:aws-android-sdk-appsync:2.6.17'
    implementation 'org.eclipse.paho:org.eclipse.paho.client.mqttv3:1.2.0'
    implementation ''
    implementation ''

Step 3: add schema and request GraphQL

Copy your files in :

/android/app/src/main/graphql/ /android/app/src/main/graphql/

Step 4: Configure Android Manifest

<manifest xmlns:android=""

    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
        <!-- ... -->
        <!-- Service paho for retrieve all data in background -->
        <service android:name="" />

Step 5: Generation GraphQL models

Launch gradle command :

# /android
./gradle generateApolloClasses

2. iOS

Step 1: add AWS SDK in your Podfile

target 'Runner' do
  pod 'AWSAppSync', '~> 2.6.7'

Step 2: Retrieve all dependencies

pod install

Caution: Configure your deployment target at 9.0 (Runner.xcworkspace)

Step 3: add schema and request GraphQL

Copy your files in :

/iOS/*.graphql /iOS/schema.json

For generate models you have to use the npm library aws-appsync-codegen (

Launch the command :

# ios/
aws-appsync-codegen generate *.graphql --schema schema.json --output ./Runner/AppSyncAPI.swift