flutter/packages/flutter_test/test/multi_view_controller_test.dart
Michael Goderbauer 6f09064e78
Stand-alone widget tree with multiple render trees to enable multi-view rendering (#125003)
This change enables Flutter to generate multiple Scenes to be rendered into separate FlutterViews from a single widget tree. Each Scene is described by a separate render tree, which are all associated with the single widget tree.

This PR implements the framework-side mechanisms to describe the content to be rendered into multiple views. Separate engine-side changes are necessary to provide these views to the framework and to draw the framework-generated Scene into them.

## Summary of changes

The details of this change are described in [flutter.dev/go/multiple-views](https://flutter.dev/go/multiple-views). Below is a high-level summary organized by layers.

### Rendering layer changes

* The `RendererBinding` no longer owns a single `renderView`. In fact, it doesn't OWN any `RenderView`s at all anymore. Instead, it offers an API (`addRenderView`/`removeRenderView`) to add and remove `RenderView`s that then will be MANAGED by the binding. The `RenderView` itself is now owned by a higher-level abstraction (e.g. the `RawView` Element of the widgets layer, see below), who is also in charge of adding it to the binding. When added, the binding will interact with the `RenderView` to produce a frame (e.g. by calling `compositeFrame` on it) and to perform hit tests for incoming pointer events. Multiple `RenderView`s can be added to the binding (typically one per `FlutterView`) to produce multiple Scenes.
* Instead of owning a single `pipelineOwner`, the `RendererBinding` now owns the root of the `PipelineOwner` tree (exposed as `rootPipelineOwner` on the binding). Each `PipelineOwner` in that tree (except for the root) typically manages its own render tree typically rooted in one of the `RenderView`s mentioned in the previous bullet. During frame production, the binding will instruct each `PipelineOwner` of that tree to flush layout, paint, semantics etc. A higher-level abstraction (e.g. the widgets layer, see below) is in charge of adding `PipelineOwner`s to this tree.
* Backwards compatibility: The old `renderView` and `pipelineOwner` properties of the `RendererBinding` are retained, but marked as deprecated. Care has been taken to keep their original behavior for the deprecation period, i.e. if you just call `runApp`, the render tree bootstrapped by this call is rooted in the deprecated `RendererBinding.renderView` and managed by the deprecated `RendererBinding.pipelineOwner`.

### Widgets layer changes

* The `WidgetsBinding` no longer attaches the widget tree to an existing render tree. Instead, it bootstraps a stand-alone widget tree that is not backed by a render tree. For this, `RenderObjectToWidgetAdapter` has been replaced by `RootWidget`.
* Multiple render trees can be bootstrapped and attached to the widget tree with the help of the `View` widget, which internally is backed by a `RawView` widget. Configured with a `FlutterView` to render into, the `RawView` creates a new `PipelineOwner` and a new `RenderView` for the new render tree. It adds the new `RenderView` to the `RendererBinding` and its `PipelineOwner` to the pipeline owner tree.
* The `View` widget can only appear in certain well-defined locations in the widget tree since it bootstraps a new render tree and does not insert a `RenderObject` into an ancestor. However, almost all Elements expect that their children insert `RenderObject`s, otherwise they will not function properly. To produce a good error message when the `View` widget is used in an illegal location, the `debugMustInsertRenderObjectIntoSlot` method has been added to Element, where a child can ask whether a given slot must insert a RenderObject into its ancestor or not. In practice, the `View` widget can be used as a child of the `RootWidget`, inside the `view` slot of the `ViewAnchor` (see below) and inside a `ViewCollection` (see below). In those locations, the `View` widget may be wrapped in other non-RenderObjectWidgets (e.g. InheritedWidgets).
* The new `ViewAnchor` can be used to create a side-view inside a parent `View`. The `child` of the `ViewAnchor` widget renders into the parent `View` as usual, but the `view` slot can take on another `View` widget, which has access to all inherited widgets above the `ViewAnchor`. Metaphorically speaking, the view is anchored to the location of the `ViewAnchor` in the widget tree.
* The new `ViewCollection` widget allows for multiple sibling views as it takes a list of `View`s as children. It can be used in all the places that accept a `View` widget.

## Google3

As of July 5, 2023 this change passed a TAP global presubmit (TGP) in google3: tap/OCL:544707016:BASE:545809771:1688597935864:e43dd651

## Note to reviewers

This change is big (sorry). I suggest focusing the initial review on the changes inside of `packages/flutter` first. The majority of the changes describe above are implemented in (listed in suggested review order):

* `rendering/binding.dart`
* `widgets/binding.dart`
* `widgets/view.dart`
* `widgets/framework.dart`

All other changes included in the PR are basically the fallout of what's implemented in those files. Also note that a lot of the lines added in this PR are documentation and tests.

I am also very happy to walk reviewers through the code in person or via video call, if that is helpful.

I appreciate any feedback.

## Feedback to address before submitting ("TODO")
2023-07-17 16:14:08 +00:00

233 lines
7.7 KiB
Dart

// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'dart:ui';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('simulatedAccessibilityTraversal - start and end in same view', (WidgetTester tester) async {
await pumpViews(tester: tester);
expect(
tester.semantics.simulatedAccessibilityTraversal(
start: find.text('View2Child1'),
end: find.text('View2Child3'),
).map((SemanticsNode node) => node.label),
<String>[
'View2Child1',
'View2Child2',
'View2Child3',
],
);
});
testWidgets('simulatedAccessibilityTraversal - start not specified', (WidgetTester tester) async {
await pumpViews(tester: tester);
expect(
tester.semantics.simulatedAccessibilityTraversal(
end: find.text('View2Child3'),
).map((SemanticsNode node) => node.label),
<String>[
'View2Child0',
'View2Child1',
'View2Child2',
'View2Child3',
],
);
});
testWidgets('simulatedAccessibilityTraversal - end not specified', (WidgetTester tester) async {
await pumpViews(tester: tester);
expect(
tester.semantics.simulatedAccessibilityTraversal(
start: find.text('View2Child1'),
).map((SemanticsNode node) => node.label),
<String>[
'View2Child1',
'View2Child2',
'View2Child3',
'View2Child4',
],
);
});
testWidgets('simulatedAccessibilityTraversal - nothing specified', (WidgetTester tester) async {
await pumpViews(tester: tester);
expect(
tester.semantics.simulatedAccessibilityTraversal().map((SemanticsNode node) => node.label),
<String>[
'View1Child0',
'View1Child1',
'View1Child2',
'View1Child3',
'View1Child4',
],
);
// Should be traversing over tester.view.
expect(tester.viewOf(find.text('View1Child0')), tester.view);
});
testWidgets('simulatedAccessibilityTraversal - only view specified', (WidgetTester tester) async {
await pumpViews(tester: tester);
expect(
tester.semantics.simulatedAccessibilityTraversal(
view: tester.viewOf(find.text('View2Child1')),
).map((SemanticsNode node) => node.label),
<String>[
'View2Child0',
'View2Child1',
'View2Child2',
'View2Child3',
'View2Child4',
],
);
});
testWidgets('simulatedAccessibilityTraversal - everything specified', (WidgetTester tester) async {
await pumpViews(tester: tester);
expect(
tester.semantics.simulatedAccessibilityTraversal(
start: find.text('View2Child1'),
end: find.text('View2Child3'),
view: tester.viewOf(find.text('View2Child1')),
).map((SemanticsNode node) => node.label),
<String>[
'View2Child1',
'View2Child2',
'View2Child3',
],
);
});
testWidgets('simulatedAccessibilityTraversal - start and end not in same view', (WidgetTester tester) async {
await pumpViews(tester: tester);
expect(
() => tester.semantics.simulatedAccessibilityTraversal(
start: find.text('View2Child1'),
end: find.text('View1Child3'),
),
throwsA(isStateError.having(
(StateError e) => e.message,
'message',
contains('The start and end node are in different views.'),
)),
);
});
testWidgets('simulatedAccessibilityTraversal - start is not in view', (WidgetTester tester) async {
await pumpViews(tester: tester);
expect(
() => tester.semantics.simulatedAccessibilityTraversal(
start: find.text('View2Child1'),
end: find.text('View1Child3'),
view: tester.viewOf(find.text('View1Child3')),
),
throwsA(isStateError.having(
(StateError e) => e.message,
'message',
contains('The start node is not part of the provided view.'),
)),
);
});
testWidgets('simulatedAccessibilityTraversal - end is not in view', (WidgetTester tester) async {
await pumpViews(tester: tester);
expect(
() => tester.semantics.simulatedAccessibilityTraversal(
start: find.text('View2Child1'),
end: find.text('View1Child3'),
view: tester.viewOf(find.text('View2Child1')),
),
throwsA(isStateError.having(
(StateError e) => e.message,
'message',
contains('The end node is not part of the provided view.'),
)),
);
});
testWidgets('viewOf', (WidgetTester tester) async {
await pumpViews(tester: tester);
expect(tester.viewOf(find.text('View0Child0')).viewId, 100);
expect(tester.viewOf(find.text('View1Child1')).viewId, tester.view.viewId);
expect(tester.viewOf(find.text('View2Child2')).viewId, 102);
});
testWidgets('layers includes layers from all views', (WidgetTester tester) async {
await pumpViews(tester: tester);
const int numberOfViews = 3;
expect(tester.binding.renderViews.length, numberOfViews); // One RenderView for each FlutterView.
final List<Layer> layers = tester.layers;
// Each RenderView contributes a TransformLayer and a PictureLayer.
expect(layers, hasLength(numberOfViews * 2));
expect(layers.whereType<TransformLayer>(), hasLength(numberOfViews));
expect(layers.whereType<PictureLayer>(), hasLength(numberOfViews));
expect(
layers.whereType<TransformLayer>().map((TransformLayer l ) => l.owner),
containsAll(tester.binding.renderViews),
);
});
testWidgets('hitTestOnBinding', (WidgetTester tester) async {
await pumpViews(tester: tester);
// Not specifying a viewId hit tests on tester.view:
HitTestResult result = tester.hitTestOnBinding(Offset.zero);
expect(result.path.map((HitTestEntry h) => h.target).whereType<RenderView>().single.flutterView, tester.view);
// Specifying a viewId is respected:
result = tester.hitTestOnBinding(Offset.zero, viewId: 100);
expect(result.path.map((HitTestEntry h) => h.target).whereType<RenderView>().single.flutterView.viewId, 100);
result = tester.hitTestOnBinding(Offset.zero, viewId: 102);
expect(result.path.map((HitTestEntry h) => h.target).whereType<RenderView>().single.flutterView.viewId, 102);
});
testWidgets('hitTestable works in different Views', (WidgetTester tester) async {
await pumpViews(tester: tester);
expect((find.text('View0Child0').hitTestable().evaluate().single.widget as Text).data, 'View0Child0');
expect((find.text('View1Child1').hitTestable().evaluate().single.widget as Text).data, 'View1Child1');
expect((find.text('View2Child2').hitTestable().evaluate().single.widget as Text).data, 'View2Child2');
});
}
Future<void> pumpViews({required WidgetTester tester}) {
final List<Widget> views = <Widget>[
for (int i = 0; i < 3; i++)
View(
view: i == 1 ? tester.view : FakeView(tester.view, viewId: i + 100),
child: Center(
child: Column(
children: <Widget>[
for (int c = 0; c < 5; c++)
Semantics(container: true, child: Text('View${i}Child$c')),
],
),
),
),
];
tester.binding.attachRootWidget(
Directionality(
textDirection: TextDirection.ltr,
child: ViewCollection(
views: views,
),
),
);
tester.binding.scheduleFrame();
return tester.binding.pump();
}
class FakeView extends TestFlutterView{
FakeView(FlutterView view, { this.viewId = 100 }) : super(
view: view,
platformDispatcher: view.platformDispatcher as TestPlatformDispatcher,
display: view.display as TestDisplay,
);
@override
final int viewId;
}