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 Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
For a deeper introduction, check out Mediacurrent’s presentation on Decoupled Drupal with Flutter (Florida Drupalcamp 2020).
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.
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.
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.
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.
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.
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.
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.