Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Extending Drupal With a Flutter Native Mobile App Experience

Parent Feed: 

If you’ve discovered this blog post, chances are you're looking for Drupal expertise and knowledge from Mediacurrent - and likely also have or plan to have a Drupal site. You've probably considered ways to extend the reach of your Drupal site. Combining Drupal and Flutter is a simple way to create a mobile app experience and reach a wider audience through App Store exposure. This post explains how.

Native mobile app experience

You’ve invested lots of time and resources into building your Drupal website. Then lots of effort populating it with great content and making sure it stays updated with fresh content. And now your analytics show you have strong audience engagement, but it’s really just holding steady and you’re looking for new ways to market your content and reach new audiences and engagement.

Perhaps your quest to optimize the mobile experience has led you to consider a mobile application. A mobile application (or "app" in the commonly used short form) can serve as an alternative marketing solution that extends your existing Drupal website. This can help attract new visitors by means of an App Store, or provide existing visitors with a new mobile experience built with a mobile application framework called Flutter.

What is Flutter?

Flutter is a cross-platform mobile application framework created by Google, with its first stable release in 2018. It competes with other frameworks like Facebook’s React Native, Microsoft’s Xamarin, and Apple’s Swift and SwiftUI. Flutter is a declarative framework written with the Dart programming language, which is comparable to Javascript in syntax. It’s an open source framework that is free to use and promotes community contributions into the code repository.

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

Source: https://flutter.dev/

For a deeper introduction, check out Mediacurrent’s presentation on Decoupled Drupal with Flutter (Florida Drupalcamp 2020).

Benefits

Cross-platform with a single codebase

The main benefit of Flutter over native platforms, like Swift for iOS and Java/Kotlin for Android, is the ability to compile native applications from a single codebase. While it’s already in progress, but not yet production-ready, there will be support in the future for web and desktop applications that can also be driven from the same, single codebase.

Cross-platform mobile application framework Flutter

Source: https://techcrunch.com/2019/05/07/googles-flutter-framework-spreads-its-wings-and-goes-multi-platform/

Open Source

While the framework was built by Google, it is an open source project. It’s free to install and use for business or personal projects without the propriety limitations of other frameworks. As with other open source projects, there is a large developer community that drives the project and provides contributions back to it in the form of writing documentation, performing code changes, and knowledge sharing of technical challenges. Get involved today in the Flutter community!

Dart programming language

Flutter’s programming language of choice, Dart, makes the framework relatively easy to learn and get started building applications. It’s particularly easy to learn and understand because it has features and borrowed concepts that are similar to other languages and frameworks, but with it’s own syntax and infrastructure. Also, it’s fast!

Flexibility and customization

Flutter is flexible and highly customizable. It is similar to Drupal in that it’s easy to get started, but when you need to extend and customize it for your own use cases, instead of reinventing the wheel for everything, there are pre-built packages and code snippets to get you going. In Drupal, there are contributed modules on Drupal.org. In React Native, there are packages on Node Package Manager (npm). In Flutter, there are Dart and Flutter packages.

Fast and steady growth rate

Flutter released its first official version in December 2018. In a little over a year, interest in the Flutter framework has increased dramatically and is still rising according to a Google Trends report.

Source: https://trends.google.com/trends/explore?cat=5&date=today%205-y&q=React%20Native,Flutter,Xamarin

Flutter has also surpassed both React Native and Xamarin on Stack Overflow, at least with the number of technical questions being asked around the technology. With the widespread adoption rate comes more developers building more complex applications, which results in more documentation, resources, and knowledge sharing in the Flutter community that can drive its continued growth and adoption.

StackOverflow trends comparison

Source: https://insights.stackoverflow.com/trends?tags=flutter%2Creact-native%2Cxamarin

Integrated developer tools with hot reload

It’s easy to get up and running with a Flutter application to start building proof-of-concept applications. Development is fast and fun with features like hot reload and Visual Studio Code editor integration. With hot reload, the changes made in the editor can be seen in real-time in a device simulator.

Everything is a Widget

A Flutter application’s user interface is composed of building blocks called widgets. A widget is comparative to the term "View" in other frameworks, except that Flutter widgets are all-encompassing, whereas other frameworks offer more separation with views, view controllers, layouts and other components.

The main building blocks to any Flutter application are going to be Stateless or Stateful widgets. These are essentially the container widgets that act as the parent to one or many more child widgets. Stateful widgets are reactive to state changes, so when the state of the data changes, the widget rebuilds it’s UI.

Examples of widgets can be structural elements like buttons and images, element styling like fonts and colors, and even layout control like padding and margin.

Flutter - everything is a widget

Source: https://hackernoon.com/flutter-create-beautiful-native-apps-in-record-time-nv1e93whh

Decoupled Drupal with Flutter

Drupal is great at complex data structures and content management. It’s also secure and highly customizable with solutions for mostly anything, and if there isn’t a solution, there are APIs to build the solution.

Flutter makes it easy to compose screens and control the navigation of an app. It also makes it possible to build a single app that can be compiled to both iOS and Android platforms. With Flutter, you get a lot of functionality baked in that typically comes with extra effort in the other frameworks.

Flutter makes it easy and fast to build beautiful mobile apps.

Source: https://flutter.dev

In order to decouple Drupal with Flutter, Flutter needs to be able to communicate with Drupal. Luckily for us, there are solutions built right into Drupal core for exposing data to external systems, such as JSON API and RESTful Web Services.

There is also a JSON:API Flutter package available to help with the communication between Drupal JSON API and Flutter. This package was used in the Contenta Flutter demonstration in this Florida Drupal Camp 2020 talk on Decoupled Drupal with Flutter.

Wrapping Up

I hope this post was helpful to provide insights into how easy it can be to extend your existing Drupal website with a companion native application with Flutter. This will, in turn, increase your audience reach with the help of App Stores. For more ways to make the most of Drupal in your marketing strategy, check out our Drupal 8 for Marketer’s ebook.

RSS Tags: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web