Learn FlutterJS and start your journey

Introduction

Welcome everyone. My name is Anitha Michael Raj. I work as a UI developer in Bangalore. Lets get started !!

FlutterJS

• Flutter is an open source framework to create high quality, high performance mobile applications across mobile operating systems — Android and iOS.
• It provides a simple, powerful, efficient and easy to understand SDK to write mobile application in Google’s own language, Dart.
• Flutter also offers many ready to use widgets (UI) to create a modern application. These widgets are optimized for mobile environment and designing the application using widgets is as simple as designing HTML.

Features of FlutterJS

Flutter framework offers the following features to developers −

• Modern and reactive framework.
• Uses Dart programming language and it is very easy to learn.
• Fast development.
• Beautiful and fluid user interfaces.
• Huge widget catalog.
• Runs same UI for multiple platforms.
• High performance application.

Advantages of FlutterJS

Flutter comes with beautiful and customizable widgets for high performance and outstanding mobile application. It fulfills all the custom needs and requirements. Besides these, Flutter offers many more advantages as mentioned below −

• Dart has a large repository of software packages which lets you to extend the capabilities of your application.
• Developers need to write just a single code base for both applications (both Android and iOS platforms). Flutter may to be extended to other platform as well in the future.
• Flutter needs lesser testing. Because of its single code base, it is sufficient if we write automated tests once for both the platforms.
• Flutter’s simplicity makes it a good candidate for fast development. Its customization capability and extendibility makes it even more powerful.
• With Flutter, developers has full control over the widgets and its layout.
• Flutter offers great developer tools, with amazing hot reload.

Widgets

The core concept of the Flutter framework is In Flutter, Everything is a widget. Widgets are basically user interface components used to create the user interface of the application.

In Flutter, the application is itself a widget. The application is the top- level widget and its UI is build using one or more children (widgets), which again build using its children widgets. This composability feature helps us to create a user interface of any complexity.

For example, the widget hierarchy of the hello world application (created in previous chapter) is as specified in the following diagram −

• MyApp is the user created widget and it is build using the Flutter native widget, MaterialApp.
• MaterialApp has a home property to specify the user interface of the home page, which is again a user created widget, MyHomePage.
• MyHomePage is build using another flutter native widget, Scaffold
• Scaffold has two properties — body and appBar
• body is used to specify its main user interface and appBar is used to specify its header user interface
• Header UI is build using flutter native widget, AppBar and Body UI is build using Center widget.
• The Center widget has a property, Child, which refers the actual content and it is build using Text widget

Layers

The most important concept of Flutter framework is that the framework is grouped into multiple category in terms of complexity and clearly arranged in layers of decreasing complexity. A layer is build using its immediate next level layer. The top most layer is widget specific to Android and iOS. The next layer has all flutter native widgets. The next layer is Rendering layer, which is low level renderer component and renders everything in the flutter app. Layers goes down to core platform specific code

The general overview of a layer in Flutter is specified in the below diagram −

In Flutter, everything is a widget and a complex widget is composed of already existing widgets.

• Interactive features can be incorporated whenever necessary using GestureDetector widget.
• The state of a widget can be maintained whenever necessary using StatefulWidget widget.
• Flutter offers layered design so that any layer can be programmed depending on the complexity of the task.

Conclusion

Have some relaxing time for yourself. So far, it was more of theoretical learning. I promise moving forward it’s going to be much more exciting and much more challenging.

Stay tuned and practice well. Please drop comments and clap. It helps us to stay motivated to write more such series.