​
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 installed on your machine
  • Flutter SDK (version 3.19.0 - 3.24.5) installed on your machine
  • A Ditto Portal account with a configured Ditto Application (see Getting SDK Connection Details)

​
Get Started

​
1. Clone the Repository

  1. Open the terminal

  2. Clone the repository from GitHub.

    git clone https://github.com/getditto/quickstart

  3. Navigate to the project directory:

    cd quickstart

​
2. Configure Ditto

​
Get Ditto App ID, Playground Token, Auth URL, and Websocket URL

  1. Log in to your Ditto Portal account
  2. Navigate to your application and obtain the Ditto App ID, Playground Token, Auth URL, and Websocket URL. (see Getting SDK Connection Details for more details)

​
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 App ID and Playground Token from your Ditto Application
Dart
const appID = "REPLACE_ME_WITH_YOUR_APP_ID";
const token = "REPLACE_ME_WITH_YOUR_PLAYGROUND_TOKEN";
const authURL = "REPLACE_ME_WITH_YOUR_AUTH_URL";
const websocketURL = "REPLACE_ME_WITH_YOUR_WEBSOCKET_URL";

​
3. Run the Application

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

​
4. Sync-Data Offline

  1. Launch the application on multiple devices or simulators
  2. Disconnect from your current WiFi network while keeping WiFi enabled on the device to allow for LAN connections
  3. Add, edit, and delete tasks and experience offline collaboration!
Please note that the web platform only supports syncing data with the Ditto cloud and does not support peer-to-peer sync

​
Next Steps

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

​
Additional Resources