When considering Flutter, many of us may automatically think of its use for mobile app development. However, what some may not realize is that Flutter also offers web support, making it easy to deliver existing Flutter mobile apps and plugins through a browser. In this article, we will explore how to extend a Flutter Plugin to support web, using the example of the RudderStack Flutter SDK, which facilitates the collection of event data from Flutter applications and routing it to various destinations in a data stack. Please note that a basic understanding of Flutter and Dart is recommended before proceeding.
Version 1 of our Flutter SDK supported Android and iOS applications, which was detailed in our previous post, “Developing a Custom Plugin using Flutter.” In Version 2, we have enhanced the architecture to provide support for web. This was achieved by leveraging RudderStack’s existing Javascript-based web SDK.
Understanding the internals of Dart MethodChannel isn’t necessary for extending your Flutter plugin with web support, but having a low-level understanding of how it works can be beneficial before starting any project. We will discuss the BasicMessageChannel, MethodChannel, and EventChannel, and review each individually.
The BasicMessageChannel is a straightforward layer of abstraction that delegates to the binary messaging layer for communication. It is lightweight and stateless, so two BasicMessageChannels with the same name and codec are equivalent and may interfere with each other’s communication. The MethodChannel is used for invoking named platform methods, transmitting data in a particular format from one side to the other. The EventChannel, as its name suggests, streams a series of events from the platform to the Dart side.
Additionally, we have discussed the codec, which serves as a visa or contract that must be satisfied on both sides to successfully send and receive data over a channel. Codecs are responsible for encoding and decoding messages across the Dart side and platform side, and its logic must complement each other.
Overall, understanding these components is essential for extending a Flutter Plugin to support web. So, it’s important to be familiar with the basics of Flutter and Dart before proceeding.