Flutter悬浮窗组件之实现快捷换肤、切换语言等开发调试功能模块_flutter 组件浮到框外面

一、最近开发一个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(){

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

• 最外层使用了Directionality组件，这个是必须要的；因为我们这个组件最终是如下使用的，让MaterialApp成为这个DeveloperWidget组件的子元素

DeveloperWidget(
  child: MaterialApp(
    localizationsDelegates: const [
      GlobalMaterialLocalizations.delegate,
      GlobalCupertinoLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate
    ],
    home: MainPage(),
  ),
);
1
2
3
4
5
6
7
8
9
10

• 如果不让MaterialApp成为子元素，那么在跳转一个新的页面时；我们的悬浮窗就不能在最顶层了

悬浮窗拖动功能实现

• 拖动就可以直接使用系统的Draggable组件来进行处理 非常的方便

四、这样一个简单的悬浮窗组件就实现了， 这里我只需要实现切换主题和切换语言的功能；如果你的App也有类似这样的需求你也可以把功能添加进悬浮窗内这样就可以快速轻松开发了。

本文源代码下载地址