An Introduction to Flutter — The Basics

In general, developing mobile applications like Native Apps for Android, Windows Phone, and iOS is a complex and challenging task. Many frameworks are available for app developers to develop a mobile application. Android and iOS both provide a native framework based on Java language and Objective-C/Shift language respectively, which means app developers need to code in two different languages using two different frameworks to develop mobile applications for both Operating Systems. However, in the end we might also have a different result between iOS and Android due to the different native components.

To overcome and manage the complication, there is a mobile framework supporting both Operating Systems, android and iOS — Flutter — a simple yet attractive and high-performance framework based on the programming language “Dart”. In simple words, Flutter is an app SDK (Software Development Kit) for building high-fidelity and effectual apps for iOS, Android, web, and desktop from a single code-base.

The first version of Flutter was known as “Sky” and ran on the Android operating system. It was unveiled at the 2015 Dart developer summit. — Wikipedia

Of course, it is a free and open-source mobile UI framework created by Google and released in May 2017 in stable release Alpha. Flutter is new, but a promising platform, which becomes a source to attract the attention of large companies like Apple, Amazon, Microsoft, and many others which have already released their apps in the market. The main aim is to enable app developers to deliver high-fidelity apps that feel natural on both platforms. Flutter is a modern framework with awesome UI for mobile applications. It is easy to learn and is gaining more and more popularity nowadays.

Two important parts of flutter particularly responsible for its popularity are:

1. SDK (Software Development Kit)- It is a collection of tools that supports developing applications. This is for creating beautiful apps for mobile, web, and desktop.
2. Frameworks -It is a collection of reusable elements like text inputs, slide buttons, hot reload and many more that can be personalised for our own needs.

Tools in flutter

Some Features of Flutter:

1. Easy handling and less testing
2. Uses Dart programming language that is almost effortless to learn because Dart is a language with C-style syntax and can compile to either native code or JavaScript
3. Fast development and high-fidelity
4. Modern and reactive framework
5. Huge widgets catalogue
6. Beautiful and fluid user-interfaces
7. Faster and more dynamic mobile native apps

Pros and Cons of Flutter:

Pros-

1. Dart has a large repository of software packages that allows extending the capabilities of a mobile native application.
2. No need to write two codes, one code for both platforms iOS and Android app.
3. Flutter offers amazing tools, with a hot reload that helps developers to refresh apps within seconds.
4. Lesser testing because of its single code base.
5. Customisation capability and extensibility make it more powerful and impressive.
6. With Flutter, developers have complete control over the widgets and their layout.

Cons-

1. Since it supports a brand new programming language, a developer needs to learn and practice a new language.
2. In flutter, both user interface and logic are intermixed.
3. As it is another framework for app development, developers are having a tough time choosing the right development tools in the hugely populated segment.
4. iOS still has problems with it.
5. Flutter has a small community, so it is challenging to fix bugs and errors if a new one is found.
6. Errors and bugs are not answerable yet.

Widgets in Flutter:

Each widget is an immutable declaration of part of the user interface. — flutter.io

Types of Widgets

Flutter uses widgets(UI) to create a modern application for mobile apps and these widgets are used best for mobile development. Designing the apps using this framework is effortless too. In fact, the flutter application is itself a kind of widget. In fact, there is a saying among the Flutter developer community that “Everything in Flutter is a widget”. Flutter widgets can assist animated and gestural apps. Later we will provide an app link that gives just a rough sketch of UI tools in flutter. Widgets might have a state. By adding some changes to the state of the widgets, Flutter will itself compare the widgets’ states (old and new) and render the widgets with necessary changes instead of re-rendering the complete widgets. There exist two types of widgets in Flutter:

1. Stateful Widgets- This type of widgets are state sensitive to boundaries and get to change themselves when a state change is detected ,i.e., they are mutable. These types of widgets can easily change their state a number of times during runtime. Developers can easily build a stateful widget in editors by using the shortcut “stf”. Some examples of stateful widgets are as follows:

1. Stateless Widgets- These widgets are not state sensitive and remain static throughout programming, i.e., they are immutable. These widgets do not change state during runtime. When app Icon, IconButton, and Text do not change in apps while the app is performing some action, you are usually working with stateless widgets. Developers can easily build a stateless widget in editors by using shortcut “stl”. Some examples are as follows:

The Hot Reload

This is the new feature that was unknown before the launch of flutter in native apps. To make very simple changes like changing background or text color, to display changes onto the screen, it will take more than 10 seconds. But flutter added a wonderful feature of “Hot Reload” to overcome this problem. It helps to quickly build UIs, add features, and fix bugs and errors.

