var overlayState = Overlay.of(context);
var _overlayEntry = new OverlayEntry(builder: (context) {
  return new Material(
    color: Colors.transparent,
    child: Container(
      child: Text(
        '${widget.platform} ${widget.deviceInfo} ${widget.language} ${widget.version}',
        style: TextStyle(color: Colors.white, fontSize: 10),
      ),
    ),
  );
});
overlayState.insert(_overlayEntry);

return _Theatre(
  onstage: Stack(
    fit: StackFit.expand,
    children: onstageChildren.reversed.toList(growable: false),
  ),
  offstage: offstageChildren,
);
```Проще говоря, если у нас есть три страницы [A, B, C], то:

- C должна находиться на `onstage`;
- A и B должны находиться на `offstage`.

Конечно, все эти страницы A, B и C вставляются в `Overlay` как `OverlayEntry`. При этом каждая страница по умолчанию имеет два `OverlayEntry`, поэтому для [A, B, C] должно быть шесть `OverlayEntry`.

Например, после запуска приложения мы видим страницу A. В этот момент в `Overlay`:

- Длина `_entries` равна 2, то есть всего два `OverlayEntry` в списке;
- Длина `onstageChildren` равна 2, то есть два текущих видимых `OverlayEntry`;
- Длина `offstageChildren` равна 0, то есть нет невидимых `OverlayEntry`.

![image](http://img.cdn.guoshuyu.cn/20200608_Flutter-nav+1_17/image1)

При переходе на страницу B, в `Overlay`:

- Длина `_entries` увеличивается до 4, то есть добавлено еще два `OverlayEntry`;
- Длина `onstageChildren` также составляет 4, то есть четыре текущих видимых `OverlayEntry`;
- Длина `offstageChildren` остается равной 0, то есть пока нет невидимых `OverlayEntry`.

![image](http://img.cdn.guoshuyu.cn/20200608_Flutter-nav+1_17/image2)

На данном этапе `Overlay` находится в состоянии открытия страницы, то есть страница A все еще видима, а страница B находится в процессе анимированного открытия.

![image](http://img.cdn.guoshuyu.cn/20200608_Flutter-nav+1_17/image3)

Затем можно заметить, что метод `build` снова выполняется внутри `Overlay`. - Длина `_entries` всё ещё составляет 4;
- Длина `onstageChildren` становится равной 2, то есть текущее количество видимых `OverlayEntry` составляет 2;
- Длина `offstageChildren` составляет 1, то есть в данный момент имеется один невидимый `OverlayEntry`.![](http://img.cdn.guoshuyu.cn/20200608_Flutter-nav+1_17/image4)

На данном этапе страница B уже открыта полностью, поэтому длина `onstageChildren` восстанавливается до значения 2, что соответствует двум `OverlayEntry`, связанным с страницей B; а страница A, которая стала невидимой, перемещена в `offstageChildren`.

> Почему только один `OverlayEntry` страницы A помещён в `offstageChildren`? Это будет объяснено позже.

![](http://img.cdn.guoshuyu.cn/20200608_Flutter-nav+1_17/image5)

Затем, как показано на следующем рисунке, при открытии страницы C можно заметить аналогичный процесс:

- Длина `_entries` увеличивается до 6;
- Длина `onstageChildren` сначала составляет 4, а затем снова становится равной 2, так как при открытии участвуют две страницы — B и C, а после завершения открытия остаётся только одна страница C;
- Длина `offstageChildren` сначала составляет 1, а затем увеличивается до 2, поскольку сначала невидимой является только страница A, а затем и страницы A и B;

![](http://img.cdn.guoshuyu.cn/20200608_Flutter-nav+1_17/image6)

![](http://img.cdn.guoshuyu.cn/20200608_Flutter-nav+1_17/image7)

Таким образом, можно заметить, что каждый раз при открытии новой страницы:

- Сначала два `OverlayEntry` добавляются в `_entries`;
- Затем происходит состояние открытия страницы, когда длина `onstageChildren` составляет 4;
- В конце состояние открытия страницы завершается, когда длина `onstageChildren` составляет 2, а нижняя страница, которая стала невидимой, добавляется в `offstageChildren`.### 2.3. Overlay и Route

*Почему каждый раз в `_entries` добавляются два `OverlayEntry`?*

Это связано с `Route`. Например, при использовании `MaterialPageRoute` для открытия нового экрана с помощью `Navigator` создаются два `OverlayEntry`, причём это происходит в одном из базовых классов `Route`, таких как `ModalRoute`.

В методе `createOverlayEntries` класса `ModalRoute` через `_buildModalBarrier` и `_buildModalScope` создаются два `OverlayEntry`, где:

- `_buildModalBarrier` обычно создаёт макет;
- `_buildModalScope` создаёт `OverlayEntry`, который служит контейнером для страницы;

**Поэтому при открытии одной страницы всегда существуют два `OverlayEntry`: один для макета и другой для самой страницы**.

```dart
  @override
  Iterable<OverlayEntry> createOverlayEntries() sync* {
    yield _modalBarrier = OverlayEntry(builder: _buildModalBarrier);
    yield OverlayEntry(builder: _buildModalScope, maintainState: maintainState);
  }

