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

# Import from FlutterFlow

> Push your FlutterFlow project to GitHub and continue developing in Workshop with full Flutter/Dart toolchain support.

You can export your FlutterFlow project's code and bring it into Workshop for continued development. This gives you full control over the Flutter/Dart codebase with the ability to add custom packages, native plugins, and backend services.

**Workshop Desktop is strongly recommended** for FlutterFlow imports, as Flutter development benefits from local toolchain access.

## Step 1: Push Your FlutterFlow Project to GitHub

FlutterFlow supports pushing generated code to GitHub:

<Steps>
  <Step title="Open your project in FlutterFlow">
    Navigate to the project you want to export.
  </Step>

  <Step title="Go to GitHub settings">
    Navigate to **Settings** > **Integrations** > **GitHub**. Connect your GitHub account if you haven't already.
  </Step>

  <Step title="Configure the repository">
    Select or create a GitHub repository. Choose the branch to push to (typically `main` or `flutterflow`).
  </Step>

  <Step title="Push the code">
    Click **Push to Repository** to export your project's Flutter/Dart code to GitHub. Verify the code appears in your repository.
  </Step>
</Steps>

<Tip>
  Copy the GitHub repository URL -- you'll need it in the next step. It looks like `https://github.com/your-username/your-project`.
</Tip>

<Warning>
  Once you import your FlutterFlow project into Workshop and start making manual code changes, syncing back to FlutterFlow's visual editor may cause conflicts. Plan to continue development primarily in Workshop going forward.
</Warning>

## Step 2: Connect GitHub in Workshop

If you haven't already connected your GitHub account to Workshop:

1. Open Workshop Desktop and navigate to **Hub** > **Connectors**
2. Click **Connect** on the GitHub connector
3. Authorize the Workshop GitHub App and select which repositories to grant access to
4. Confirm the connection

See [GitHub Integration (Desktop)](/workshop-desktop/github-integration) for detailed instructions.

## Step 3: Create a Project from Your FlutterFlow Repository

1. Click **New Project** from the Projects page
2. Select **Import from Git**
3. Choose your FlutterFlow repository from the list, or paste the repository URL
4. Workshop clones the repository and creates your project

## Step 4: Set Up and Run Your Project

Once the project is created, open a conversation and ask the agent to get your Flutter project running:

<CodeGroup>
  ```text Recommended Prompt theme={null}
  Please set up and run my FlutterFlow project so I can begin extending it. This is a 
  Flutter/Dart project exported from FlutterFlow. Set up the Flutter development 
  environment, install dependencies with `flutter pub get`, and start the app in 
  development mode.
  ```
</CodeGroup>

The agent will:

* Verify Flutter SDK is available (or help you install it)
* Run `flutter pub get` to install dependencies
* Identify the target platform (web, iOS, Android)
* Start the development server

<Note>
  Flutter development requires the Flutter SDK installed locally. Workshop Desktop's terminal gives you full access to manage the Flutter toolchain. If you need to install Flutter, the agent can guide you through the process.
</Note>

## What You Can Do Next

With your FlutterFlow project now in Workshop, you can:

| Capability            | Example Prompt                                                             |
| --------------------- | -------------------------------------------------------------------------- |
| **Custom widgets**    | *"Create a custom animated chart widget that FlutterFlow doesn't support"* |
| **Native plugins**    | *"Add camera access and image processing with a native Flutter plugin"*    |
| **Backend services**  | *"Build a Dart backend with shelf to handle API requests"*                 |
| **State management**  | *"Refactor the state management to use Riverpod for better scalability"*   |
| **Custom deployment** | *"Help me set up Firebase Hosting deployment for the web build"*           |

## Deployment

For your imported FlutterFlow project, ask the agent to set up deployment appropriate for your target platform:

<CodeGroup>
  ```text Firebase Hosting (Web) theme={null}
  Help me deploy the Flutter web build to Firebase Hosting with automatic deploys.
  ```

  ```text App Store / Play Store theme={null}
  Help me set up the build configuration for releasing to the App Store and Google Play.
  ```
</CodeGroup>

<Card title="Ready to get started?" icon="rocket" href="https://workshop.ai/download">
  Download Workshop Desktop to import your FlutterFlow project.
</Card>