Introduction to Flutter in Android

Flutter is an open source beta framework by Google for mobile UI to build high-quality native (super fast) interfaces for both iOS and Android. Dart is used as a programming language inside Flutter. Dart is similar to other modern languages such as Kotlin and Swift, and can be transcompiled into JavaScript code.

Flutter allows for a reactive and declarative style of programming and as a cross-platform framework, Flutter most closely resembles React Native. Unlike React Native, however, Flutter does not need to use a Javascript bridge, which can improve app startup times and overall performance. Dart achieves this by using Ahead-Of-Time or AOT compilation.

Another unique aspect of Dart is that it can also use Just-In-Time or JIT compilation. JIT compilation with Flutter improves the development workflow by allowing hot reload capability to refresh the UI during development without the need for an entirely new build.

As you’ll see in this tutorial, the Flutter framework is heavily built around the idea of widgets. In Flutter, widgets are not used just for the views of your app, but also for entire screens and even for the app itself.

Today, we are going be properly install Flutter and its required components and also run a demo app on both the Android Emulator.

Setting Up Environment

Flutter development can be done on macOS, Linux, or Windows. We’ll use Android Studio for this tutorial.

Instructions for setting up your development machine can be found here. The basic steps vary by platform (mine = macOS), but for the most part are:

Clone the Flutter git repository

Add the Flutter bin directory to your path

Run the flutter doctor command, which installs the Flutter framework including Dart and alerts you to any missing dependencies

Install missing dependencies

Set up your IDE with a Flutter plugin/extension

Test drive an app

Using Android Studio

With Android studio, it is pretty easy and straight forward.

Open Android studio (This is me assuming you already have Android studio up and running on your computer)

Here you are going to install 2 plugins: Dart and Flutter, so on the search bar type in “Dart”

I already have it installed, so you would notice I don’t have regular green-issh “install” button. So you just click on install and wait out the process.

Then also on the search bar type in “Flutter”

So just install and restart your IDE.

On restart you would notice that Android studio now has Flutter project as an option.

Select Start a new Flutter project > Flutter Application

You then proceed to this screen.

You don’t have the Flutter SDK installed, but Android Studio can help you with that. Just select the directory you want it installed in and click on Install SDK… Android studio will clone the repo into the specified directory and voila you have the SDK installed. You need to do one more thing, but go ahead and finish the project.

Locate the folder you specified for the Flutter SDK, then open a new terminal at that folder.

At this stage you can either temporarily set our PATH variable or permanently add Fluter to you PATH.

To add temporarily,

1

export PATH=`pwd`/flutter/bin:$PATH

To add permanently,

1

export PATH=$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin

then run echo $PATH to confirm if added successfully.

Next run the following command to see if there are any dependencies you need to install to complete the setup:

1

flutter doctor

This command checks your environment and displays a report to the terminal window. The Dart SDK is bundled with Flutter; it is not necessary to install Dart separately.

The first time you run a flutter command (such as flutter doctor), it downloads its own dependencies and compiles itself. Subsequent runs should be much faster.

The following sections describe how to perform these tasks and finish the setup process.

Once you have installed any missing dependencies, run the flutter doctorcommand again to verify that you’ve set everything up correctly.

So you ready, thats all, all set up.

Lets return to the project we created on Android studio. We have a default project provided by Flutter.

You can either plug in your a mobile device, run on an Android emulator or iOS simulator. Locate the main Android Studio toolbar, select which you want and then click PLAY.

Flutter offers a fast development cycle with hot reload, the ability to reload the code of a live running app without restarting or losing app state. Simply make a change to your source code, tell your IDE want to hot reload, and see the change in your simulator, emulator, or device.

Change the string'You have pushed the button this many times:' to'You have clicked the button this many times:'

Do not press the ‘Stop’ button; let your app continue to run.

Click the Hot Reload button (the button with the lightning bolt icon).

You should see the updated string in the running app almost immediately.

Thanks for reading and hope you enjoy Flutter. Feel free to leave a comment below if you have any issues, suggestions, etc.

Post navigation

About Me

Hello I am Juma Allan, Founder and Author of Android Study. I am currently working as the Lead Android Engineer at dLight Solar, an Open Source Enthusiast and a big time Android Lover, learning Go and sharing my knowledge with others.

“If you don’t build your dream someone will hire you to help build theirs”