Внутри `OverlayEntry`:

- `opaque` указывает, является ли `OverlayEntry` "непрозрачным" (то есть полностью закрывающим `Overlay`);
- `maintainState` указывает, что этот `OverlayEntry` должен быть добавлен в `_Theatre`.

Поэтому можно заметить, что после полного открытия страницы, первые два `OverlayEntry`:

- У `overlayEntry` (макета) `opaque` устанавливается в `true`, чтобы следующий `OverlayEntry` не попал в `onstageChildren`, то есть не был отображен;
- У `pageEntry` (страницы) `maintainState` устанавливается в `true`, чтобы он попал в `offstageChildren` даже тогда, когда невидим;

![Иллюстрация](http://img.cdn.guoshuyu.cn/2bk20200608_Flutter-nav+1_17/image8)

*Где же устанавливается значение `opaque`?*

Процесс установки значения `opaque` представлен ниже. В другом базовом классе `TransitionRoute` для `MaterialPageRoute` видно, что изначально значение `opaque` для макета устанавливается в `false`, а затем в методе `completed` устанавливается в `true`. Аргумент `opaque` в `PageRoute` определяется как `@override bool get opaque => true;`.

Пример кода:```dart
// Пример установки opaque
bool _opaque = false;

void setOpaque(bool value) {
  _opaque = value;
}

// Пример использования
setOpaque(true);
```В `PopupRoute` значение `opaque` равно `false`, так как `PopupRoute` обычно имеет прозрачный фон и требует совмещения с предыдущим экраном.

```dart
void _handleStatusChanged(AnimationStatus status) {
    switch (status) {
      case AnimationStatus.completed:
        if (overlayEntries.isNotEmpty)
          overlayEntries.first.opaque = opaque;
        break;
      case AnimationStatus.forward:
      case AnimationStatus.reverse:
        if (overlayEntries.isNotEmpty)
          overlayEntries.first.opaque = false;
        break;
      case AnimationStatus.dismissed:
        if (!isActive) {
          navigator.finalizeRoute(this);
          assert(overlayEntries.isEmpty);
        }
        break;
    }
    changedInternalState();
}

  @override
  Widget build(BuildContext context) {
    // Этот список заполняется справа налево, а затем переворачивается ниже перед добавлением его в дерево.
    final List<Widget> children = <Widget>[];
    bool onstage = true;
    int onstageCount = 0;
    for (int i = _entries.length - 1; i >= 0; i -= 1) {
      final OverlayEntry entry = _entries[i];
      if (onstage) {
        onstageCount += 1;
        children.add(_OverlayEntryWidget(
          key: entry._key,
          entry: entry,
        ));
        if (entry.opaque)
          onstage = false;
      } else if (entry.maintainState) {
        children.add(_OverlayEntryWidget(
          key: entry._key,
          entry: entry,
          tickerEnabled: false,
        ));
      }
    }
    return _Theatre(
      skipCount: children.length - onstageCount,
      children: children.reversed.toList(growable: false),
    );
  }

RenderBox get _firstOnstageChild {
    if (skipCount == super.childCount) {
        return null;
    }
    RenderBox child = super.firstChild;
    for (int skip = skipCount; skip > 0; skip--) {
        final StackParentData childParentData = child.parentData as StackParentData;
        child = childParentData.nextSibling;
        assert(child != null);
    }
    return child;
}

RenderBox get _lastOnstageChild => skipCount == super.childCount ? null : lastChild;