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.

This tutorial helps you start using Appwrite with your project. Before starting, make sure you have followed the Appwrite installation guide, and you have an Appwrite server instance up and running on your host machine or server.

Create Your First Appwrite Project

Go to your new Appwrite console, and click the icon in the top navigation header or on the 'Create Project' button on your console homepage. Choose a name for your project and click create to get started.

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

Appwrite 0.7 and the Appwrite Flutter SDK 0.3.0 have added support for Flutter 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.

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.

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: ^8.2.0

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

pub get 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://localhost/v1') // Your Appwrite Endpoint
    .setProject('5e8cf4f46b5e8')         // Your project ID
    .setSelfSigned(status: true);        // For self signed certificates, only use for development

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.

When connecting to a local self-hosted Appwrite project from an emulator or a mobile device, you should use the private IP of the device running your Appwrite project as the hostname of the endpoint instead of localhost. You can also use a service like ngrok to proxy the Appwrite server.

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://localhost/v1')  // Your Appwrite Endpoint
    .setProject('5e8cf4f46b5e8')          // Your project ID
    .setSelfSigned(status: true);         // For self signed certificates, only use for development

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.