Introducing the Ably Flutter plugin

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.

Flutter apps are written in Dart, a strongly-typed object-oriented programming language, also by Google. With its C-style syntax and borrowed concepts from many other languages like Java, C# and JavaScript, Dart did receive a bit of criticism when it was initially unveiled in 2013. But thanks to Flutter, the tide has turned and it's now picked up pace.

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:

  void subscribeToChatChannel() {
    var messageStream = chatChannel.subscribe();
    messageStream.listen((ably.Message message) {
      Message newChatMsg = message.data;
      .
      .
      .
      setState(() {
        messages.insert(0, newChatMsg);
      });
    });
  }

  void createAblyRealtimeInstance() async {
    var clientOptions = ably.ClientOptions.fromKey(AblyAPIKey);
    try {
      realtimeInstance = ably.Realtime(options: clientOptions);
      chatChannel = realtimeInstance.channels.get('flutter-chat');
      subscribeToChatChannel();
    } catch (error) {
      print('Error creating Ably Realtime Instance: $error');
      rethrow;
    }
  }

  void publishMyMessage() async {
    var myMessage = myInputController.text;
    myInputController.clear();
    chatChannel.publish(name: "chatMsg", data: {
      "sender": "randomChatUser",
      "text": myMessage,
    });
  }

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 flutter packages get, you will be able to import Ably in your project files like so:

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.

Conclusion

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.