> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ditto.live/llms.txt
> Use this file to discover all available pages before exploring further.

# Flutter Quickstart

> Get started quickly with Ditto using the Ditto Quickstart Applications

export const QuickstartConfigTitleAndDatabaseIdBody = () => <div>
        <ol>
            <li>
                Log in to your <a href="https://portal.ditto.live" target="_blank">Ditto Portal account</a>
            </li>
            <li>
                Navigate to your database and obtain the Ditto <b>Database ID</b>, <b>Playground Token</b>, <b>Auth URL</b>, and <b>Websocket URL</b>.
                (see <a href="/cloud/portal/getting-sdk-connection-details">Getting SDK Connection Details</a> for more details)
            </li>
        </ol>
    </div>;

export const QuickstartSyncDataOfflineBody = () => <div>
        <ol>
            <li>Launch the application on multiple devices or simulators</li>
            <li>Disconnect from your current WiFi network while keeping WiFi enabled on the device to allow for LAN connections</li>
            <li>Add, edit, and delete tasks and experience offline collaboration!</li>
        </ol>
    </div>;

export const QuickstartCloneTheRepoBody = () => <div>
        <ol>
            <li>Open the terminal</li>
            <li>
                Clone the repository from GitHub.
                <pre>
                    <code>
                        git clone https://github.com/getditto/quickstart
                    </code>
                </pre>
            </li>
            <li>
                Navigate to the project directory:
                <pre>
                    <code>
                        cd quickstart
                    </code>
                </pre>
            </li>
        </ol>
    </div>;

## Prerequisites

Ditto’s Flutter Quickstart supports **iOS**, **Android**, and **Web**. Before getting
started, ensure you have the following:

* A code editor (Visual Studio Code is our recommendation, but any code editor will work)
* [Git](https://git-scm.com/) installed on your machine
* [Flutter SDK](https://docs.flutter.dev/get-started/install) (version 3.24.0 - 3.32+) installed on your machine
* A Ditto [Portal](https://portal.ditto.live) account with a configured Ditto Database (see [Getting SDK Connection Details](/cloud/portal/getting-sdk-connection-details))

<AccordionGroup>
  <Accordion title="Android Specific Prerequisites" icon="android">
    - [Android Studio](https://developer.android.com/studio/install) installed on your machine
    - A physical Android device or Android emulator
  </Accordion>

  <Accordion title="iOS Specific Prerequisites" icon="apple">
    * A macOS machine with the latest version of [Xcode](https://developer.apple.com/xcode/) (15 or later) installed
    * A physical iOS device or iOS simulator
  </Accordion>

  <Accordion title="Web Specific Prerequisites" icon="chrome">
    * Ensure you have Flutter SDK version 3.24.0 - 3.32+ installed
    * Please refer to the [Flutter for Web](/sdk/latest/install-guides/flutter#step-6-web-browser-support) guide for additional information on Ditto's support for Flutter Web.
  </Accordion>
</AccordionGroup>

## Get Started

### 1. Clone the Repository

1. Open the terminal
2. Clone the repository from GitHub.

   <CodeGroup>
     ```shell iOS & Android theme={null}
     git clone https://github.com/getditto/quickstart
     ```

     ```shell Web theme={null}
     git clone --branch flutter-web-preview https://github.com/getditto/quickstart.git
     ```
   </CodeGroup>
3. Navigate to the project directory:
   ```shell theme={null}
   cd quickstart
   ```

### 2. Configure Ditto

#### Get Ditto Database ID, Playground Token, Auth URL, and Websocket URL

<QuickstartConfigTitleAndDatabaseIdBody />

#### Update Flutter Application with Ditto Credentials

1. Open the `lib/main.dart` file or the appropriate configuration file where Ditto is initialized
2. Update the code with the Database ID and Playground Token from your Ditto Database

```dart Dart theme={null}
const appID = "REPLACE_ME_WITH_YOUR_DATABASE_ID";
const token = "REPLACE_ME_WITH_YOUR_PLAYGROUND_TOKEN";
const authURL = "REPLACE_ME_WITH_YOUR_AUTH_URL";
```

### 3. Run the Application

1. Navigate to the Flutter demo directory.
   ```shell theme={null}
   cd flutter_app
   ```
2. Install the necessary dependencies. This fetches all required packages from pubspec.yaml.
   ```shell theme={null}
   flutter pub get
   ```
3. Run the Application
   ```shell theme={null}
   flutter run
   ```

<AccordionGroup>
  <Accordion title="Android" icon="android">
    4) Ensure you have an Android Emulator running or connect a physical device
    5) Select the Android Emulator/Device
       ```shell theme={null}
       \[1]: sdk gphone64 arm64 (emulator-1234)
       \[2]: Mac Designed for iPad (mac-designed-for-ipad)

       **Please choose one (or "q" to quit):** 1
       ```
  </Accordion>

  <Accordion title="iOS" icon="apple">
    4. Ensure you have an iOS Simulator running or connect a physical iOS device
    5. Select the iOS Simulator/Device
       ```shell theme={null}
       \[1]: iPhone 15 (5A8DFE9D-7BF0-4BEE-A675-A056B64CEE3F)
       \[2]: Mac Designed for iPad (mac-designed-for-ipad)

       **Please choose one (or "q" to quit):** 1
       ```
  </Accordion>

  <Accordion title="Web" icon="chrome">
    4. Ensure you have Google Chrome installed
    5. Run the application in the web browser
       ```shell theme={null}
       flutter run -d chrome
       ```
  </Accordion>
</AccordionGroup>

### 4. Sync-Data Offline

<QuickstartSyncDataOfflineBody />

<Note>Please note that the web platform only supports syncing data with the
Ditto cloud and does not support peer-to-peer sync</Note>

## Next Steps

All the Ditto Quickstart apps works together! Try running a quickstart app in other languages and see them all collaborate.

## Additional Resources

* [Flutter Install Guide](/sdk/latest/install-guides/flutter)
* [Flutter Release Notes](/sdk/latest/release-notes/flutter)
* [API Reference](/sdk/latest/api-reference/api-reference)