Get Started with Mobile Development using Flutter
By: Epey Mary Nancy E.
Tags: Mobile App Development, Flutter, Android App Development, iOS App Development, Flutter App Development

We will set up our Flutter development environment by downloading Flutter SDK, we shall then download android studio and if you prefer coding with VS Code then download it. Then we will take it further by setting up an emulator to run our first flutter project but before moving forward let us take a moment to answer these frequently asked questions.

What is flutter?

The definition from Google says “Flutter is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase”. Flutter helps developer design beautiful interfaces for all types of screens. Flutter is a user interface toolkit that makes it easy for developers to design beautiful interfaces for all types of devices and screen sizes. Flutter comes with a lot of prebuilt widgets, that helps with your app design. One thing I noticed so far about Flutter is that it borrows some concept of web development. Just imagine you want to draw an image of whatever you want. Obviously, you will need a pen or pencil and you will just start drawing on a blank piece of paper, Flutter produces a white screen where you can just draw whatever you want on it using widgets. You can explore different widgets here.

Why Flutter?

The main reason why you might choose Flutter for your mobile app development is that you will have one code based to build, debug and update your app. Instead of studying and learning different languages just to build your cross-platform app, you will just need to learn Dart. Meaning you will just need to master Dart than to master many different languages and it is clear which option will be the best. Right now you can use Flutter to build ios, android, web and desktop applications. Flutter has a simple layout system that you can use for your creative UI design.

Setup and Installation

Things you will need

We will need a computer or laptop, it can be windows or mac. I will be demonstrating windows installation right now since that’s what I have but I will soon do that of mac.

We will need a text editor where you can write your Flutter code. Best editors for flutter in my opinion right now is Android Studio and VS Code. I personally use Android Studio and that’s what I will mostly use doing my little projects here.

We will need a physical device or Android Emulator if your building Android Apps and IOS Simulator if you are building IOS Apps.

Installing Flutter

Windows installation, you will need a PC running at least Windows 7 SP1, and I recommend you have around 10GB of free disk space since we will have to install Android Studio and our Emulator(virtual device), even though Flutter only requires 1.32 GB (does not include disk space for IDE/tools). make sure to install Git too.

You have to download the Flutter SDK which also contains Dart SDK, it has also step by step installation guide.

Once the download is finished, open and extract you SDK. The file path you extract it to matters, Flutter actually recommends we extract it to a file path directly in the C drive. I personally actually created an empty folder ‘src’ the created another folder ‘flutter’ inside my src folder then extracted it there as shown below.

We can see that Flutter is already installed in my system

You can actually start running flutter commands by double-clicking on flutter_console.bat. You might have a Window pop up, just click on run. You should be able to see the interface shown below and run Flutter command such as flutter — version to check the flutter version you have installed.

If we want to use flutter commands in other places, it will be easier if you have your path variable setup accordingly. You can edit your path variable by locating your environment variable typing ‘env’ in your search section then open edit system environment variables the click on environment variables. In the user variable, you will see Path. Click on it then click on edit, you can then add your bin folder (inside your flutter folder) full file path, once you are done you can click on Ok. You can now run flutter commands from anywhere that is you can open the command prompt and run a flutter command like ‘flutter — version’ and actually get your current flutter version. One very important flutter command is ‘flutter doctor’ that will check how your flutter is currently set up and we can clearly see what exactly is missing.

Installing Android Studio

To install Android Studio, we will first need to download it, you can download it here and you will be taken to the download page.

Once you download it, just run the installation setup following the recommended steps. When you're done you will see the welcome screen, where you can start a new Android Studio project or open one. You can click on Configure, then click on setting a new menu will pop up. You should go to the plugins task, from there you can search for Flutter. Make sure you choose the one that just has Flutter, click on it and install it then make sure to accept the pop up since it will most likely need to install Dart plugin as well. Once Flutter and Dart plugins are installed you will need to restart Android Studio, after that we will be able to see ‘Create New Flutter Project’ in your welcome screen. If everything went smoothly then Congratulations you have Flutter installed in your Android Studio.

Setting up an Android Emulator

Let’s start by clicking on create new flutter project to build our very first flutter app. Click on Flutter Application and press next.

Let’s name our app ‘movie_app’ since we will be having a complete movie app series here (Spoiler Alert 😉). Make sure your Flutter SDK path points to the exact path where you flutter SDK is located. If your path wasn’t specified automatically you can always click on ‘…’ and select the right file path. The project location is where your project is going to be saved and the description is your app description.

Click on next when you are done. The package name can be your website domain name mixed with your app name if you have one, or your name mixed with your app name, it should be unique. Then click on Finish to build your first app it will then open ‘main.dart’ that already has some code in it. You should know that when you create a new flutter application it automatically comes with some prewritten code from the flutter team that builds a simple counter app. For us to run our app, we will need an Emulator, to download one let’s open up AVD manager by clicking on the phone icon with the android icon at the bottom.

After clicking on it, it should open a new window to set up a new virtual device. when you click on it, different windows pop up, where you can choose your new device. I personally prefer Nexus devices such as the Nexus 6 device for performance, then click on next, you can now select a system image or operating system (OS). If you don’t have one installed, just download the one you want, and let it download and install. You can now choose the downloaded OS, click on next. Make sure you enable hardware acceleration by changing your graphic from ‘Automatic’ to ‘Hardware — GLES’ (it’s a drop-down menu). Click on finish and now if everything went smoothly you can run your emulator by clicking on the play button. Feel free to close down all the popup windows when your emulator is already running.

You can now run the sample code provided by the flutter team by clicking on the green play icon. Make sure your desired device is selected before clicking the play icon button. You should have the same UI as shown below and if you click on the plus button the counter should increase that is the number should increase from 0 to 1 to 2 and so on.

Congratulations if you made it to the end, hope you had fun and learned something new. I wish you the best in this new journey, it won’t be easy sometimes but just keep going, learn learn learn and practice practice practice.