Flutnet Video Player (Plugin)

→ using third party flutter plugins in a Flutnet App

 

The latest version of all the official Flutnet samples can be found in the official GitHub repository: https://github.com/flutnet/samples/

 

Overview

This example will focus on how to integrate a third-party Flutter plugin in a Flutnet App. In particular this app will render a video from a remote URL (see https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4).

To achieve this we'll use the Video Player plugin for Flutter, version 0.10.11+1.

Please see the list of supported Flutter plugins to discover all the plugins that are currently available for Flutnet.


Create the project

Create a project named "FlutnetVideoPlayer" using the Flutnet Console.

The generated project structure will contain the Visual Studio solution (FlutnetVideoPlayer.sln) and a set of Xamarin and Flutter projects:

  • Xamarin
    • FlutnetVideoPlayer.Android (Xamarin.Android application)
    • FlutnetVideoPlayer.iOS (Xamarin.iOS application)
    • FlutnetVideoPlayer.ServiceLibrary (.NET Standard class library)
    • FlutnetVideoPlayer.PluginInterop.iOS (Xamarin.iOS bindings library → needed for embedding all the necessary iOS frameworks)
  • Flutter
    • flutnet_video_player (Flutter module → it's the main Flutter project where you develop the UI)
    • flutnet_video_player_bridge (Flutter package → it will contain auto-generated Dart code that defines the communication layer between Flutter and Xamarin).

 

Screenshots


Develop your user interface in Flutter

This section will not cover all the aspect about the flutter app, integrating the flutter video_player plugin to render a video from an URL.

 

The first thing to do is add the plugin needed by Flutter: open the pubspec.yaml and add this lines under "dependencies".

pubspec.yaml

....

dependencies:

  flutter:

    sdk: flutter

  video_player: ^0.10.11+1

....

 

 

Follow the video_player readme section to configure the application permissions required by the plugin.

 

Because we are developing a flutter module, the execution host will be the Xamarin application, so we need to request the corrisponding plugins permissions in the Xamarin.Android and Xamarin.iOS applications, editing the corrisponding AndroidManifest.xml and Info.plist.

To run the Flutter module in STANDALONE, we need to edit the AndroidManifest.xml and Info.plist in the corrisponding temp folders .android and .ios. enlightenedRemember that every time you call $flutter clean command in the flutter module directory, this folders will be regenerated, so this changes should be redone.

 

 

Next, we will define the screen (with the video player) editing the main.dart file.

main.dart

import 'package:video_player/video_player.dart';
import 'package:flutter/material.dart';

void main() => runApp(VideoApp());

class VideoApp extends StatefulWidget {
  @override
  _VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<VideoApp> {
  VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4')
      ..setLooping(true)    
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: Center(
          child: _controller.value.initialized
              ? AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                )
              : Container(),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              _controller.value.isPlaying
                  ? _controller.pause()
                  : _controller.play();
            });
          },
          child: Icon(
            _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
}

 

Screenshots

 

 


Build the Flutter project

Before running the Xamarin app, you need to build the Flutter module project ("flutnet_video_player" in this case).

In order to do this, open the terminal from Visual Studio Code and run the following commands:

  • $ flutter build aar --no-profile
  • $ flutter build ios-framework --no-profile (only if you're on macOS)

Once the build is finished, we're not ready yet. We have to make sure that Flutter plugin is embedded and can be used inside the Xamarin application. This step is described in the next two paragraphs.


Include Flutter plugin in Xamarin.Android

In order to execute the Flutter plugin you need to:

  • Add the corresponding NuGet package to the startup project (this package is just a Xamarin.Android bindings library that contains the plugin's AAR).
  • Enable interactions between the plugin and Android APIs.

MainActivity.cs already provides the necessary line of code for the last point. Just uncomment that line and you're ready to go.

MainActivity.cs

public class MainActivity : FlutterActivity

  ...

  // Connect Flutter plugins (uncomment only if Flutter module uses plugins)
  Flutnet.Interop.Plugins.GeneratedPluginRegistrant.RegisterWith(flutterEngine);

 

Screenshots


Include Flutter plugin in Xamarin.iOS

For iOS the procedure to include a Flutter plugin is a little different.

You have probably already noticed that Flutnet Console, during project creation, generated a folder/project named FlutnetVideoPlayer.PluginInterop.iOS. This is a Xamarin.iOS bindings library that will be used as "glue" between the Flutter plugins and the Xamarin application.

In order to execute the Flutter plugin you need to:

  • Add FlutnetVideoPlayer.PluginInterop.iOS project to the solution.
  • Embed the required iOS Frameworks into FlutnetVideoPlayer.PluginInterop.iOS:
    • In the Solution Explorer, right-click on the project name and select Add > Add Native Reference:
    • From the Open dialog box, navigate to the folder where Flutter outputs the results when building iOS Frameworks.
    • Select video_player.framework and click the Open button.
  • Add a reference to FlutnetVideoPlayer.PluginInterop.iOS from the startup project.
  • Enable interactions between the plugin and iOS APIs.

ViewController.cs already provides the necessary line of code for the last point. Just uncomment that line and you're ready to go.

ViewController.cs

public class ViewController : FlutterViewController

  ...

  // Connect Flutter plugins (uncomment only if Flutter module uses plugins)
  FlutnetVideoPlayer.PluginInterop.GeneratedPluginRegistrant.Register(this.Engine);

 

Screenshots