How to create a new Flutter project

How to create a new Flutter project

There are several ways to create a new Flutter project. In this post, I am going to share various methods one can use to create a new Flutter project.

The easiest way is to create a Flutter project by using the command line. Based on your requirements, the command to create a new flutter project can take some parameters. Both with and without parameters are shown below.

Table of Contents

  1. Create New Flutter project using command line (with parameters)
  2. Create New Flutter project using command line (without parameters)
  3. New Flutter Project using VS Code
  4. Run your Flutter Project in VS Code
  5. New Flutter Project using Android Studio
  6. Run your Flutter Project in Android Studio

Create New Flutter project using command line (with parameters)

flutter create --org com.yourdomain your_app_nameCode language: CSS (css)

This command will create a simple starter app known as Simple Counter App which basically increments counter based on button clicks.

If you want a more advanced template (with a ListView / DetailView / Settings / Theme switch) that follows community best practices run the command (only since the Flutter 2.5 version):

flutter create --org com.yourdomain -t skeleton your_app_nameCode language: CSS (css)

Swift, Kotlin, and androidx dependencies are the default options

After just opening the created project in Android Studio or in VSCode

Parameter --org com.yourcompany will form applicationId for Android as:

com.yourcompany.yourappnameCode language: CSS (css)

and iOS PRODUCT_BUNDLE_IDENTIFIER as:

com.yourcompany.yourAppNameCode language: CSS (css)

To explore all possible parameters type

flutter create --help

Create New Flutter project using command line (without parameters)

flutter create  your_app_name

It is more straightforward here. The project will be created without assigning applicationId for Android and iOS PRODUCT_BUNDLE_IDENTIFIER.

As discussed in the previous method to create a new project, this command will also create a simple starter app known as Simple Counter App which basically increments counter based on button clicks.

New Flutter Project using VS Code

To create a Flutter project in VS Code, an official Flutter extension should be installed in your VS Code.

Install Flutter Extension
Install Flutter Extension

Note: To install Flutter extension in VS Code, Ctrl + Shift + x on Windows or Command (or Cmd) ⌘ + Shift ⇧ + x on Mac and search for ‘flutter‘ and click install.

To create a new project in VS Code:

  1. Open Command Palette under View menu (or Ctrl + Shift + p on Windows or Command (or Cmd) ⌘ + Shift ⇧ + p on Mac)
  2. Search for “Flutter: New project” and press Enter
  3. Select Project or Module or Package or Skeleton based on your requirement. Here we are going to create a new project. So, keep “Project” selected and press Enter. (By default, Project is selected in VS Code.)
  4. Select folder or directory where you want to create the project
  5. Input project name and press Enter
  6. Now your project is created

Run your Flutter Project in VS Code

Run | Debug | Profile options will be displayed above your main method as shown in the screenshot given below. Click Run to run your new project.

Run Flutter Project in VS Code

New Flutter Project using Android Studio

The process is pretty similar to creating a new project using VS Code. From the plugins marketplace, install Dart and Flutter plugins.

Install Dart and Flutter plugins in Android Studio
Install Dart and Flutter plugins in Android Studio
  1. Select File > New Flutter project
  2. Select Flutter SDK and click Next
  3. Enter Project Name, Project location, Description of the project, and other options which are pretty self-explanatory.
  4. And Click Finish.
  5. Your new project is ready.

Run your Flutter Project in Android Studio

  1. Select the connected device, emulator or browser and Click run button. That’s it.
Run flutter project on Android Studio

Note: If you want to keep your emulator on top of the screen or any other opened software, refer to the tutorial here: How to keep an android emulator always on top of your screen

If you come across any issues, comment below. I will be more than happy to get in touch with you help you.

Leave a Reply

Discover more from BHUTAN IO

Subscribe now to keep reading and get access to the full archive.

Continue reading

Scroll to Top