DEV Community

loading...
Cover image for Introduction to Flutter

Introduction to Flutter

Sudara Sachindana
Mobile Developer 📱 | UI/UX Designer 🎨 | Software Engineer | Content Writer
Originally published at dev.to ・4 min read

Flutter is

“ Flutter is a mobile app SDK for building high-performance, high-fidelity, apps for iOS and Android, from a single codebase.” — flutter.io

Flutter Intro

Overview on Flutter

Flutter is a great tool from Google for creating cross-platform applications which – starting from the newest stable version – can be deployed to the web, desktop, and mobile.

Google is promoting Flutter as a simple framework that allows us to create quality maintainable solutions. Easy, it is just the next cross-platform framework.

A Brief History of Flutter

Flutter launched as a project called Sky which at the beginning worked only on Android. Flutter’s goal is enabling developers to compile for every platform using its own graphic layer rendered by the Skia engine. Here’s a brief presentation of Flutter’s relatively short history.

Flutter History Chart

Flutter is a free and open-source mobile UI framework created by Google and released in May 2017. In a few words, this allows you to create a native mobile application with only one code. It means that you can use one programming language and one codebase to create two different apps (IOS and Android).

Flutter’s beta version was launched on 13th March 2018 and it was first to live on 4th December 2018. In such a short amount of time, Flutter has already established its position in the market.

Flutter Architecture

Flutter Architecture

Flutter is organized around layers. Each layer is build upon the previous.

From the diagram we can see the low level part of Flutter is an Engine built in C++. It provides low-level rendering support using Google’s Skia graphics library.

The high-level part of the diagram is the Framework written in Dart. It provides libraries to handle animation, gestures, rendering, widgets and more.

With all this layer the developer can do more with less code by using elements on the top or go down to customize some behavior of its app.

Everything is a widget

In Flutter, Everything is a widget nested inside the another widget. It comes with beautiful, customizable widgets and we can control the behavior of each widget and also styling becomes easy.

widget

All the widget of a Flutter app form a hierarchy where a widget is a composition of other widgets and each widget inherits properties from its parent.

Flutter Highlights

Features

Fast development

When developing with flutter, you can use a feature called hot reload. Hot reload build and run your projects faster than a second. This actually helps develop fast and resolve bugs faster.

Single code for Two platforms

Managing different codes for different platforms could be a tough job, given the fact that you need to maintain consistency. Well, that shall not be the case with Flutter, where you need to just write the code once, and you are good to go!

This saves a lot of time and resources that go into the development and testing of two separate codes. But, you need to test the end products on the different platforms separately in this case too.

High productivity

Since Flutter is cross-platform, you can use the same code base for your iOS and Android app. This can definitely save you both time and resources.

Lesser Coding

Flutter’s Dart programming language is strongly typed and object-oriented in nature. In Flutter, the programming style is declarative and reactive. Because JavaScript bridge is not necessary for Flutter, the start-up time of the app enhances.

Flutter Key Features

key Features

1. Hot Reload

The changes made by the developers can be seen instantaneously with Hot Reload. This feature is super-handy for developers as it makes the changes visible in the app itself. As the changes made are visible within seconds, developers can fix the bugs in no time.

The team can experiment with new features and improvise them continuously. Thus, this feature enables developers and designers to have complete freedom and boosts their creativity further.

2. Cross-Platform Development

CPD saves time, energy and money. With Flutter, you need to write the code once, maintain and can use that for two apps. The need has gone for developing a different code for a different platform. With Flutter, you can try developing for the Fuchsia platform which is a trial OS in process at Google.

3. Accessible Native Features and SDKs

Your app development process gets easy and delightful through Flutter’s native codes, third-party integrations, and platform APIs. Therefore, you can easily access the native features and SDKs on both Android and iOS platforms and reuse the widely-used programming languages such as Kotlin and Swift.

4. Minimal Code

Flutter is developed using Dart programming language. Dart uses JIT and AOT compilation that helps improve the overall startup time, functioning and accelerates the performance. JIT enhances the development system with the hot reload function. It refreshes the UI without putting in the effort to building a new one.

5. Widgets

In Flutter, the widgets are given an upper hand. It is capable of developing customizable and complex widgets. Most importantly, Flutter has all the sets of widgets from Material Design and Cupertino pack and it helps to provide a glitch-free experience in this case over and above all the other platforms.

6. Native Feel and Features

Flutter enables you to use your existing code Java, Obj-C and Swift to gain the key to native features which are platform specific. Camera and Geo location are features connected with the use of native languages and offers you the convenience of working in the native language and, it provides access to the native features of both iOS and Android platforms.

end

Discussion (12)

Collapse
pablonax profile image
Pablo Discobar

Good job! If you are interested in this topic, you can also look at my article about free vs paid Flutter templates. I'm sure you'll find something useful there, too.  - dev.to/pablonax/free-vs-paid-flutt...

Collapse
sudarasach profile image
Sudara Sachindana Author

Thank for your comment & i will check your article

Collapse
sriya profile image
Chathura Umayanga Sriyarathne

Keep it bro. Weldone 🤗🤗

Collapse
sudarasach profile image
Sudara Sachindana Author

Thank you soo much

Collapse
deepshan profile image
Deepshan

Good article to have full idea about flutter history and its tools 🔥

Collapse
sudarasach profile image
Sudara Sachindana Author

Thank you soo much

Collapse
chathunpc profile image
chathunpc

Clearly explained. nice artical

Collapse
sudarasach profile image
Sudara Sachindana Author

Thank you soo much

Collapse
lahirudilshan profile image
Lahiru Dilshan

flutter is awesome...nice article

Collapse
sudarasach profile image
Sudara Sachindana Author

Thank you soo much

Collapse
chandimal profile image
chathura chandimal

very useful.keep it up🔥

Collapse
sudarasach profile image
Sudara Sachindana Author

Thank you soo much