Today, we’re pleased to support Flutter’s growing community of builders by releasing Ably’s Flutter plugin v1.0. This makes it easy for developers to add WebSocket-based pub/sub messaging to their Flutter applications.
Flutter has grown incredibly over the past few years, providing a platform to build modern applications. Increasingly, developers are looking to build event-driven applications where user interactions play out in realtime. That’s where Ably’s Flutter plugin comes in.
Read on to know everything about it or scroll down to the last section to get started.
What is Flutter?
Flutter is an open-sourced UI toolkit by Google that allows a single codebase to compile for both Android and iOS platforms. This means less code, less time but a wider audience. Ah, every app developer's dream.
About the Ably Flutter plugin
The Ably Flutter plugin brings realtime magic to the much loved Flutter ecosystem. If you are new to Ably, here's a quick summary of what we do:
- We provide a scalable, pub/sub messaging infrastructure that you can use on any platform and with any programming language (Seriously, there are work-arounds for any SDKs or platforms that we don't yet directly support).
- While Ably primarily operates over WebSockets, you have the flexibility of choosing between WebSockets, MQTT or Server-Sent Events (SSE) based on the best-suited conditions for the platform on which you intend to run your app.
- Our pub/sub messaging service comes pre-engineered with a full suite of additional features like message-ordering, guaranteed delivery, webhook powered integrations with third-party apps and platforms, and many more. We provide everything you need for any realtime application.
The Ably Flutter plugin is a wrapper around our fully-featured Cocoa and Java client library SDKs, providing iOS and Android support for those using Flutter and Dart.
The plugin is fully open-sourced and is still a work in progress. While it already supports the major Ably functionality, i.e. Pub/Sub messaging, other features like Presence - which is useful to find out the online/ connection status of a client, and Message History - which is useful to retrieve historical messages up to a certain point in time, are soon to come. You can follow the project on GitHub (please feel free to contribute) for updates and roadmap.
See it working in a chat app
While I focus my dev days mostly on web apps and NodeJS backends, the enormous popularity of Flutter intrigued me to try it out. I found a YouTube video by Marcus Ng about Flutter chat UI kit and decided to add realtime messaging to it with the Ably Flutter plugin and bring the chat app to life. 10min well spent and I had a production-ready chat app.
You can check out the full source code for this chat app on GitHub. I also made a video explaining the key parts:
The whole realtime messaging part in the chat app comes down to three main things - Initialize Ably, Publish and Subscribe:
Simple as that.
Don't worry, we also have an in-depth step-by-step tutorial written by Flutter experts for you to follow along, more on this later...
How do I get started?
1. Check it out on pub.dev (and give it a thumbs up!)
The Ably Flutter plugin is available as a package on pub.dev. Just look for
ably_flutter_plugin. After adding it to your
pubscpec.yaml file and running
, you will be able to import Ably in your project files like so:
flutter packages get
import 'package:ably_flutter_plugin/ably_flutter_plugin.dart' as ably;
2. Dive into the docs
Check out the official Ably documentation to learn more about the various methods and features available and integrate the Flutter Plugin with the Quickstart Guide. On any page with code snippets, you should be able to switch to the Flutter version of the docs by choosing the language from the navbar on the top right.
3. Follow an in-depth tutorial — Building a Realtime Cryptocurrency App with Flutter
We invited two Google Developer Experts for Flutter - Mais Alheraki and Thomas Burkhart - to try out the Ably Flutter plugin. They built a beautiful cryptocurrency app that you see below and wrote a step-by-step tutorial for you to follow along. You can also check out the full source code for this app on GitHub.
We're excited to see what you build with this plugin. Send your creations our way (@ablyrealtime) and we'll be happy to share it around and give a shoutout.
If you have any questions or ideas, feel free to reach out to us.