一、最近开发一个App具有黑白两个主题和切换语言的功能,所以在开发的时候一个页面总是要不断的去切换主题和语言来查看功能是否正常。
为了提高这个开发效率突然想到可以在应用上增加一个悬浮窗组件然后实现主题切换和语言切换的功能,这样在任意一个页面就可以快速的查看效果。不用来回切换到设置页面内去进行切换了。
二、 实现的效果
悬浮窗组件也可以随意进行拖动,打开一个新的页面悬浮窗也始终是在最顶部的
这里稍微参考了一下滴滴的Dokit-Flutter悬浮窗实现
三、功能实现
- 创建一个
DeveloperWidget
继承StatefulWidget
组件即可 - 要达到悬浮窗的效果这里需要使用系统的
Overlay
组件
具体实现代码
///省略部分代码
@override
Widget build(BuildContext context) {
return Directionality(
textDirection: TextDirection.ltr,
child: Overlay(
initialEntries: [
OverlayEntry(
builder: (c) {
return widget.child;
},
),
OverlayEntry(
builder: (c) {
return Positioned(
left: _offset.dx,
top: _offset.dy,
child: Draggable(
childWhenDragging: Container(),
feedback: _developerWidget(),
child: _developerWidget(),
onDragEnd: (DraggableDetails detail) {
setState(() {
_offset = detail.offset;
});
},
),
);
},
),
],
),
);
}
///悬浮窗组件内具体自己要实现的功能组件,此处省略
Widget _developerWidget(){
}
- 最外层使用了
Directionality
组件,这个是必须要的;因为我们这个组件最终是如下使用的,让MaterialApp
成为这个DeveloperWidget
组件的子元素
DeveloperWidget(
child: MaterialApp(
localizationsDelegates: const [
GlobalMaterialLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
GlobalWidgetsLocalizations.delegate
],
home: MainPage(),
),
);
- 如果不让
MaterialApp
成为子元素,那么在跳转一个新的页面时;我们的悬浮窗就不能在最顶层了
悬浮窗拖动功能实现
- 拖动就可以直接使用系统的
Draggable
组件来进行处理 非常的方便