Why is Dart the perfect choice for flutter framework?

Dart is another product by Google. It is a programming language used to code flutter based mobile apps. Dart programming language is effortless to learn and code apps; this is also the reason why app developers love flutter apps. Dart looks a bit like C and is an object-oriented programming language. So, if you prefer C or Java, Dart is definitely for you, and you’ll likely be proficient in it. Dart is not only used for mobile app development but is a programming language. When dart is used in a web application, it is trans-compiled to JavaScript, the reason that enables dart to run on all web browsers.

Dart features that make developers love flutter-

1. Dart is compiled Ahead of Time (AoT) to fast, native code, which allows almost all of Flutter apps to be written in Dart only and can run on iOS and Android both. This not only makes Flutter fast, but also makes it possible to virtually customise everything.
2. Dart can also be compiled Just in Time (JIT) for exceptionally fast development cycles, productive apps, and game-changing workflow in the app development for developers.
3. With Dart, it is very easy to make smooth animations and transitions in apps that run at 60 fps.
4. Developers have found that Dart is particularly easy to learn, code, and understand because it has many features that are familiar to users of both static and dynamic languages.
5. Dart is also an object-oriented programming language, so if you already have your hands in some other programming language then it is easy to learn.
6. Hot Reload is only possible due to Dart programming language.

With so many new features, surely Dart becomes the perfect choice for flutter developers. DartPad is another online editor which is perfect to run Dart code without installation or configuration. It is very easy to execute code; all you have to do is write code and click the “Run” button. Output is also shown within the DartPad window itself.

DartPad Window

Flutter in Gaming World

Some Games Created Using Flutter

Game Development with Flutter can be carried out smoothly and facilitated with attractive animations, delightful motions, high-fidelity and amazing performance-interactive-UIs. Flutter is the portable solution for gaming industries. It assists us to write and compile user interface codes in dart to build beautiful apps for iOS, android and web. It also provides some features in gaming like game development using single code, single, double and multiple gaming services, 2D and 3D game development etc. Game Development using flutter has become easier, faster and productive.

Here is a famous game app- Tap Hero (an app on Google Play Store). Surely, gaming has a bright future with flutter.

Flutter Web

Flutter Web is a code-compatible implementation of flutter that is rendered using standards-based web technologies: HTML, CSS, and JavaScript. With Flutter for web, you can compile existing flutter code written in Dart into a client experience that can be embedded in the browser and deployed to any web server. You can use all the features of flutter, and you don’t need a browser plug-in.

Android Studio or IntelliJ is the recommended IDE by Flutter developers. It provides you code completion, syntax highlighting, widget-editing assists, run and debug support. VSCode is another editor which is helpful and user friendly for beginners as well as for programmers.

The Flutter Community

Flutter is a new and trending framework launched in 2018 (stably), winning the hearts of many developers because of its promising work. There are so many flutter communities on various platforms where one can learn and discuss bugs and errors in one’s code. But not more than Java or C++, obviously! Flutter community reports that 116 companies use flutter in their tech stacks, including Nubank, Delivery Hero, and Policygenius.

Google has amazed us a lot with excellence and quality in Flutter. With Flutter libraries’ writing units, integration and UI tests are very simple. The configuration of the development environment is equally straightforward.

According to Google Trends, Flutter is the second most leading language, followed by React Native for developing cross-platform mobile apps in 2020.

Fingers crossed for Flutter!

This article is an attempt to give a simple Introduction to Flutter. If you have any questions about the framework, learn more here on the official website.

I also invite you to join the flutter community:

• Live chat with Flutter engineers and users
• Discuss Flutter, best practices, app design, and more on our mailing list

Flutter Gallery

You can easily find many apps based on flutter on Google Play Store. More than 3000+ apps are there on the Play Store. Sharing some app links which you can download and run in your mobile phone:

1. The link for Flutter Gallery — App on Google Play

And GitHub code link for the more enthusiastic ones.

2. The official app of the hit Broadway musical- Hamilton. It includes cool stuff like videos, merchandise stores, news, games, etc.

Here is the link for Google Play Store and Apple App Store.

3. inKino - inKino is an app made with Flutter that allows users to search for movies and showtimes in Finnkino cinemas, see movie details and buy or reserve tickets.

Here is the link for Google Play Store and Apple App Store.

These are some app links to show how flutter apps work and perform on both platforms. Be sure to check them out. Of course your experience will be good.

I hope you took interest reading the blog throughout. If you have any questions, please feel free to ask and let me know if I missed something, I’d love to learn from you.

Author: Shweta Singh