<?php
$platforms = $this->getParam('platforms');
$versions = [];

foreach($platforms['client']['sdks'] as $lang) {
    $key = $lang['key'] ?? '';
    $version = $lang['version'] ?? '';

    if(!empty($key)) {
        $versions[$key] = $version;
    }
}

$version = (isset($versions['flutter'])) ? $versions['flutter'] : '';
?>
<p>Appwrite is a development platform that provides a powerful API and management console to get your next project up and running quickly.</p>

<p><a target="_blank" rel="noopener" href="https://cloud.appwrite.io/">Create your first project now</a> and start building on Appwrite Cloud.</p>

<h2><a href="/docs/getting-started-for-flutter#addYourPlatform" id="addYourPlatform">Add your Flutter Platform</a></h2>

<p>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.</p>

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

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

<h3><a href="/docs/getting-started-for-flutter#android" id="android">Android</a></h3>

<p>For <b>Android</b> first add your app <u>name</u> and <u>package name</u>, Your package name is generally the <b>applicationId</b> in your app-level <a href="https://github.com/appwrite/playground-for-flutter/blob/master/android/app/build.gradle#L41" target="_blank" rel="noopener">build.gradle</a> file. By registering your new app platform, you are allowing your app to communicate with the Appwrite API.</p>

<p>In order to capture the Appwrite OAuth callback url, the following activity needs to be added inside the `&lt;application&gt;` tag, along side the existing `&lt;activity&gt;` tags in your <a href="https://github.com/appwrite/playground-for-flutter/blob/master/android/app/src/main/AndroidManifest.xml" target="_blank" rel="noopener">AndroidManifest.xml</a>. Be sure to replace the <b>[PROJECT_ID]</b> string with your actual Appwrite project ID. You can find your Appwrite project ID in you project settings screen in your Appwrite Console.</p>

<div class="ide" data-lang="html" data-lang-label="XML">
    <pre class="line-numbers"><code class="prism language-xml" data-prism><?php echo $this->escape('<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>'); ?>
</code></pre>
</div>

<h3><a href="/docs/getting-started-for-flutter#iOS" id="iOS">iOS</a></h3>

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

<p>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.</p>

<ol class="margin-top margin-bottom-large">
  <li class="margin-bottom-small">In Xcode, open Runner.xcworkspace in your app's iOS folder.
  <li class="margin-bottom-small">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.</li>
  <li class="margin-bottom-small">Select the General tab.</li>
  <li class="margin-bottom-small">In Deployment Info, 'Target' select iOS 11.0</li>
</ol>

<h3><a href="/docs/getting-started-for-flutter#linux" id="linux">Linux</a></h3>

<p>For <b?>Linux</b> add your app <u>name</u> and <u>package name</u>, Your package name is generally the <b>name</b> in your <a href="https://github.com/appwrite/playground-for-flutter/blob/master/pubspec.yaml#L1" target="_blank" rel="noopener">pubspec.yaml</a> 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.</p>

<h3><a href="/docs/getting-started-for-flutter#macOS" id="macOS">macOS</a></h3>

<p>For <b>macOS</b> 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.</p>
<p>The Appwrite SDK uses ASWebAuthenticationSession on macOS 10.15+ to allow OAuth authentication. You have to change your macOS Deployment Target in Xcode to be macOS >= 10.15 to be able to build your app for macOS.</p>

<h3><a href="/docs/getting-started-for-flutter#web" id="web">Web</a></h3>

<p>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 <a href="/docs/getting-started-for-web#addPlatform">adding a web platform</a> in the web guide.</p>

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

<div class="ide" data-lang="html" data-lang-label="html">
    <pre class="line-numbers"><code class="prism language-html" data-prism><?php echo $this->escape('<!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>'); ?>
</code></pre>
</div>

<p>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.</p>

<div class="notice">
  <h2>Flutter Web Cross-Domain Communication & Cookies</h2>
  <p>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 <a href="/docs/custom-domains">custom-domains</a> for each project.</p>
</div>


<h3><a href="/docs/getting-started-for-flutter#windows" id="windows">Windows</a></h3>

<p>For <b>Windows</b> add your app <u>name</u> and <u>package name</u>, Your package name is generally the <b>name</b> in your <a href="https://github.com/appwrite/playground-for-flutter/blob/master/pubspec.yaml#L1" target="_blank" rel="noopener">pubspec.yaml</a> 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.</p>


<h2><a href="/docs/getting-started-for-flutter#getSDK" id="getSDK">Get Appwrite Flutter SDK</a></h2>

<p>Add <a href="https://pub.dev/packages/appwrite" target="_blank" rel="noopener">Appwrite SDK</a> to your package's pubspec.yaml file <a href="https://github.com/appwrite/playground-for-flutter/blob/master/pubspec.yaml" target="_blank" rel="noopener">(view example)</a>:</p>

<div class="ide margin-bottom" data-lang="yaml" data-lang-label="yaml">
    <pre class="line-numbers"><code class="prism language-yaml" data-prism>dependencies:
  appwrite: ^<?php echo $this->escape($version); ?>
</code></pre>
</div>

<p>You can also install the SDK using the <a href="https://pub.dev/" target="_blank" rel="noopener">Dart package manager</a> from your terminal:</p>

<div class="ide margin-bottom" data-lang="bash" data-lang-label="Bash">
  <pre class="line-numbers"><code class="prism language-bash" data-prism>flutter pub add appwrite</code></pre>
</div>

<h2><a href="/docs/getting-started-for-flutter#initSDK" id="initSDK">Init your SDK</a></h2>

<p>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.</p>

<div class="ide" data-lang="dart" data-lang-label="Flutter SDK">
  <pre class="line-numbers"><code class="prism language-dart" data-prism>import 'package:appwrite/appwrite.dart';

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

<p>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.</p>

<h2><a href="/docs/getting-started-for-flutter#makeRequest" id="makeRequest">Make Your First Request</a></h2>

<p>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.</p>

<div class="ide" data-lang="dart" data-lang-label="Flutter SDK">
  <pre class="line-numbers"><code class="prism language-dart" data-prism>// Register User
Account account = Account(client);

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

<h2><a href="/docs/getting-started-for-flutter#listenToChanges" id="listenToChanges">Listen to Changes</a></h2>

<p>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 <a href="/docs/realtime">here</a>.</p>

<div class="ide" data-lang="dart" data-lang-label="Flutter SDK">
  <pre class="line-numbers"><code class="prism language-dart" data-prism>// 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);
    }
});
</code></pre>
</div>

<h2><a href="/docs/getting-started-for-flutter#fullExample" id="fullExample">Full Example</a></h2>
<div class="ide" data-lang="dart" data-lang-label="Flutter SDK">
  <pre class="line-numbers"><code class="prism language-dart" data-prism>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);
    }
});
</code></pre>
</div>

<h2><a href="/docs/getting-started-for-flutter#nextSteps" id="nextSteps">Next Steps</a></h2>

<p>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.</p>
