Getting started with Flutter Part 1

Cross-platform development has been a goal since mobile development became a big thing. The ability to write one app for both iOS and Android can save significant time and effort for your company and team.

There are various tools for cross-platform development out there, including web-based tools such as PhoneGap, frameworks such as Xamarin from Microsoft, and newer tools such as React Native from Facebook. Each toolset has pros and cons and they have met with varying degrees of success in the mobile industry.

The new kid on the block is Flutter from Google, which was announced in February at Mobile World Congress 2018 to be entering a beta phase. It features fast development cycles, fast UI rendering and unique UI design, and native app performance on both platforms.

So Flutter 🤔🤔

Flutter apps are written using the Dart programming language, also originally from Google and now an ECMA standard. 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 and iOS simulator.

Setting up your development environment

Flutter development can be done on macOS, Linux, or Windows. While you can use any editor with the Flutter toolchain, there are IDE plugins for IntelliJ IDEA, Android Studio and Visual Studio Code that can ease the development cycle. We’ll use Android Studio and VS Code 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:

1. Clone the Flutter git repository
2. Add the Flutter bin directory to your path
3. Run the flutter doctor command, which installs the Flutter framework including Dart and alerts you to any missing dependencies
4. Install missing dependencies
5. Set up your IDE with a Flutter plugin/extension
6. Test drive an app

Using Android Studio

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

1. Open Android studio (This is me assuming you already have Android studio up and running on your computer)
2. Open Android Studio>Preferences..>Plugins and select Browse repositories.
3. 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”

Note the choice of plugin here, its called “Flutter” with 116439 downloads as at this write up, size of 1.7 Mb and flutter.io as the vendor.

So just install and restart your IDE.

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

5. Select Start a new Flutter project > Flutter Application

Notice the next screen you see

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 vualá you have the SDK installed. You need to do one more thing, but go ahead and finish the project.

6. 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,

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

To add permanently,

$ 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:

$ flutter doctor

This command checks yourenvironment and displays a report to the terminal window. The Dart SDK is bundled with Flutter; it is not necessary to install Dart separately. Check the output carefully for other software you may need to install or further tasks to perform (shown in bold text).

For example:

[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/obiwan/Library/Android/sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.io/setup/#android-setup for detailed instructions.

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 doctor command 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.

Default Flutter project

Try a hot reload

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.

1. Change the string
   'You have pushed the button this many times:' to
   'You have clicked the button this many times:'
2. Do not press the ‘Stop’ button; let your app continue to run.
3. 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 as much as I “am beginning” do. Feel free to leave a comment below if you have any issues, suggestions, etc. I would take another tutorial on using Flutter with VS Code.

If you enjoyed this story, please click the 👏 button and share to help others find it.

You can find part 2 of this series here

This article was done by Osagie Omon (Mobile Developer, UI & UX enthusiast) and amadosi odaibo (FullStack Engineer).