Flutnet Bridge
FlutnetBridge is one of most important core for Flutnet. This component allow Xamarin and Flutter to communicate in two different mode:
The first (PlatformChannel) is the standard communication mode for an Flutter module embedded in an existing application. The second (WebSocket) allows to run Xamarin and Flutter separate, allowing to modify the UI in flutter without rebuilding all the Xamarin application: should be very helpful in some cases, especially if you have already implemented all the Xamarin Service Operations and you want to concentrate on the UI development.
Note that WebSocket configuration is intended only for developing purpose. The Release build process will force the configuration to be PlatformChannel for both Xamarin and Flutter.
In debug the configuration should be the same for both Xamarin and Flutter project, otherwise the FlutnetBridge will not work properly.
The configuration is governed by Xamarin, and Flutter need to be aligned to it.
Flutter Embedding
Before diving in the FlutnetBridge configuration, we need to understand the meaning of Flutter Embedding.
A Flutter "module" is a project prepared to be embedded inside an existing Android or iOS app, so the host application (Xamarin in our case) need to reference a compiled version of it in order to be capable executing the module inside its environment.
The Flutter "module" project can even run "as a standalone application", so you can develop this part independently from the final host application. When you have finish, you just need to build the module before incorporating it inside the target host app.
This premise was necessary to understand the next statement:
The embedded Flutter module can work only using the PlatformChannel configuration. Every changes in the flutter module require a compilation in order to update it in Xamarin project.
This is the main reason why Flutnet have introduced the WebSocket configuration in order to reduce the time development.
Note that if you want to run the Xamarin App for the first time, you need to build at list one time the Flutter module.
PlatformChannel mode
This mode is the standard way to provide communication between Flutter and your native application (Xamarin in our case). This configuration relies on the fact that the Flutter module is embedded inside your Xamarin application.
1 Application = Xamarin with Fluttermodule
Common Debug configuration error
In case the Flutter module was previously compiled using WebSocket configuration, all his platform call will be blocked by the FlutnetBridge.
To obtain this configuration, you need to configure both Xamarin and Flutter project.
Flutter module project
main.dart
import 'package:flutter/material.dart';
import 'package:my_first_app_bridge/flutnet_bridge.dart';
void main() {
// Configure the bridge mode for debug
FlutnetBridgeConfig.mode = FlutnetBridgeMode.PlatformChannel;
runApp(MyApp());
}
Xamarin Android
App.cs
using System;
using Android.App;
using Android.Content;
using Android.OS;
using Flutnet;
using Flutnet.Interop.Embedding.Engine;
using Environment = System.Environment;
using MyFirstApp.ServiceLibrary;
namespace MyFirstApp
{
// Singleton class for Application wide objects.
public static class App
{
// ...........
public static void ConfigureFlutnetBridge(FlutterEngine flutterEngine)
{
// Start the bridge: you can enable / disable websocket connection
try
{
#if DEBUG
_bridge = new FlutnetBridge(flutterEngine, AppContext, FlutnetBridgeMode.PlatformChannel);
#else
_bridge = new FlutnetBridge(flutterEngine, AppContext);
#endif
}
catch (Exception e)
{
// Handle bridge errors
}
}
// .............
}
}
Xamarin iOS
ViewController.cs
using System;
using UIKit;
using Flutnet;
using Flutnet.Interop;
using MyFirstApp.ServiceLibrary;
using System.Threading.Tasks;
namespace MyFirstApp
{
public partial class ViewController : FlutterViewController
{
// ........
public override async void ViewDidAppear(bool animated)
{
base.ViewDidAppear(animated);
// .......
try
{
// .......
// Initialize the bridge
#if (DEBUG)
_bridge = new FlutnetBridge(this.Engine, FlutnetBridgeMode.PlatformChannel);
#else
_bridge = new FlutnetBridge(this.Engine);
#endif
_initialized = true;
}
catch (Exception e)
{
// Handle Bridge errors
}
}
}
}
WebSocket mode
This mode is intended only for developing purposes in order to simplify the life of programmers (mostly). This configuration relies on the fact that the Flutter module run standalone outside your Xamarin application.
2 Applications = Xamarin + Flutter standalone
With the term "Flutter standalone" we just intend the Flutter module project started as a standlone application. This is done only for developing purpose. Remember that a Flutter module project is intended to be encapsulated inside an existing application.
To obtain this configuration, you need to configure both Xamarin and Flutter project.
Flutter module project
main.dart
import 'package:flutter/material.dart';
import 'package:my_first_app_bridge/flutnet_bridge.dart';
void main() {
// Configure the bridge mode for debug
FlutnetBridgeConfig.mode = FlutnetBridgeMode.WebSocket;
runApp(MyApp());
}
Xamarin Android
App.cs
using System;
using Android.App;
using Android.Content;
using Android.OS;
using Flutnet;
using Flutnet.Interop.Embedding.Engine;
using Environment = System.Environment;
using MyFirstApp.ServiceLibrary;
namespace MyFirstApp
{
// Singleton class for Application wide objects.
public static class App
{
// ...........
public static void ConfigureFlutnetBridge(FlutterEngine flutterEngine)
{
// Start the bridge: you can enable / disable websocket connection
try
{
#if DEBUG
_bridge = new FlutnetBridge(flutterEngine, AppContext, FlutnetBridgeMode.WebSocket);
#else
_bridge = new FlutnetBridge(flutterEngine, AppContext);
#endif
}
catch (Exception e)
{
// Handle bridge errors
}
}
// .............
}
}
Xamarin iOS
ViewController.cs
using System;
using UIKit;
using Flutnet;
using Flutnet.Interop;
using MyFirstApp.ServiceLibrary;
using System.Threading.Tasks;
namespace MyFirstApp
{
public partial class ViewController : FlutterViewController
{
// ........
public override async void ViewDidAppear(bool animated)
{
base.ViewDidAppear(animated);
// .......
try
{
// .......
// Start the bridge: you can enable / disable websocket connection
#if (DEBUG)
_bridge = new FlutnetBridge(this.Engine, FlutnetBridgeMode.WebSocket);
#else
_bridge = new FlutnetBridge(this.Engine);
#endif
_initialized = true;
}
catch (Exception e)
{
// Handle Bridge errors
}
}
}
}
This configuration will have two separated application running simultaneously, so the best practice is to run at first the Xamarin application (as back-end), and at second Flutter (as user interface).