The introduction

This article explains how to develop a two-screen application for Flutter using a plugin.

  • Plugin address: flutter_subscreen_plugin
  • Dual-screen plug-in implementation principle: FlutterPlugin implements dual-screen

According to the plug-in access steps, the implementation is as follows:

  1. Reference the plug-in in the pubspec.yaml file:
Dependencies: flutter: SDK: flutter flutter_subscreen_plugin: ^0.0.1Copy the code
  1. Create flutter- Applicaion and dart files in lib:
  • Main. Dart (main entrance)
  • Main_app. dart (Encapsulates the UI corresponding to our home screen)
  • Sub_app. dart (Encapsulates the UI corresponding to our secondary screen)
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) {// Screen runApp(SubApp()); } else {// MainApp()); }}Copy the code

For the UI on the main screen, we added a button to generate a random number and send it to the secondary screen to verify the communication and interaction between the main screen and the secondary screen:

import 'dart:math'; import 'package:flutter/material.dart'; import 'package:flutter_subscreen_plugin/sub_screen_plugin.dart'; // Home screen 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 (' home screen '),), the body: the Container (color: Colors. GreenAccent. WithAlpha (50), the child: Center(Child: RaisedButton(child: Text(' send random number to secondary screen ', style: TextStyle(fontSize: 30,),), onPressed: () {final randomData = Random().nextint (100).toString(); SubScreenPlugin.sendMsgToViceScreen( "data", params: {"randomNum": randomData}, ); }, (), (), (), (); }}Copy the code

On the secondary screen UI, we listen to the message flow from the primary screen to the secondary screen in initState and display the monitored data on the text:

import 'package:flutter/material.dart'; import 'package:flutter_subscreen_plugin/sub_screen_plugin.dart'; App Class extends StatefulWidget {const SubApp({Key Key}) : super(Key: Key); // App Class 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(); / / listen to the home screen to send the message flow SubScreenPlugin. ViceStream. Listen ((event) {setState (() {receiveData = event. The arguments. The toString (); }); }); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Const Text (' vice screen),), the body: the Container (color: Colors. YellowAccent. WithAlpha (50), the child: Center (child: $receiveData", style: TextStyle(fontSize: 30,),),),),); }}Copy the code

After completing the above steps, a simple demo is ready. Here is the demo running on a physical device:

(home screen)

(screen)

(Click the button to receive the secondary screen of data on the main screen)

This article demo has been uploaded:Github.com/liyufengrex…