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

Posted 2022-11-11 Code-Porter

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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()

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

DeveloperWidget(
  child: MaterialApp(
    localizationsDelegates: const [
      GlobalMaterialLocalizations.delegate,
      GlobalCupertinoLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate
    ],
    home: MainPage(),
  ),
);