Using Adaptive Cards in Flutter: Why we implemented a library with Microsoft

You may have read our last article on giving Flutter a serious try in our startup, which explains why we were so keen to use Flutter in the upcoming version of our product. This hasn’t changed: We’re still excited about Flutter and started rolling it out to some of our customers.

This time, however, I want to talk about why we use Flutter with Microsoft Adaptive Cards and why we went the extra mile to implement the library from scratch together with our friends from Microsoft – as announced at Microsoft Build!

tl;dr: We released a library for Adaptive Cards in Flutter (see GitHub)

Why Adaptive Cards if writing Flutter layouts is so easy?

As you can imagine, an AI-assistant for business – something we happen to build at Neohelden – is confronted with lots of data-driven questions and replies, that vary quite a lot in visuals and meaning. If you have to consider that in the context of limited screen-sizes and mandatory cross-platform compatibility, there are not many standards that support the visualization of data and information in a structured way across platforms.

Adaptive Cards are a framework ”for developers to exchange card content in a common and consistent way”. Hence, they are a perfect match for us – and intuitive solution for the cross-platform-challenge we faced. As a special benefit, even non-tech-users can design card-layouts by themselves.

And we really do not want to miss that in Flutter (and, fortunately enough, we don’t have to!).

The image above shows an Adaptive Card inside our Neo Flutter client. Instead of coding each individual card and compiling it into the app, we get the description and content from the server and then dynamically render the card.

No compilation needed with Adaptive Cards in Flutter

So, whenever we want to support a new type of card or have to display content in a different card-layout, all we need to do is to create a new JSON payload containing that card. The Neo-app doesn’t need to be recompiled and republished, heck, it doesn’t even need to be restarted. A user simply sends a new request, and all the server needs to do is send a different card content on the next request. This makes development and updating so much simpler, especially when taking in mind that we offer a drag & drop UI for building conversational flows with Neo.

With Adaptive Cards, the data is wherever the users are

Adaptive Cards is supported fairly well on a lot of platforms. If we ever were to find that we need to support Neo on another platform, say interacting with Neo via Microsoft Teams or Skype for Business (which we can’t do, for the time being, with Flutter), we can easily do so with Adaptive Cards. By using Adaptive Cards, we won’t need to rewrite any layout or UI code related to the card, as platforms like Skype, Outlook, and Cortana support Adaptive Cards by default. Chances are pretty good that future platforms also pick up Adaptive Cards.

Getting started in (less than) two minutes with Adaptive Cards in Flutter

Using Adaptive Cards couldn’t be easier – as anything in Flutter, the Adaptive Card is a widget, too, and it only needs a handful of parameters to do all of its magic!

Take a look at this little code snippet and a Flutter developer will quickly grasp the idea:

AdaptiveCard.network(
  placeholder: Text("Loading, please wait"),
  url: "assets.neohelden.com/flutter_rules/unicorn.json",
  hostConfigPath: "assets/host_config.json",
  onSubmit: (map) {
    // Send to server or handle locally
  },
  onOpenUrl: (url) {
    // Open url using the browser or handle differently
  },
  // If this is set, a button will appear next to each adaptive card which when clicked shows the payload.
  // NOTE: this will only be shown in debug mode, this attribute does change nothing for realease builds.
  // This is very useful for debugging purposes
  showDebugJson: true,
  // If you have not implemented explicit dark theme, adaptive cards will try to approximate its colors to match the dark theme
  // so the contrast and color meaning stays the same.
  // Turn this off, if you want to have full control over the colors when using the dark theme.
  // NOTE: This is currently still under development
  approximateDarkThemeColors: true,
);

The Adaptive Card has a bunch of different constructors to load data from:

• The one you see at the top automatically downloads the JSON from the internet and shows a placeholder in the meantime.
• In addition, there is the AdaptiveCard.asset which loads the data from an asset and the AdaptiveCard.memory which takes in a raw Map.
• Other neat features we built in is showing the JSON which is used to render the adaptive card. This mode is only available when debugging, but can be turned off there too.
• One last experimental feature we’ve been working on is the Dark Mode for Adaptive Cards with approcimateDarkThemeColors. Even though we are all fans of the dark theme, making two versions of each card isn’t fun. Therefore, we implemented a mechanism which ensures that all colors are actually visible.

What’s to come: Adaptive Cards with Flutter

Our library is live and available on GitHub. We open-sourced under the MIT License and are excited for community feedback and your contributions! We will keep maintaining and developing the library, as we’re building on both, Adaptive Cards and Flutter, with our AI-assistant for business.

Special thanks to Matt Hidinger and his colleagues from Microsoft Adaptive Cards, it was a pleasure working with you on the release of our library!