flutter：双屏设备应用场景解决方案

背景

支持收银应用的双屏交互场景，如：主屏（操作屏）+ 副屏（客显屏）

image.png

统一技术栈，主副屏都使用 flutter 进行开发，降低开发及后期维护成本，设计的双屏交互方案，
flutter_subscreen_plugin （已开源）。

支持双屏安卓设备，主副屏均使用 flutter 进行开发，提供方法实现双屏间的通信交互。

接入依赖：

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

dependencies:
  flutter:
    sdk: flutter
  flutter_subscreen_plugin: ^1.0.8

指定主副屏入口：

在自己的 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在实体设备的运行效果图：

主屏

（主屏）

副屏

（副屏）

点击按键，接收主屏数据的副屏

（点击按键，接收主屏数据的副屏）

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