Getting started with Flutter 2.0

7 min readMar 11, 2021

As the smartphone market grew with the increase in popularity of Android and iOS users along with the short success of Windows Phones, developers around the world felt the need to target all smartphone screens. To tap this need, multiple cross-platform solutions emerged in the market, like React Native by Facebook, PhoneGap by Adobe, Flutter by Google, etc. Each of these solutions has the same purpose but differs in underlying architecture and principles.

React Native, for instance, uses JavaScript for business logic while Native components for UI. Some of the famous apps that are developed using React Native are Instagram, Facebook, etc. Although React Native is currently holding the top place as a choice for cross-platform development, it has its cons. As it uses JavaScript, it takes up more memory when compared to others. Also, there are unwanted bridges if your program needs to interact with native APIs which requires lots of data transformations and this slows the app down.

Solving certain challenges of ReactNative and similar frameworks(like NativeScript, ViewNative, etc.) Flutter is another promising cross-platform development tool introduced by Google back in May 2017 that is growing rapidly in the recent past. Unlike React Native, Flutter uses Dart as a programming language, which is compiled into machine code targeted at various iOS and Android(and the diverse processor variants like ARM, x64, etc. part of the Android ecosystem). Due to this, Flutter manages to skip past the need for a custom run-time engine(like JS bridge in case JavaScript-powered hybrid apps) and runs just like native applications — making apps developed using Flutter as fast as those developed using native toolkit.

Setting up Flutter

Regarding the Operating System preferences, Flutter 2.0 is quite flexible. It can be used on Windows, macOS, Linux as well as ChromeOS. We will be discussing the steps for installing Flutter in Linux(Ubuntu) but if you need to see for any other Operating System, here is the link: https://flutter.dev/docs/get-started/install

In Linux, Flutter can be installed manually as well as using snapd, although later one is the easiest and preferred method.

To install Flutter using the snap package manager, simply run the following command in your terminal

sudo snap install flutter --classic

Although this should do it, just to be sure that you haven’t missed any dependencies, run the following command in the terminal-

flutter doctor

In my case, it showed me that Android Studio was not installed. Flutter needs IDEs and the most common of those are Android Studio, VScode, Xcode. We will be using Android Studio here.

Remember to use JDK 8 instead of 9 or 11 as overall develop environment will throw exceptions at certain places because of changes in underlying classes/lib over JDK updates

Android Studio

Although Android Studio is just an IDE and not necessary for setting up the SDKs, it is preferred to use this. Android SDK is a collection of software development tools and libraries required to develop Android applications. And you have to set a path to this SDK to start working with Flutter. Installing Android Studio does that for you. To download Android Studio, click here: https://developer.android.com/studio

Extract the downloaded zip file at the desired location in your system's file system.

nano ~/.bash_profileexport ANDROID_HOME=/media/ravinder/1tb-important/tools/android-sdk
export ANDROID_SDK_ROOT=/media/ravinder/1tb-important/tools/android-sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64

Add this line at the end of the existing content of the file

...
...
...
export $PATH=$PATH:/path-to-uncompressed-studio-folder/bin

Here you just added a configuration that extends the existing PATH environment variable, however, the system won’t refresh its in-memory settings automatically. So, for that, you need to fire the subsequent command.

source ~/.bash_profile

Now, you just need to type [studio.sh](<http://studio.sh>) to open the Android Studio from any terminal

studio.sh

Bonus for Linux/Ubuntu users, on the system, restarts the bashrc configurations are loaded for logged-in user, not shell login. But you can change that in terminal preferences.

Open the terminal, click on edit in the top menu ribbon, open preferences and then choose Command and select Run command as a login shell

Flutter documentation does a pretty good job regarding the guidelines for installation. Once you are done with the installation, again run flutter doctor to see if any of the issues persist. In Android Studio, you will also need to add the Flutter plugin to use it. Just go to Configure>Plugins, look for Flutter and click Install. Now, whenever you want to create a new Flutter project, choose 'Create a new Flutter Project' and you'll be taken to a sample main.dart file.

Start either an iOS emulator or Android Emulator to see your work. You can select your device from AVD Manager.

Simply run your code and you will see any change you do in the code will be rendered in the emulator as soon as you save them.

Few things that Flutter is good at:

Hot Reload

This is one of the features that help Flutter stand out from other similar tools. This feature lets you see the changes in running the app you make to code almost instantly and that without stopping or need to rerun the app.

Although most changes like any UI changes works with hot reload, some things like changes in underlying data including Arrays, variables, etc may need you to save and then re-run the app. But this feature still makes it easier and faster to develop.

To test this, you can make any small change say a text change without stopping the app and save the changes, and your change is already reflected on the emulator.

Multiple platforms

Flutter UI layout is mainly based on the use of Widgets. These widgets are somewhat similar to development in React. Using these widgets, the same apps can be developed for iOS, Android, Windows, macOS, and Linux, and that with only a one-time effort. If you still want some of the things specific to a platform, you can also manipulate your code to do so.

Not only this, you can see in real-time how your app is looking on a browser as well. Just choose Chrome, Firefox, Safari, or Edge from the device's part and your app will be stretched over the browser window.

Easy and effective testing

Flutter also provides automated testing to make development and debugging easier. Automated testing in flutter is mainly of the following types:

Unit Testing: for a single function, method or class.
Widget Testing: for a single widget. This is similar to Component Testing in other frameworks
Integration Testing: for the complete app or a large part of the app

Custom Widgets

Flutter has a wide range of custom widget which covers the whole UI layout of a Flutter app. They can be subclasses of either StatelessWidget or StatefulWidget, depending on whether your widget manages any state. A widget falls under a StatelessWidget class if the widget you are using doesn't depend on anything other than its own configuration information. On the other hand, the widgets that come under the StatefulWidget class are those whose state can change dynamically eg. with the system state, etc. A few of the basic Flutter widgets are: Text, Row/Column, Stack, Container etc.

Using Stateless/StatefulWidget:

class MyAppBar extends StatelessWidget {
  ---
}

Material Components

It is super easy to use widgets that follow Material Design to build an app in Flutter. It uses the MaterialApp widget to display Material Design Widgets properly on the screen. Although it is optional to use the MaterialApp widget it provides a cleaner look to Material Design Widgets. You can use MaterialApp like this:

void main() {
  runApp(MaterialApp(
- - -
);
}

Advanced UI

Apart from the standard UI components and layout, Flutter also provides the use of Advanced UI components like the following:

Slivers: A sliver is a small portion of a scrollable area on your screen that can be defined to behave in a special way like to achieve custom scrolling effects, such as elastic scrolling.
Gestures: Several gestures like tap, double-tap, horizontal & vertical drag, and Scaling are available in Advanced UI for a Flutter app. A GestureDetector is used to listen to the gesture events and give appropriate output. Most of the Material components respond to gestures by default, like, buttons for tap, Lists for swipes, etc.
Splash Screens: Ever seen the Instagram or WhatsApp logo before the actual app opened? That is what Splash Screen is. It is the initial screen that is shown before your mobile app loads. In flutter Splash screen for iOS is applied using Xcode storyboard’s default template LaunchScreen.storyboard