Skip to main content

Quick Tour

In this section, we will go quickly through the main panels that appears in Nowa after creating a project.

The following demo will walk you through the panels, and show you how to quickly create a new screen next to the home screen, drop some widgets, and implement navigation functionality between the two screens

Now let's talk with slight more details about the panels that you saw in the above demo:

1. Details Panel​

The Details Panel provides information about the currently selected element in your project.

  • If you select a screen, component, or widget, its properties and settings will appear here.
  • If nothing is selected, you will see board settings, allowing you to:
    • Change the background color.
    • Toggle the grid display.

2. Outline Panel​

The Outline Panel, located on the left side, shows all the screens and components currently on the board.

  • Quick Navigation: Double-click on any widget or screen to navigate to it instantly.
  • Right-Click Menu: You can right-click on an element to see options like Replace, Remove, and more.

3. Files Panel​

Nowa follows a file-based system similar to a traditional Flutter project. The main files in your project are Dart files (.dart), which are essential building blocks for Flutter apps.

File Structure Overview:​

  • lib/ → Contains all the Dart files, including
    • The App Theme and Global States.
  • boards/ → Contains Design Boards, which are groups of related UI screens:
    • Example: You can create an Auth Board that includes Login, Signup, and Forgot Password screens, keeping the authentication flow organized.
    • Avoid adding too many screens to a single board to maintain clarity and efficiency.
  • assets/ → Stores all project assets like:
    • Images, Videos, Audio files, Rive, or Lottie animations.

4. Toolbar​

The Toolbar, located at the top center, provides essential tools for UI building.

  • Use the toolbar to:
    • Add a new screen or a pre-built component to the project, like an Audio Player
    • Open the Widget Picker to drop widgets or components onto the board.
    • Enter Play Mode to test a single screen or the entire app (if you are selecting a screen, the play mode will start from that screen. If nothing is selected, it will start from the Home screen)
    tip

    Select the Home screen by selecting the screen then in the details panel choose "Make Home Screen"

5. File Preview​

Each file, whether a screen or component, can be opened separately in File Preview Mode without the board.

This allows you to focus on a single file and switch to code view to view, write, or modify its Dart code. More on that later.

6. Circuit​

The Circuit Panel is Nowa’s visual logic builder.

  • It appears when you open a function, such as:
    • Event functions, like OnPressed (triggered when a button is clicked).
    • Custom functions, which you can create and define logic for. You can create functions inside a screen, component, or in a global state. More on that later

We will explore the Circuit Panel and other features in more detail in upcoming sections.

This concludes the quick tour of Nowa’s main panels. Now that you have an overview of the UI, you're ready to start building your app! 🚀