Open In App

How to Install and Setup Flutter in IntelliJ IDEA?

Improve
Improve
Like Article
Like
Save
Share
Report

As we all already know that Flutter is a cross-platform application development toolkit, It can be used to develop cross-platform apps for Android, iOS, Linux, macOS, etc. Now you can build apps using flutter in any Text-editor (try to use editors recommended by Flutter on their website to avoid any inconvenience), Also it is highly recommended to use one of their developed editor plugins for a fruitful experience. Those plugins offer you code crowning glory, syntax highlighting, widget editing assists, run & debug guide, and greater. 

What is IntelliJ IDEA and why we are using it for Flutter?

IntelliJ IDEA is an integrated development environment that basically is one of the finest text editors we can use for developing computer software written in Java, Kotlin, Groovy, etc. We are using IntelliJ IDEA here because as quoted in this article we should use text editors and plugins recommended by Flutter on their website.

 

We can use Android studio too! but our discussion in this article is IntelliJ IDEA which accordingly can be used alternatively.

Step By Step Implementation 

Step 1: Download the Flutter ZIP file

For developing software with the help of flutter, first of all, all you need is Flutter installed on your computer, So now let us see the step-by-step installation of flutter. Go to your favorite web browser -> search for Flutter SDK in your search panel ->Select the first option you see that will be https://flutter.dev/?gclsrc=ds&gclsrc=ds

search for flutter SDK

 

Now you are on the official site for Flutter created by google, you need to click on Get Started which is located on the top right corner of the page.

This is the homepage of Flutter

 

After clicking Get Started you will be redirected to the installation page you need to select your device OS and accordingly move forward, we have four available options here: Windows, macOS, Linux, and Chrome OS. We will move forward with windows as it is the most widely used OS.

Select your OS here

 

Now check your system requirements here and then move forward towards the Get the Flutter section , You need to download the following bundle which is a zip file the download may take a while depending upon your network speed.

download the package

 

You must have downloaded the packages in your system, now you need to move this package from wherever you downloaded it to the C drive of your system, 

  • Create a new folder named src and paste the zip file you just downloaded, after that, you need to extract the Zip file there itself for that just right-click > Extract All, The files will be extracted there.
  • After you complete extracting the files you will have a folder named flutter and within it, there will be another folder named flutter. 
just like this a folder named flutter will appear after extraction is completed

 

Step 2: Setting the Environment Variables for Flutter

We now will set the Environmental Variables for Flutter but before that let us see why we need environmental variables. Environmental variables may be used to store System-wide values, for example, PATH is the most frequently used environmental variable. which stores a list of directories to search for executable programs

Step by Process to set Environment Variable:

On the Windows Search Panel search for Environment variable or look for Edit the system environment variables now after that a dialogue box will appear on your screen choose Environment Variable in it on the bottom right corner of the dialogue box.

select environment variable here

 

Now after that select PATH and click on edit.

 

Here you need to specify the path you have used for flutter so for that

  • Go to the src folder that we created in C drive and inside that folder Flutter > bin i.e. search for bin inside the flutter folder.
  • Now copy the path of that bin folder.
select this path and copy it

 

Now come back to the environment variable dialogue box > select path > click on edit, you have to click on New on the right corner of the box, and then after that paste the path that you have copied from the src folder. after that click on Ok on each of the boxes without exiting them.

 

Step 3: Checking if Flutter is correctly installed or not

Open Command Prompt using windows search, now type the following command

flutter doctor

After that if you see an error saying “flutter s not recognized as an internal or external command” then there might be some error and flutter is not installed on the system properly. If the command ran successfully you will have green ticks on the requirements you need to run flutter, so if you see any red crosses do install the required stuff from the resource provided.

Step 4: Installation and Setup of IntelliJ IDEA

Go to your favorite web browser and type Download IntelliJ IDEA, then go to the official site of JetBrains https://www.jetbrains.com/idea/download/#section=windows. Now to Community version and click on it, and your download will start .

click on community version here

 

Now go to the location where you have downloaded IntelliJ IDEA and click on it to run the setup. Then click on Next to continue. 

 

Choose the location where you want all your files and data of IntelliJ to be and then click on next.

 

Then again click Next to continue

 

Then finally click on Install. the installation will begin and it will depend on your system’s speed. 

 

Step 5: Installing the desired plugins to run Flutter with IntelliJ IDEA

Now we need to launch the IntelliJ IDEA app and then go to Plugins which is present on the navigation bar on the left side of the screen then Search for Flutter and then click on install to start the process( click on accept if prompted to do so).

install the flutter and dart plugins

 

Now you will be prompted to install Dart plugins too, so click on install again to do so. 

 

After that, you need to click on Restart the IDE and then your IDE will restart.

 

Now the Installation and set-up of Flutter on IntelliJ IDEA are completed, after you restart your IDE you are good to go for your first Flutter Project.

Creating your first Flutter Project on IntelliJ IDEA

For creating your first project in IntelliJ IDEA using Flutter, you need to open/launch the IntelliJ IDEA app now after that click on New Project on the landing page.

 

Now select Flutter on the bottom left corner of the navigation bar. and now you need to specify the path here of the Flutter SDK.

 

For specifying the path of flutter SDK go to C Drive->src folder->Flutter folder > flutter folder you need to select the path of the flutter folder.

 

Now after that click on Next then select a suitable name for your project and then click on CREATE. your project will be created for the first time it may take a few moments to set things up.

 

Now that we have created the project, let us check whether all things are fine and working well, also we will be running our project for the first time. for those of who are wondering that we haven’t written a single line of code so what will be the output of the code when we run it, then the above is an demo code whenever you create a project for the first time then you will have some pre-written code to check whether flutter is working properly or not also more is given about the code in flutter’s official website https://docs.flutter.dev/get-started/test-drive here it is explained how to Test drive your first code .

view of text editor after project is launched

 

 

Now either if you have any AVD(Android Virtual Device) installed in your system then use it else if none are listed select Tools > AVD Manager and create one there. if still you don’t want to set up an android device go with CHROME (WEB) on devices and it will deploy an online server and you can see the output there. 

 

After setting up AVD just click on RUN on the toolbar. we will be using CHROME (WEB) here for convenience of those who don’t want to use heavy emulators like AVD’s.   

click on run and see the output

 

After you click on run console will open and after some time if you have used An emulator so output will be in the emulator itself or if you used a web-based server then it will open a browser window.

console window after you click on run

 

the final output of the demo code

 

Note: For the Video explanation click on the link below: How to Install and Setup Flutter in IntelliJ IDEA



Last Updated : 31 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads