Quick Introduction to Flutter

A simple and high-performance multiplatform framework based on Dart language, which provides high performance with a native look and feel.

All About Flutter:

Flutter is a cross-platform UI toolkit designed to allow code reusing across multiple platforms such as iOS, Android, Web, and Desktop.

Flutter does this by allowing applications to interface directly with underlying native services, Thus allowing developers to deliver high-performance software that feels natural on different platforms.

Flutter supports the web since Dart has been compiling to JavaScript for as long as the language has existed ( 🫣 back in 2011) with optimized development and production builds.

Did you know that you can actually run Dart code in four ways: (Web — code is precompiled into JavaScript using the dart2js compiler, Stand-alone — ships with a stand-alone Dart VM, Ahead-of-time compiled — can be AOT-compiled into machine code, Native — includes the dart2native compiler)

Flutter is incredibly easy to test with 2 types of testing, one is the widget test (commonly referred to as a component test) which tests a single widget, and the other is the integration test which tests the complete app or a large chunk of an app.

Features in Flutter

Flutter framework offers the following features:

• Advanced and Reactive.
• Build using Dart which is very easy to learn.
• Single codebase thus faster development.
• Target platform builds which feel Beautiful UI with fluid UX.
• A wide catalog of widgets.

The History:

Dart was founded by Lars Bak and Kasper Lund and unveiled in October 2011. Version 1.0 was later released on November 2013.

In 2015 Dart VM was to be added in Chrome but plans were dropped with version 1.9 focusing on compiling to JavaScript dart2js.

version 2.0 introduced a typed system and later on dart added dart2native, this allowed native compilating to the Linux, macOS, and Windows platforms.

Dart is a descendant of the “Algorithmic Language” ALGOL family, alongside C, Java, C#, JavaScript...

Flutter was known as Sky which only worked on one platform (Android) and It was unveiled at the 2015 Dart developer summit. In December 2018 version 1.0 was released.

On March 2021, Google released version 2.0, This major update brought official support for web-based applications.

.On May 2022, Google announced the release of version 3.0 and Dart 2.17. This update expanded the total number of platforms supported to six.

The Architecture:

The major components of Flutter are:

• Dart Language— apps are written in the Dart language and flutter makes good use of Dart's rich advanced features.
• Flutter engine — written primarily in C++, flutter provides low-level rendering support.
• Foundation library — provides basic classes and functions that are used during development.
• Design-specific widgets — framework contains two sets of widgets that conform to specific design languages (Material Design & Cupertino)
• Flutter Development Tools (DevTools) — a suite of performance and debugging tools for Dart and Flutter.

Flutter widgets are built using a modern framework that takes inspiration from React. The central idea is that you build your UI out of widgets with the ability for configuration and state management.

Flutter builds run in a virtual machine during development, this allows for a stateful hot reload without needing a complete recompile. For release, builds are compiled directly to machine code, whether Intel x64 or ARM instructions or to JavaScript if its a web application.

Flutter layer as an extensible, layered system. It exists as a series of independent libraries that each depend on the underlying layer. No layer has privileged access to the layer below, and every part of the framework level is designed to be optional and replaceable.

Comparison with other reactive frameworks

Flutter is a reactive, pseudo-declarative UI framework encouraged by React. This means a developer provides a mapping from the system state to the interface state. This is made possible by the fact that flutter takes the task of updating the interface at runtime when a state changes.

This approach is inspired by a bit of React framework, which includes a rethinking of many traditional design principles 🤫.

With Flutter and other reactive frameworks, you can only create the UI description, and the framework takes care of using that one configuration to both create and/or update the user interface as appropriate. Flutter builds its UI based on widgets (not different from components).

Flutter setup is pretty straightforward

Installation & Requirements

Flutter supports some of the commonly used operating systems: ( Windows, macOS, Linux, ChromeOS)

To get started your operating system must meet these minimum requirements:

Windows

• Operating Systems: Windows 10 or later (64-bit), x86–64 based.
• Disk Space: 1.64 GB + disk space for IDE/tools
• Tools: Flutter depends on these tools (Windows PowerShell 5.0, Git for Windows)
• Installation: Install flutter windows link

macOS

• Operating Systems: macOS
• Disk Space: 2.8 GB + disk space for IDE/tools.
• Tools: Flutter uses git for installation and upgrade. We recommend installing Xcode,
• Installation: Install flutter macOS link

Linux

• Operating Systems: Linux (64-bit)
• Disk Space: 600 MB + disk space for IDE/tools.
• Tools: Flutter depends on these command-line tools being available in your environment.
• bash, curl, file, git 2.x, mkdir, rm, unzip, which, xz-utils, zip
• Installation: Install flutter Linux link

Shared libraries: Flutter test command depends on this library being available in your environment.

• libGLU.so.1 - provided by mesa packages such as libglu1-mesa on Ubuntu/Debian and mesa-libGLU on Fedora.

ChromeOS

• Operating Systems: Chrome OS (64-bit) with Linux (Beta) turned on
• Disk Space: 600 MB (does not include disk space for IDE/tools).
• Tools: Flutter depends on these command-line tools being available in your environment.bash, curl, git 2.x, mkdir, rm, unzip, which, xz-utils

Shared libraries: Flutter test command depends on this library being available in your environment.

• libGLU.so.1 - provided by mesa packages such as libglu1-mesa on Ubuntu/Debian
• Installation: Install flutter ChromeOS link

Flutters sweet conclusion

In flutter, everything is built on top of Widgets (UI components, UI styles, UI themes…). all these widgets range from Material to Cupertino Design-focused packs which help provide a glitch-free experience between platforms sharing the same codebase.

Thank you for spending time reading this article, I hope you enjoyed what you read and learned something. If you have any feedback, kindly leave them in the comments below.

Want to keep in touch online? Medium | Twitter | Instagram | Youtube