Coding, Tech and Developers Blog
In this article, I will show you the basic steps to set up your development machine to create your first Flutter app.
Having made my application development path from Qt in the first place and then all of .NET’s XAML flavors for the past few years (and, honestly, considering it to be one of the most intuitive ways of declaring UI), I am always open to new technologies that are aspiring to be the next big thing in application development. And let’s face it, Flutter is hyped right now. According to Statista, Flutter has even surpassed the usage of React in 2022.
But let’s dive into our first application using Flutter.
From the official documentation, the Flutter SDK can be downloaded (at the time of writing this article, this is a 3.0.5 stable release).
Once the download is complete, extract the archive to any location where you have elevated rights and whose path does not contain special characters.
C:\Program Files (x86)\ will violate both these rules!
In my case, this path is
Once that is done, add this path to your user’s PATH environment variable.
Next, open a Windows PowerShell and execute
where.exe flutter dart
The output should look something like this:
PS C:\Users\dfrue> where.exe flutter dart
Once finished, run the command flutter doctor and carefully read the output for any additional dependencies that are missing. In my case, I needed to install and set up AndroidStudio as well and also point another environment variable CHROME_EXECUTABLE to the location of my ChromePortable executable.
After performing all the necessary tasks, run flutter doctor again and check the output. Ideally, it looks similar to this:
PS C:\Users\dfrue> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.0.5, on Microsoft Windows [Version 10.0.22000.795], locale de-DE)
[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.2.5)
[√] Android Studio (version 2021.2)
[√] Connected device (3 available)
[√] HTTP Host Availability
• No issues found!
Now, it is time to set up the IDE. I chose AndroidStudio for this. Since it has already been installed as a dependency for the previous step, open it, go to the Plugins pane and install Flutter. The installation will immediately tell you that it needs Dart as well.
After restarting the IDE, the welcome screen should look like this:
In the welcome screen, select
New Flutter Project.
Verify the correct Flutter SDK installation directory and click Next.
Give the application a name and specify a project location that works for you (Note that application names in Flutter must only be using lowercase letters and underscores).
Make sure that project type Application is selected and click Finish.
In the project view, see if you can run the application right away.
In my case, the emulated Android device was not available. I had to go to
Tools > Device Manager and create a new device (I selected a Pixel 4 using API Level 30, Android 11.0).
Hit the play button. Ideally, things will start to build in the console, and deploying the app will start eventually.
Following the original tutorial, I verified that the HotReload feature works by changing the primary application color in
So, we have succeeded in building our first dummy application in Flutter. Where do we go from here?
First off, the Flutter documentation is pretty extensive. There are official articles on how to add your first UI elements in Flutter (which are called Widgets). Personally, I can recommend the pages that help you onboard from whatever UI technology you come from. For me, the Flutter for Xamarin.Forms developers is a good choice to understand the basic concepts and differences and to make myself feel at home in this framework.
Let me know: Are you going to try some of their language features? What ideas for applications do you have in mind?
Be the first to know when a new post was released