dateo. Coding Blog

Coding, Tech and Developers Blog

flutter
android

How to create your first Flutter app in AndroidStudio

Dennis Frühauff on August 4th, 2022

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.


What Flutter is

Flutter is Google’s response to other cross-platform development frameworks such as React and Xamarin.Forms. It features developing apps for both iOS and Android as well as for Windows and web applications. Under the hood, Google decided to use its own programming language Dart in order to represent an alternative to Javascript.


But let’s dive into our first application using Flutter.


Download and installation

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.
Example: C:\Program Files (x86)\ will violate both these rules!
In my case, this path is D:\software\flutter\.


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
D:\software\flutter\bin\flutter
D:\software\flutter\bin\flutter.bat
D:\software\flutter\bin\dart
D:\software\flutter\bin\dart.bat
PS C:\Users\dfrue>

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.
Screenshot 1
After restarting the IDE, the welcome screen should look like this:
Screenshot 2


Let’s create our first Flutter app

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.
Screenshot 3
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).
Screenshot 4
Hit the play button. Ideally, things will start to build in the console, and deploying the app will start eventually.
Screenshot 5
Following the original tutorial, I verified that the HotReload feature works by changing the primary application color in main.dart
Screenshot 6


What now?

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?



Please share on social media, stay in touch via the contact form, and subscribe to our post newsletter!

Be the first to know when a new post was released

We don’t spam!
Read our Privacy Policy for more info.

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.