# App Builder

> This page is about FlutterFlow Studio (the visual builder), not FlutterFlow (the app builder you use by describing your app).

URL: https://docs.flutterflow.io/flutterflow-ui/builder

Explore the App Builder in FlutterFlow Studio, featuring a comprehensive interface with four main sections-Navigation Menu, Toolbar, Canvas, and Properties Panel.

On opening the project, you'll see the App Builder, which consists of four main sections: 
[Navigation Menu](#navigation-menu), [Toolbar](#toolbar), [Canvas](#canvas-area), and [Properties Panel](#properties-panel).

![App Builder](https://docs.flutterflow.io/assets/images/navigation-menu-74bb7c08ba58382777ca2616d4fb3699.avif)

## Classic and New Builder

FlutterFlow Studio has two versions of the App Builder: the classic builder and the new builder. Projects open in the classic builder until you switch. Your builder preference is saved to your account and applies to all your projects.

### Try the New Builder

When you open an existing project in the classic builder for the first time, a dialog prompts you to try the new builder. You can choose one of these options:

- Click **Keep classic builder** to stay in the classic builder. FlutterFlow Studio doesn't show this prompt again.
- Click **Switch to new builder** to switch and continue to a short tour of the new builder.
- Review the tour before switching, then click **Switch to new builder** on the final tip.

### Switch Builders

You can switch builders at any time.

To switch from the classic builder to the new builder:

1. Open the project menu.
2. Click **Switch to New Builder**.

Alternatively, open **App Settings** and click the **Try the new builder** card at the top of the settings list.

To switch from the new builder to the classic builder:

1. Open the project menu.
2. Click **Switch to Classic Builder**.

Alternatively, click **New builder** in the status bar at the bottom of the builder, then select **Classic builder**. This menu also includes a **New builder** option.

:::tip
To replay the tour of the new builder, open the project menu and click **New Builder Tour**.
:::

<div style={{
    position: 'relative',
    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
    height: 0,
    width: '100%'}}>
    <iframe
        src="https://demo.arcade.software/jFRUp0t0PVSH6zcYKrvV?embed&show_copy_link=true"
        title=""
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            colorScheme: 'light'
        }}
        frameborder="0"
        loading="lazy"
        webkitAllowFullScreen
        mozAllowFullScreen
        allowFullScreen
        allow="clipboard-write">
    </iframe>
</div>
<p></p>

## Navigation Menu

The Navigation Menu, located on the left side of the builder, allows you to switch between various FlutterFlow Studio features. These include designing the UI, managing databases, setting up API, adjusting app settings, adding integrations, and more.

Here is a list of all the features accessible from the navigation menu:

1. **Dashboard**: Manage projects, access account info, and FlutterFlow Studio resources.
2. **Widget Palette**: Access all widgets for your app.
3. **Page Selector**: Manage pages, components, and custom code files, and organize them using folders.
4. **Widget Tree**: Get an overview of all widgets on a selected page.
5. **Storyboard**: Visualize app's design and navigation.
6. **Search**: Search across your project and filter results by Data, Design, State, Code, or Pages & Components.
7. **Test Mode**: [Test your app](https://docs.flutterflow.io/testing/run-your-app#test-mode) in a live debugging environment.
8. **Firestore**: Create collections and adjust Firestore-related settings.
9. **Data Types**: Create custom data types for your app.
10. **App Values**: Manage [App State variables](https://docs.flutterflow.io/resources/data-representation/app-state) and Constants.
11. **API Calls**: Define API calls.
12. **Media Assets**: Upload assets for your app and team.
13. **Cloud Functions**: Write and deploy cloud functions for Firebase.
14. **Tests**: Add automated tests.
15. **Agents**: Create, configure, and manage [AI Agents](https://docs.flutterflow.io/integrations/ai-agents) to integrate conversational AI interactions into your app.
16. **App Events**: Define and manage [App Events](https://docs.flutterflow.io/concepts/app-events) that allow different parts of your app to communicate without being directly connected.
17. **Theme settings**: Customize visual appearance.
18. **Settings and Integrations**: Access app-related settings and integrations.

## ToolBar

From [ToolBar](https://docs.flutterflow.io/flutterflow-ui/toolbar), you can search for project resources, change canvas size, see project history, branching, optimization and enhancements, view-download code, and run your app.

## Canvas Area

In the [Canvas Area](https://docs.flutterflow.io/flutterflow-ui/canvas), you can see a preview of a device's screen and build your app page.

## Properties Panel

The Properties Panel lets you modify both the visual appearance and interactive behavior of UI 
elements on the canvas. It allows you to add [Actions](https://docs.flutterflow.io/resources/functions/action-flow-editor), set up a [Backend Query](https://docs.flutterflow.io/resources/backend-query), add [Animations](https://docs.flutterflow.io/concepts/animations) and more.

The Properties Panel will vary slightly depending on the entity you have selected. To explore the details of each Properties Panel, click on the following:

- **[Page Properties](https://docs.flutterflow.io/resources/ui/pages/properties)** (when you have selected a Page)
- **[Widget Properties](https://docs.flutterflow.io/resources/ui/widgets/properties)** (when you have selected any widget, including built-in components)