Flutter 使用插件实现双屏交互

image.png

引言

本文将为大家讲解如何通过pub库插件快速实现Flutter应用在双屏Android设备上交互通信。
插件地址：flutter_subscreen_plugin
双屏插件实现原理：FlutterPlugin 实现双屏

依照插件接入步骤，实现如下：

1. 在pubspec.yaml文件中进行插件引用：

dependencies:
  flutter:
    sdk: flutter
  flutter_subscreen_plugin: ^0.0.1

2. 创建flutter-applicaion，lib下创建三个dart文件：

• main.dart (主入口)
• main_app.dart (封装我们主屏对应的ui【widget】)
• sub_app.dart (封装我们副屏对应的ui【widget】)

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:test_double_screen/main_app.dart';
import 'package:test_double_screen/sub_app.dart';

void main() {
  var defaultRouteName = window.defaultRouteName;
  if ("subMain" == defaultRouteName) {
    //副屏
    runApp(SubApp());
  } else {
    //主屏
    runApp(MainApp());
  }
}

主屏上的UI，我们添加一个按钮，点击生成一个随机数，发送给副屏显示，用于验证主屏与副屏的通信交互：

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_subscreen_plugin/sub_screen_plugin.dart';

//主屏widget
class MainApp extends StatefulWidget {
  const MainApp({Key key}) : super(key: key);

  @override
  _MainAppState createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('主屏'),
        ),
        body: Container(
          color: Colors.greenAccent.withAlpha(50),
          child: Center(
            child: RaisedButton(
              child: Text(
                '发送随机数给副屏',
                style: TextStyle(
                  fontSize: 30,
                ),
              ),
              onPressed: () {
                //发送数据给副屏
                final randomData = Random().nextInt(100).toString();
                SubScreenPlugin.sendMsgToViceScreen(
                  "data",
                  params: {"randomNum": randomData},
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

副屏ui上我们在initState中监听主屏给副屏的消息流，并将监听到的数据展示在文本上：

import 'package:flutter/material.dart';
import 'package:flutter_subscreen_plugin/sub_screen_plugin.dart';

//副屏app
class SubApp extends StatefulWidget {
  const SubApp({Key key}) : super(key: key);

  @override
  _SubAppState createState() => _SubAppState();
}

class _SubAppState extends State<SubApp> {
  String receiveData = '';

  @override
  void initState() {
    super.initState();
    //监听主屏发送的消息流
    SubScreenPlugin.viceStream.listen((event) {
      setState(() {
        receiveData = event.arguments.toString();
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('副屏'),
        ),
        body: Container(
          color: Colors.yellowAccent.withAlpha(50),
          child: Center(
            child: Text(
              "接收来自主屏的数据$receiveData",
              style: TextStyle(
                fontSize: 30,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

完成上述步骤，简单的demo就做好了，如下是demo在实体设备的运行效果图：

主屏.png
主屏发送数据前的副屏.png
点击按键，接收到主屏数据的副屏.png

本文demo已上传：https://github.com/liyufengrex/flutter_double_screen_project