flutter全局浮动按钮实现原理

今天在研究flutter路由管理的过程中想到了一个问题,就是想要实现一个全局的不跟随路由跳转的按钮,始终悬浮在最上方,之前使用过一种方式,但是一直没有研究他到底为什么可以实现始终悬浮在最上层

navigatorKey.currentState?.overlay?.insert(OverlayEntry(builder: (ctx){
                return Center(
                  child: Container(
                    width: 100,
                    height: 100,
                    color: Colors.blue,
                  ),
                );
              },opaque: false));

void insert(OverlayEntry entry, { OverlayEntry? below, OverlayEntry? above }) {
    entry._overlay = this;
    setState(() {
      _entries.insert(_insertionIndex(below, above), entry);
    });
  }

这种方式是取出navigatorState中的overlay,在其最后插入OverlayEntry,这个时候会在屏幕上显示100*100的蓝色方块,并且不影响下层的事件响应,这个时候我点击下层的一个按钮实现路由跳转,到pageTwo,发现我的蓝色方块依旧是在最上层,今天看过路由跳转的源码后就产生了疑问,路由跳转本质也是将页面的OverlayEntry加入到了overlay中,如果是按照顺序,pageTwo的OverlayEntry会显示到蓝色方块的上层,但是结果是没有,然后就去查看源码发现,在路由跳转过程中,不是直接调用insert把pageTwo的OverlayEntry加入到overlay中的,而是做了一些处理
1.通过RouteEntry,获取到所有的路由相关的OverlayEntry,_history是路由栈

Iterable<OverlayEntry> get _allRouteOverlayEntries sync* {
    for (final _RouteEntry entry in _history)
      yield* entry.route.overlayEntries;
  }

这一步过后,就将所有的路由相关的OverlayEntry组成了一个Iterable返回,然后调用了rearrange

void rearrange(Iterable<OverlayEntry> newEntries, { OverlayEntry? below, OverlayEntry? above }) {
  // newEntriesList 为 路由相关的OverlayEntry列表
  final List<OverlayEntry> newEntriesList = newEntries is List<OverlayEntry> ? newEntries : newEntries.toList(growable: false);
  // old为之前的路由以及蓝色方块的OverlayEntry
  final LinkedHashSet<OverlayEntry> old = LinkedHashSet<OverlayEntry>.from(_entries);
  for (final OverlayEntry entry in newEntriesList) {
    entry._overlay ??= this;
  }
  setState(() {
    // 清空_entries
    _entries.clear();
    
    //先将 路由相关的OverlayEntry列表 加入到 _entries 中
    _entries.addAll(newEntriesList);
    
    //然后将 路由相关的 OverlayEntry 从old(老的_entries) 中移除,此时old中就只剩下非路由相关的 OverlayEntry ,比如我们手动insert的 OverlayEntry
    old.removeAll(newEntriesList);
    
    //_insertionIndex(below, above) = _entries.length,所以这里的结果就是将所有非路由相关的 OverlayEntry 添加到_entries的最后面,
    _entries.insertAll(_insertionIndex(below, above), old);
  });
}

这里我才豁然开朗,原来是把我的蓝色方块OverlayEntry拿出来放到了最后,所以导致蓝色方块始终在页面的最上层,这里强调一下,_entries中的页面是倒序渲染的,所以越是最后就越在上层
最后附上我的demo:https://github.com/butterflyXX/flutter_util