Introduction to Flutter in Android

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)

Open Android Studio > Preferences.. > Plugins and select Browse repositories.

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,

To add permanently,

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:

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.

Happy Coding!

3 Replies to “Introduction to Flutter in Android”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.