Drupal and Flutter: adding native mobile app experiences to Drupal

Even if your Drupal website is doing great, its audience engagement and user experiences can always reach new heights — the heights at which you can almost hear the fluttering of the wings!

It’s the Flutter framework that will be the main topic of this blog post from the Golems Drupal team. We will discuss what Flutter is, how it works, what benefits and features make it the solution of choice for more and more developers, and how Drupal and Flutter are combined for creating native mobile app experiences.

What is Flutter? Brief introduction and overview of benefits

Flutter is a free and open-source cross-platform UI toolkit or framework that helps developers quickly and easily build beautiful apps for mobile, web, and desktop. The applications are natively compiled from a single codebase.

The Flutter toolkit is extremely flexible and customizable thanks to the use of packages and widgets. Everything is designed to provide native end-user experiences. It’s possible to integrate Flutter into an iOS or Android app that already exists in the store. Flutter can also boast excellent documentation and great community support.

Flutter is primarily known as a toolkit used for natively compiled mobile apps. However, this cross-platform solution has been making great strides towards such niches as desktop, web, and embedded, so its popularity there is growing as well.

The Flutter UI toolkit, just like the Dart programming language it’s based on, are the products made by Google. The first stable release of Flutter came in 2018 but the product has quickly become a strong competitor of frameworks like React Native by Facebook, Apache Cordova by Nitobi, Xamarin by Microsoft, etc. According to Statista, Flutter is currently 2nd after React Native on the list of cross-platform mobile frameworks used by developers in 2019-2020 (but very close to the winner).

Who uses Flutter?

Despite its young age in the software world, Flutter already has an impressive list of famous brands that are using it in their application ecosystem. It includes:

• Groupon
• Square
• Reflectly
• Alibaba Group
• Abbey Road Studios
• Tencent
• CapitalOne
• eBay
• The New Your Times
• Stadia
• Sonos
• MGM Resorts
• Insight Timer
• Baidu
• Hamilton
• jd.com
• realtor.com

and more.

Naturally, Google itself uses its creation on a variety of its own products from Google Ads to Google Assistant apps.

The key features of Flutter at a closer look

Fast, customizable, flexible, native in the app design and performance — the list the benefits of Flutter needs a good explanation. What is inside Flutter that provides all this? Here is a little overview of this.

The Dart programming language

Dart, the programming language behind Flutter, is an object-oriented language with a C-style syntax. Out-of-the-box, Dart is designed for working in a single codebase. It compiles everything to native code for mobile and desktop and to JavaScript for the web. The Dart team constantly works on adding new lucrative features, for example, providing the support for conditional UI or making the compiled code faster.

The hot reload feature

Building UIs, adding new features, or fixing bugs becomes especially fast and easy with hot reload. The result of every change developers make in the code editor is immediately available for them to see on simulators, emulators, and so on. For this purpose, updated source code files get injected into the running VM (Dart Virtual Machine). After the update made by the VM, Flutter rebuilds the widget tree automatically.

Widgets for anything

It’s easy to build UIs by combining and customizing Flutter’s ready building blocks called widgets. It’s also possible to build your own widgets if you need them. In React Native, widgets would be components.

Widgets can be anything — buttons, sliders, scrolls, icons, toggles, and so on. There are visual, structural, platform, and interactive ones.The Flutter widget catalog has them all organized by category. The categories include Cupertino (iOS-style widgets), Material Design, Accessibility, Animation and Motion, Painting and effects, Scrolling, Styling, Async, and many more.

Native-like UI components

With its big focus on native user experiences, Flutter has its UI components designed to look identical with those on iOS or Android — with every pixel taken into account. They incorporate all the platform differences. That’s why the look and performance of Flutter applications is so much like the look and performance of native iOS or native Android apps.

Pre-built packages

Every open-source platform has ready packages or code snippets for various purposes so there’s no need to reinvent the wheel. In Drupal, these would be contributed modules placed on drupal.org. Similarly, Flutter has a pub.dev resource with these. In addition to a search box that helps developers find specific packages, there are also blocks with recommended and popular packages for Flutter and Dart. One of the blocks includes the packages selected by the Flutter Ecosystem Committee, which is yet another evidence of how active the Flutter community support is.

Detailed documentation

Flutter’s documentation has everything that helps developers get started — tutorials, videos, samples, cookbook recipes, API docs, and much more. Special documentations sections are dedicated to developers coming from other platforms such as Android, iOS, React Native, Xamarin.Forms, and web development, so they can easily grasp the fundamental differences.

Useful integrations

The Flutter creators are also serious about building top-notch integration, among which are Google's Firebase mobile platform, Android Developer Studio for building apps for Android devices, and Microsoft’s Visual Studio for Windows, Linux and macOS.

Connecting Drupal and Flutter

Thinking about ways to extend the reach of their Drupal websites, many business owners ask about the possibility of creating Drupal native mobile apps. Here is how this works — Drupal can be a source of structured content, or a powerful backend, for various applications from a native mobile app to even a smart TV. In comparison to purely native iOS or Android apps, cross-platform apps can be delivered faster and are relatively cheaper in development and maintenance.

Flutter has emerged as one of great cross-platform solutions for making your Drupal data available to a beautiful, fast, customizable, natively compiled mobile application, just like to a desktop or web application. The framework has attracted much of the Drupal community’s attention — for example, it was among the topics at DrupalCon Seattle 2019 and Decoupled Days 2020.

Drupal is open for communication with third-party apps. The Drupal team’s priority for the nearest future is to further enhance Drupal’s third-party integration capabilities. To connect Drupal and Flutter, we will need Drupal’s new core module — JSON:API. It used to be a contributed solution until Drupal 8.6, but now it’s hard to imagine the Drupal core web services package without this module.

It’s included from the start and needs no installation, so you just need to enable this Drupal module to get your entities exposed as API endpoints in JSON. The module itself is zero-configuration, but there is also a companion Drupal JSON:API Extras module that allows you to customize the APIs.

With Drupal JSON:API enabled and the needed content created to share with Flutter, you install Flutter and configure it to pull specific data from JSON:API so it returns a widget with Drupal content. There is also a helpful package called JSON:API for Dart/Flutter meant to facilitate the connection between Drupal’s JSON:API and Flutter. The package consists of six libraries: the Document, the Client, the Server, the HTTP, the Query, and the Routing library.

Try the “Drupal + Flutter” combination!

New days dictate new ways of reaching out to your audience. Your users will love the native mobile experiences provided by Flutter! Ask the Golems Drupal development team to connect Drupal to Flutter — and let a new beautiful application work wonders in expanding your market reach.

Eager to build bridges between different technologies,

your Golems.