背景
支持收銀應用的雙屏交互場景哮针，如：主屏（操作屏）+ 副屏（客顯屏）
image.png
統(tǒng)一技術(shù)棧玛瘸，主副屏都使用 flutter 進行開發(fā)媒峡，降低開發(fā)及后期維護成本淤年，設(shè)計的雙屏交互方案钧敞，
flutter_subscreen_plugin （已開源）。
支持雙屏安卓設(shè)備麸粮，主副屏均使用 flutter 進行開發(fā)溉苛，提供方法實現(xiàn)雙屏間的通信交互。
接入依賴：
在pubspec.yaml文件中進行插件引用：
dependencies:
flutter:
sdk: flutter
flutter_subscreen_plugin: ^1.0.8
指定主副屏入口：
在自己的 flutter-applicaion 應用內(nèi)弄诲，lib下創(chuàng)建三個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愚战，我們添加一個按鈕，點擊生成一個隨機數(shù)威根，發(fā)送給副屏顯示凤巨，用于驗證主屏與副屏的通信交互：
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(
'發(fā)送隨機數(shù)給副屏',
style: TextStyle(
fontSize: 30,
),
),
onPressed: () {
//發(fā)送數(shù)據(jù)給副屏
final randomData = Random().nextInt(100).toString();
SubScreenPlugin.sendMsgToViceScreen(
"data",
params: {"randomNum": randomData},
);
},
),
),
),
),
);
}
}
副屏ui上我們在 initState 中監(jiān)聽主屏給副屏的消息流，并將監(jiān)聽到的數(shù)據(jù)展示在文本上：
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();
//監(jiān)聽主屏發(fā)送的消息流
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(
"接收來自主屏的數(shù)據(jù)$receiveData",
style: TextStyle(
fontSize: 30,
),
),
),
),
),
);
}
}
完成上述步驟洛搀，簡單的demo就做好了敢茁，如下是demo在實體設(shè)備的運行效果圖：
主屏
（主屏）
副屏
（副屏）
點擊按鍵，接收主屏數(shù)據(jù)的副屏
（點擊按鍵留美，接收主屏數(shù)據(jù)的副屏）
