Install & Run Your First Flood App

This guide will walk you through the process of setting up and running your first Flood app. We'll cover Flutter installation, project setup, customizing app icons and splash screens, and configuring the development environment.

Flutter Setup

Before we begin, make sure you have Flutter installed on your system. If you haven't installed Flutter yet, please follow the official Flutter installation guide (opens in a new tab).

Melos Setup

Melos is a tool for managing Dart projects with multiple packages. It's particularly useful for Flood projects, which typically consist of multiple interconnected packages. Here's how to set up Melos:

Install Melos globally using the Dart package manager:
```
dart pub global activate melos
```
Verify the installation by running:
```
melos --version
```
You should see the version number of Melos if it's installed correctly.
(Optional) If you encounter any issues with running Melos, ensure that your Dart SDK's bin directory is in your system's PATH.

Create Project

You have two options to set up your Flood project:

Mason (opens in a new tab) is a powerful code generation tool that automates every aspect of the project creation process. It streamlines setup by generating all necessary files, configuring dependencies, and setting up the project structure according to Flood best practices.

Install Mason globally:
```
dart pub global activate mason_cli
```
Add the Flood brick:
```
mason add -g flood
```
Make the Flood brick within the parent directory you want to create your project in:
```
# cd into the parent directory, such as `cd ~/StudioProjects`
mason make flood
```
Follow the on-screen instructions to set up your project.
Run the following command to bootstrap your project, setting up all dependencies and linking local packages:
```
melos bs
```

Understanding Your Project Structure

Once you've set up your Flood project using either Mason or the Template Repository, it's important to understand the structure of your new project.

To learn more about how Flood projects are organized, including the purpose of different directories and key files, please refer to our Project Structure guide. This will help you navigate your new project and understand where to make changes as you develop your app.

App Icon & Splash Screen

To customize your app's icon and splash screen:

Move your app icon image to the following locations:
- example/assets/logo_foreground.png
- example/assets/logo_foreground_transparent.png

Open example_core/tool/automate.dart and customize the color scheme and logo padding in the NativeSetupAutomateCommand. For example:

example_core/tool/automate.dart

await automatePondContext.register(NativeSetupAutomateComponent(
  appIconForegroundFileGetter: (root) => root / 'assets' - 'logo_foreground_transparent.png',
  backgroundColor: 0x172434, // Customize this color
  padding: 80, // Adjust padding as needed
));

From the example_core directory, run the following command:
```
dart tool/automate.dart native_setup
```

This will use the Automate Module to generate the necessary app icons and splash screens based on your configuration. For more information on the Native Setup automation, check out the Native Setup page.

Environment Configuration

Flood provides different environments for development and testing. By default, the app uses the production environment, but since we haven't set up any cloud providers yet, we'll use the testing environment to avoid draining resources.

To set up the testing environment:

Create a new file example/assets/config.overrides.yaml if it doesn't exist already.
Add the following content to the file:
example/assets/config.overrides.yaml
```
environment: testing
```

This configuration will use the testing environment, which simulates all services in-memory. For more information on environments in Flood, refer to the Environment page.

Running The App

With these steps completed, you're now ready to run your first Flood app! Use your preferred IDE or run the following command from the example directory:

flutter run

Your app should now launch in the testing environment with your custom app icon and splash screen.

Additional Reading

flutter_hooks

Flood extensively uses flutter_hooks for state management. Before proceeding, we strongly recommend familiarizing yourself with this library:

flutter_hooks official documentation (opens in a new tab)

Understanding flutter_hooks will significantly enhance your ability to work with Flood effectively.

Congratulations on setting up your Flood project! Once you're comfortable with flutter_hooks, continue to the User Authentication guide to learn how to implement authentication in your app.

User Authentication