5 min. read

September 29, 2021

Flutter

What is Flutter And Why It's used For Mobile App Development

The future of cross-platform app development

Dulanka  Karunasena

Dulanka Karunasena

Back in 2017, Google released Flutter as a native mobile development framework for Android and iOS. Since then, it has revolutionized the cross-platform development world by introducing support for Windows, macOS, Linux, and Web. In simple terms, you can develop apps for all six platforms using a single codebase.

Flutter is built around the Dart programming language. Dart was created by Google back in 2011 for client-side development.

Dart is object-oriented and compiles into native code or JavaScript, making it useful to develop faster apps. A core feature of Flutter is the usage of widgets to structure the UI (user interface). Widgets are a prebuild set of UI components that we can personalise depending on our needs. In 2021 Flutter announced its new release, Flutter 2, with enhanced cross-platform capability.

Tell us about your career ambitions

Take our survey

Widgets: The Core of Flutter UI

Widgets are the building blocks of the interface of a Flutter app and define the structure of a UI element. A Flutter application interface is a combination of nested widgets.

Widget Structure of a Sample Flutter App
Widget Structure of a Sample Flutter App

If you are coming from the React Native world, a widget is similar to a JSX element. Even though widgets are immutable by default, Flutter allows associating mutable states using StatefulWidgets.

The two common types of widgets are,

  • StatelessWidget — A widget that depends only on its configuration, and the state doesn’t update.

  • StatefulWidget — A widget that allows the state to change dynamically.

Additionally, Flutter provides platform-specific widgets. For example, material Widgets implement Google’s material design, and Cupertino Widgets will give the native iOS experience. It doesn’t mean that you have to maintain two different codebases. Material Design can be used across all platforms.

State Management

The state is the information inside an app that can change over time or due to user interactions. Flutter manages the state by redrawing the UI whenever a state change occurs. Flutter is fast enough for that.

Flutter aims to render apps at a performance of 60 frames per second (fps).

Flutter identifies app state in two approaches, namely UI State and App State. UI state is the local state of a widget. We can use the State class and setState() method to change the UI state.

Updating the state using setState()
Updating the state using setState()

App state is the global state which is common to many parts of the app. As an example, the authentication details of a user residing in the app state. To manage application-wide state, you can use common approaches like Redux or Rx.

Debugging Flutter Apps

Debugging flutter apps is easy, thanks to its hot reload feature. Hot reload will allow you to see the output of code changes in real-time without breaking the current state. It is supported in both emulators and devices.

Flutter apps run on a Dart Virtual Machine during development and use Just-in-time (JIT) compilation to support Hot reload.

Flutter provides a wide range of debugging tools with its DevTools feature. DevTools offers valuable insights for UI inspection, CPU profiling, memory and network profiling, etc. DevTools runs in a browser, and it is also available as extensions in Android Studio and VS Code.

Flutter DevTools
Flutter DevTools

Community Support

Needless to say, Flutter has had large community support since its initial release in 2017. It is the most starred repo among cross-platform frameworks in Github with 128K stars and ranks overall 16th.

In StackOverflow’s ‘Most loved, dreaded, and wanted’ survey, Flutter ranks 2nd in the 'Loved' and 3rd in the 'Wanted' categories.

'Most loved, dreaded, and wanted technology' survey by StackOverflow
'Most loved, dreaded, and wanted technology' survey by StackOverflow

You can seek help from places like StackOverflowFlutter AwesomeFlutter Community, and It’s All Widgets to start development with Flutter.

Global Flutter Use Cases

Today Flutter is used globally across industries, platforms, and Operating Systems, mainly due to its cross-platform support. Teams have identified Flutter to be time and cost-saving as they can use a single codebase to develop across platforms.

Canonical, Microsoft, Samsung, Sony, and Toyota are among the big names that have integrated Flutter into their ecosystems.

Toyota powering their infotainment systems with Flutter shows the ability of Flutter inside embedded systems. In addition, the publisher of Ubuntu: Canonical has integrated support for Flutter, while Microsoft has brought foldable device support to Flutter.

Wrap Up

Flutter has become a hot topic among developers nowadays. The major reason for Flutter to rank higher compared to other similar frameworks is the ability to cater to 6 different platforms with just a single codebase.

Additionally, Flutter makes developers’ lives easy with its prebuilt Widgets, state management, and intuitive debugging tools. It is also backed by a massive developer community and industry giants.

I request you to refer to the Flutter Docs and get hands-on experience in Flutter. Thanks for reading!

Tell us about your career ambitions

Take our survey