Docs

Getting Started for Flutter

Appwrite is a development platform that provides a powerful API and management console to get your next project up and running quickly.

Create your first project now and start building on Appwrite Cloud.

Add your Flutter Platform

To init your SDK and start interacting with Appwrite services, you need to add a new Flutter platform to your project. To add a new platform, go to your Appwrite console, choose the project you created in the step before, and click the 'Add Platform' button. Only API requests initiated from platforms added to your Appwrite project will be accepted. This prevents unauthorized apps from accessing your Appwrite project.

From the options, choose to add a new Flutter platform and add your app credentials. Appwrite Flutter SDK currently supports building apps for Android, iOS, Linux, Mac OS, Web and Windows.

If you are building your Flutter application for multiple devices, you have to follow this process for each different device.

Android

For Android first add your app name and package name, Your package name is generally the applicationId in your app-level build.gradle file. By registering your new app platform, you are allowing your app to communicate with the Appwrite API.

In order to capture the Appwrite OAuth callback url, the following activity needs to be added inside the `<application>` tag, along side the existing `<activity>` tags in your AndroidManifest.xml. Be sure to replace the [PROJECT_ID] string with your actual Appwrite project ID. You can find your Appwrite project ID in you project settings screen in your Appwrite console.

<manifest ...>
  ...
  <application ...>
    ...
    <!-- Add this inside the `<application>` tag, along side the existing `<activity>` tags -->
    <activity android:name="com.linusu.flutter_web_auth_2.CallbackActivity" android:exported="true">
      <intent-filter android:label="flutter_web_auth_2">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="appwrite-callback-[PROJECT_ID]" />
      </intent-filter>
    </activity>
  </application>
</manifest>

iOS

For iOS first add your app name and Bundle ID, You can find your Bundle Identifier in the General tab for your app's primary target in Xcode.

The Appwrite SDK uses ASWebAuthenticationSession on iOS 12+ and SFAuthenticationSession on iOS 11 to allow OAuth authentication. You have to change your iOS Deployment Target in Xcode to be iOS >= 11 to be able to build your app on an emulator or a real device.

  1. In Xcode, open Runner.xcworkspace in your app's iOS folder.
  2. To view your app's settings, select the Runner project in the Xcode project navigator. Then, in the main view sidebar, select the Runner target.
  3. Select the General tab.
  4. In Deployment Info, 'Target' select iOS 11.0

Linux

For Linux add your app name and package name, Your package name is generally the name in your pubspec.yaml file. If you cannot find the correct package name, run the application in linux, and make any request with proper exception handling, you should get the application id needed to add in the received error message.

Mac OS

For Mac OS add your app name and Bundle ID, You can find your Bundle Identifier in the General tab for your app's primary target in Xcode.

Web

To build web apps that integrate with Appwrite successfully, you must add a web platform on your Appwrite project's dashboard and list the domain your website uses to allow communication to the Appwrite API. The process is similar to the adding a web platform in the web guide.

For web in order to capture the OAuth2 callback URL and send it to the application using JavaScript postMessage(), you need to create an html file inside ./web folder of your Flutter project. For example auth.html with the following content.

<!DOCTYPE html>
<title>Authentication complete</title>
<p>Authentication is complete. If this does not happen automatically, please
close the window.
<script>
  window.opener.postMessage({
    'flutter-web-auth-2': window.location.href
  }, window.location.origin);
  window.close();
</script>

The redirection URL passed to the authentication service must be the same as the URL on which the application is running (schema, host, port if necessary), and the path must point to created HTML file, /auth.html in this case. The callbackUrlScheme parameter of the authenticate() method does not take into account, so it is possible to use a schema for native platforms in the code.

Flutter Web Cross-Domain Communication & Cookies

While running Flutter Web, make sure your Appwrite server and your Flutter client use the same top-level domain and protocol (HTTP or HTTPS) to communicate. When communicating between different domains or protocols, you may receive HTTP status error 401 because some modern browsers block cross-site or insecure cookies for enhanced privacy. In production, Appwrite allows you set multiple custom-domains for each project.

Windows

For Windows add your app name and package name, Your package name is generally the name in your pubspec.yaml file. If you cannot find the correct package name, run the application in windows, and make any request with proper exception handling, you should get the application id needed to add in the received error message.

Get Appwrite Flutter SDK

Add Appwrite SDK to your package's pubspec.yaml file (view example):

dependencies:
  appwrite: ^9.0.0

You can also install the SDK using the Dart package manager from your terminal:

flutter pub add appwrite

Init your SDK

Initialize your SDK with your endpoint and project ID, which can be found on your project settings page. It's usually a good practice to initialize the Client and make it available across the app using the state management solution of your choice, as the Client is required for making any calls to the Appwrite API.

import 'package:appwrite/appwrite.dart';

Client client = Client()
    .setEndpoint('https://cloud.appwrite.io/v1') // Your Appwrite Endpoint
    .setProject('[PROJECT_ID]');         // Your project ID

Before sending any API calls to your new Appwrite project, make sure your mobile device or emulator has network access to your Appwrite project's hostname or IP address.

Make Your First Request

After your SDK configuration is set, access any of the Appwrite services and choose any request to send. Full documentation for any service method you would like to use can be found in your SDK documentation or in the API References section.

// Register User
Account account = Account(client);

final user = await account.create(
    userId: ID.unique(),
    email: 'me@appwrite.io',
    password: 'password',
    name: 'My Name'
);

Listen to Changes

If you want to listen to changes in realtime from Appwrite, you can subscribe to a variety of channels and receive updates within milliseconds. Full documentation for Realtime can be found here.

// Subscribe to files channel
final realtime = Realtime(client);
final subscription = realtime.subscribe(['files']);

subscription.stream.listen((response) {
    if (response.events.contains('buckets.*.files.*.create') {
        // Log when a new file is uploaded
        print(response.payload);
    }
});

Full Example

import 'package:appwrite/appwrite.dart';

Client client = Client()
    .setEndpoint('https://cloud.appwrite.io/v1')  // Your Appwrite Endpoint
    .setProject('[PROJECT_ID]');          // Your project ID

Account account = Account(client);

final user = await account.create(
    userId: ID.unique(),
    email: 'me@appwrite.io',
    password: 'password',
    name: 'My Name'
);

// Subscribe to files channel
final realtime = Realtime(client);
final subscription = realtime.subscribe(['files']);

subscription.stream.listen((response) {
    if (response.events.contains('buckets.*.files.*.create')) {
        // Log when a new file is uploaded
        print(response.payload);
    }
});

Next Steps

Appwrite has many services and tools to help improve your app and speed up your development. The best way to learn how you can take advantage of them is to explore the different API references docs.