Flutter可以悬浮到手机桌面的悬浮框 |
您所在的位置：网站首页 › 手机桌面插件应用 › Flutter可以悬浮到手机桌面的悬浮框 |
Flutter可以悬浮到手机桌面的悬浮框
|
需求
看了很多悬浮的文章，大部分都是Overlay相关的实现。我这个app是运动app，不能让用户一直开着界面，需要一个能悬浮到其他应用和桌面的小窗口。我这里找到了一个插件：system_alert_window。 实现 1. 引入插件这里我们需要用到一个system_alert_window的插件： dependencies: system_alert_window: ^1.0.0 2. 权限初始化要让手机能悬浮到其他应用之上，需要开启授权。 SystemWindowPrefMode prefMode = SystemWindowPrefMode.OVERLAY; // Platform messages are asynchronous, so we initialize in an async method. Future _initPlatformState() async { String platformVersion; // Platform messages may fail, so we use a try/catch PlatformException. try { platformVersion = await SystemAlertWindow.platformVersion; } on PlatformException { platformVersion = 'Failed to get platform version.'; } // If the widget was removed from the tree while the asynchronous platform // message was in flight, we want to discard the reply rather than calling // setState to update our non-existent appearance. if (!mounted) return; setState(() { _platformVersion = platformVersion; }); } Future _requestPermissions() async { await SystemAlertWindow.requestPermissions(prefMode: prefMode); }在初始化方法里面调用，这样，用户进入界面，就先请求授权。 @override void initState() { super.initState(); _initPlatformState(); _requestPermissions(); }效果如下：
咱们先用example的例子，点击一个按钮，直接弹出浮窗： void _showOverlayWindow() { SystemWindowHeader header = SystemWindowHeader( title: SystemWindowText(text: "Incoming Call", fontSize: 10, textColor: Colors.black45), padding: SystemWindowPadding.setSymmetricPadding(12, 12), subTitle: SystemWindowText(text: "9898989899", fontSize: 14, fontWeight: FontWeight.BOLD, textColor: Colors.black87), decoration: SystemWindowDecoration(startColor: Colors.grey[100]), button: SystemWindowButton(text: SystemWindowText(text: "Personal", fontSize: 10, textColor: Colors.black45), tag: "personal_btn"), buttonPosition: ButtonPosition.TRAILING); SystemWindowBody body = SystemWindowBody( rows: [ EachRow( columns: [ EachColumn( text: SystemWindowText(text: "Some body", fontSize: 12, textColor: Colors.black45), ), ], gravity: ContentGravity.CENTER, ), EachRow(columns: [ EachColumn( text: SystemWindowText(text: "Long data of the body", fontSize: 12, textColor: Colors.black87, fontWeight: FontWeight.BOLD), padding: SystemWindowPadding.setSymmetricPadding(6, 8), decoration: SystemWindowDecoration(startColor: Colors.black12, borderRadius: 25.0), margin: SystemWindowMargin(top: 4)), ], gravity: ContentGravity.CENTER), EachRow( columns: [ EachColumn( text: SystemWindowText(text: "Notes", fontSize: 10, textColor: Colors.black45), ), ], gravity: ContentGravity.LEFT, margin: SystemWindowMargin(top: 8), ), EachRow( columns: [ EachColumn( text: SystemWindowText(text: "Some random notes.", fontSize: 13, textColor: Colors.black54, fontWeight: FontWeight.BOLD), ), ], gravity: ContentGravity.LEFT, ), ], padding: SystemWindowPadding(left: 16, right: 16, bottom: 12, top: 12), ); SystemWindowFooter footer = SystemWindowFooter( buttons: [ SystemWindowButton( text: SystemWindowText(text: "Simple button", fontSize: 12, textColor: Color.fromRGBO(250, 139, 97, 1)), tag: "simple_button", padding: SystemWindowPadding(left: 10, right: 10, bottom: 10, top: 10), width: 0, height: SystemWindowButton.WRAP_CONTENT, decoration: SystemWindowDecoration(startColor: Colors.white, endColor: Colors.white, borderWidth: 0, borderRadius: 0.0), ), SystemWindowButton( text: SystemWindowText(text: "Focus button", fontSize: 12, textColor: Colors.white), tag: "focus_button", width: 0, padding: SystemWindowPadding(left: 10, right: 10, bottom: 10, top: 10), height: SystemWindowButton.WRAP_CONTENT, decoration: SystemWindowDecoration( startColor: Color.fromRGBO(250, 139, 97, 1), endColor: Color.fromRGBO(247, 28, 88, 1), borderWidth: 0, borderRadius: 30.0), ) ], padding: SystemWindowPadding(left: 16, right: 16, bottom: 12), decoration: SystemWindowDecoration(startColor: Colors.white), buttonsPosition: ButtonPosition.CENTER); SystemAlertWindow.showSystemWindow( height: 230, header: header, body: body, footer: footer, margin: SystemWindowMargin(left: 8, right: 8, top: 200, bottom: 0), gravity: SystemWindowGravity.TOP, notificationTitle: "Incoming Call", notificationBody: "+1 646 980 4741", prefMode: prefMode); }主要是调用SystemAlertWindow.showSystemWindow()方法，参数包含了header，body，footer，都是构成这个浮窗的要素。效果如下：
后面，咱们再探讨下浮窗上的按钮，也是重点。 |
【本文地址】
今日新闻 |
推荐新闻 |