How to Set up a Flutter Project

Table of Contents:

1. Setting up Flutter Project
2. Create App in Android Studio
3. Run the App in Android Studio
4. Install VS Code
5. Create App in VS Code
6. Run the App in VS Code
7. Source Code

Setting up Flutter Project

Google’s Flutter is an open-source UI software development kit. It is a cross-platform application from a single codebase for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the internet. Flutter was first released under the codename “Sky” and ran on the Android operating system.

Flutter uses Dart Language, and It is a client-oriented programming language for creating fast apps on any platform. Its mission is to provide the most productive programming language for cross-platform development and a versatile runtime platform for app frameworks. The Dart programming language is type-safe, and it employs static type checking to ensure that a variable’s value always corresponds to the static type of the variable. Even though types are needed, type annotations are optional due to type inference. Dart’s typing scheme is also versatile, allowing for the use of a dynamic type combined with runtime tests, which can be helpful for experimentation or for code that requires much dynamic behavior.

Setup

Flutter allows users to build applications using any text editor and our command-line tools. However, for an even better experience, one of the editor plugins is recommended. Code completion, syntax highlighting, widget editing assistance, run & debug support, and more are available through these plugins.

Install Android Studio

For Flutter, Android Studio provides a fully optimized IDE experience.

Create App in Android Studio

1. Select Create New Flutter Project in the IDE.
2. As the project form, choose Flutter Application. Then press the Next button.
3. If the text field is blank, select Install SDK… to ensure the Flutter SDK route specifies the SDK’s position.
4. Give the project a name (for example, myapp). Then press the Next button.
5. Finish by clicking the Finish button.
6. Allow Android Studio to install the SDK and build the project before proceeding.

Some Flutter IDE plugins need a company domain name in reverse order when creating a new Flutter app, such as com.example. When the software launches, the company domain name, and project name combines as the package name for Android (the Bundle ID for iOS). If the user believes the app launches, they can specify the package name now.

Lib/main.dart contains the code for the program.

Run the App in Android Studio

Pick an Android computer to run the app from the goal selector. If there aren’t any available, go to Tools> Android > AVD Manager and make one.

Users may see the starter app on the smartphone once the app builds finishes.

The “hot reload” functionality of Flutter provides users the liberty to refresh the code of an already running instance without restarting it or losing its state. Instead, change the program code, then “hot reload” the application on the simulator, emulator, or PC using the IDE or command-line tool.

Since the emulator/simulator initializes and the SDK components are installed, the first launch can take a few minutes. The next time, it should be nearly instantaneous in most situations. Alternatively, the user can use the terminal window’s flutter run command.

Install VS Code

1. Host VS Code.
2. Go to View > CMD
3. Input ‘install’ and select Install Extensions.
4. In the extensions search area, type “flutter,” pick Flutter from the list, and click Install. It also installs the Dart plugin, which is needed.

Create App in VS Code

1. Select View > Command Palette from the menu bar.
2. Select Flutter: New Application Project after typing “flutter.”
3. Create or pick the new project folder’s parent directory.
4. Press Enter after entering a project name, such as myapp.
5. Wait for the project to finish and for the main.Dart file to appear.

Users might need to restart VS Code for the Flutter plugin to detect the Flutter SDK if it was running during the initial Flutter setup.

Run the App in VS Code

1. Locate the status bar in VS Code (the blue bar at the bottom of the window). From the Device Selector field, choose a device. If no computer is available and the user wants to use a device simulator, go to No Devices and start one.
2. When the user clicks No Devices in VS Code, they might not see the Start iOS Simulator option. If the user uses a Mac, they need to run the following command in the terminal to start a simulator.
3. start -o simulator
4. Start debugging by selecting Run > Start Debugging or pressing F5.
5. Wait for the app to start — the Debug Console display shows the progress.

The user has been testing the app in debug mode so far. Debug mode sacrifices efficiency in exchange for developer-friendly features like hot reloading and phase debugging. In debug mode, slow performance and jerky animations are expected. Users want to use Flutter’s “profile” or “release” build modes until they are ready to evaluate results or release the app.

Check for typos if the app isn’t working properly. If the user wants to check out some of Flutter’s debugging features check for DevTools of Flutters.

Source Code

It’s a safe idea to maintain the source code in a server-based repository. It helps others collaborate on the same codebase and serves as a backup if the development machine fails. They use the GitHub-hosted git repository in this tutorial. Let’s start by making a repository. Go to https://github.com/new and confirm the project name. Don’t make a tick. Since a readme file is already present in the project, initialize this repository with a README option. Creating an SSH keypair and registering the public key on GitHub is also recommended.

After that, the user can set up a local repository. Choose the Create Git repository option from the VCS -> VCS Operation pop-up menu (Alt+ or Ctrl+V on macOS), and confirm the default location.

It indicates that they have not committed (added to the version control system). Check all the files in the pop-up window by pressing Ctrl+K (or Cmd+K on macOS). As the post, type “Initial commit” and confirm. Users can also use the terminal to run the commands git add -A and git commit.