composited_transform_test.dart 15 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
2 3 4
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

5 6 7
import 'dart:ui' as ui;

import 'package:flutter/rendering.dart';
8
import 'package:flutter/widgets.dart';
9
import 'package:flutter_test/flutter_test.dart';
10 11

void main() {
12 13 14 15
  final LayerLink link = LayerLink();

  testWidgets('Change link during layout', (WidgetTester tester) async {
    final GlobalKey key = GlobalKey();
16
    Widget build({ LayerLink? linkToUse }) {
17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
      return Directionality(
        textDirection: TextDirection.ltr,
        // The LayoutBuilder forces the CompositedTransformTarget widget to
        // access its own size when [RenderObject.debugActiveLayout] is
        // non-null.
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            return Stack(
            children: <Widget>[
              Positioned(
                left: 123.0,
                top: 456.0,
                child: CompositedTransformTarget(
                  link: linkToUse ?? link,
                  child: const SizedBox(height: 10.0, width: 10.0),
                ),
              ),
              Positioned(
                left: 787.0,
                top: 343.0,
                child: CompositedTransformFollower(
                  link: linkToUse ?? link,
                  targetAnchor: Alignment.center,
                  followerAnchor: Alignment.center,
41
                  child: SizedBox(key: key, height: 20.0, width: 20.0),
42 43 44 45 46 47 48 49 50 51
                ),
              ),
            ],
          );
          },
        ),
      );
    }

    await tester.pumpWidget(build());
52
    final RenderBox box = key.currentContext!.findRenderObject()! as RenderBox;
53 54 55 56 57 58
    expect(box.localToGlobal(Offset.zero), const Offset(118.0, 451.0));

    await tester.pumpWidget(build(linkToUse: LayerLink()));
    expect(box.localToGlobal(Offset.zero), const Offset(118.0, 451.0));
  });

59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87
  testWidgets('LeaderLayer should not cause error', (WidgetTester tester) async {
    final LayerLink link = LayerLink();

    Widget buildWidget({
      required double paddingLeft,
      Color siblingColor = const Color(0xff000000),
    }) {
      return Directionality(
        textDirection: TextDirection.ltr,
        child: Stack(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(left: paddingLeft),
              child: CompositedTransformTarget(
                link: link,
                child: RepaintBoundary(child: ClipRect(child: Container(color: const Color(0x00ff0000)))),
              ),
            ),
            Positioned.fill(child: RepaintBoundary(child: ColoredBox(color: siblingColor))),
          ],
        ),
      );
    }

    await tester.pumpWidget(buildWidget(paddingLeft: 10));
    await tester.pumpWidget(buildWidget(paddingLeft: 0));
    await tester.pumpWidget(buildWidget(paddingLeft: 0, siblingColor: const Color(0x0000ff00)));
  });

88
  group('Composited transforms - only offsets', () {
89
    final GlobalKey key = GlobalKey();
90

91
    Widget build({ required Alignment targetAlignment, required Alignment followerAlignment }) {
92
      return Directionality(
93
        textDirection: TextDirection.ltr,
94
        child: Stack(
95
          children: <Widget>[
96
            Positioned(
97 98
              left: 123.0,
              top: 456.0,
99
              child: CompositedTransformTarget(
100
                link: link,
101
                child: const SizedBox(height: 10.0, width: 10.0),
102
              ),
103
            ),
104
            Positioned(
105 106
              left: 787.0,
              top: 343.0,
107
              child: CompositedTransformFollower(
108
                link: link,
109 110
                targetAnchor: targetAlignment,
                followerAnchor: followerAlignment,
111
                child: SizedBox(key: key, height: 20.0, width: 20.0),
112
              ),
113
            ),
114 115
          ],
        ),
116 117 118 119 120
      );
    }

    testWidgets('topLeft', (WidgetTester tester) async {
      await tester.pumpWidget(build(targetAlignment: Alignment.topLeft, followerAlignment: Alignment.topLeft));
121
      final RenderBox box = key.currentContext!.findRenderObject()! as RenderBox;
122 123 124 125 126
      expect(box.localToGlobal(Offset.zero), const Offset(123.0, 456.0));
    });

    testWidgets('center', (WidgetTester tester) async {
      await tester.pumpWidget(build(targetAlignment: Alignment.center, followerAlignment: Alignment.center));
127
      final RenderBox box = key.currentContext!.findRenderObject()! as RenderBox;
128 129 130 131 132
      expect(box.localToGlobal(Offset.zero), const Offset(118.0, 451.0));
    });

    testWidgets('bottomRight - topRight', (WidgetTester tester) async {
      await tester.pumpWidget(build(targetAlignment: Alignment.bottomRight, followerAlignment: Alignment.topRight));
133
      final RenderBox box = key.currentContext!.findRenderObject()! as RenderBox;
134 135
      expect(box.localToGlobal(Offset.zero), const Offset(113.0, 466.0));
    });
136 137
  });

138
  group('Composited transforms - with rotations', () {
139 140
    final GlobalKey key1 = GlobalKey();
    final GlobalKey key2 = GlobalKey();
141

142
    Widget build({ required Alignment targetAlignment, required Alignment followerAlignment }) {
143
      return Directionality(
144
        textDirection: TextDirection.ltr,
145
        child: Stack(
146
          children: <Widget>[
147
            Positioned(
148 149
              top: 123.0,
              left: 456.0,
150
              child: Transform.rotate(
151
                angle: 1.0, // radians
152
                child: CompositedTransformTarget(
153
                  link: link,
154
                  child: SizedBox(key: key1, width: 80.0, height: 10.0),
155
                ),
156 157
              ),
            ),
158
            Positioned(
159 160
              top: 787.0,
              left: 343.0,
161
              child: Transform.rotate(
162
                angle: -0.3, // radians
163
                child: CompositedTransformFollower(
164
                  link: link,
165 166
                  targetAnchor: targetAlignment,
                  followerAnchor: followerAlignment,
167
                  child: SizedBox(key: key2, width: 40.0, height: 20.0),
168
                ),
169 170
              ),
            ),
171 172
          ],
        ),
173 174 175 176
      );
    }
    testWidgets('topLeft', (WidgetTester tester) async {
      await tester.pumpWidget(build(targetAlignment: Alignment.topLeft, followerAlignment: Alignment.topLeft));
177 178
      final RenderBox box1 = key1.currentContext!.findRenderObject()! as RenderBox;
      final RenderBox box2 = key2.currentContext!.findRenderObject()! as RenderBox;
179 180 181 182 183 184 185
      final Offset position1 = box1.localToGlobal(Offset.zero);
      final Offset position2 = box2.localToGlobal(Offset.zero);
      expect(position1, offsetMoreOrLessEquals(position2));
    });

    testWidgets('center', (WidgetTester tester) async {
      await tester.pumpWidget(build(targetAlignment: Alignment.center, followerAlignment: Alignment.center));
186 187
      final RenderBox box1 = key1.currentContext!.findRenderObject()! as RenderBox;
      final RenderBox box2 = key2.currentContext!.findRenderObject()! as RenderBox;
188 189 190 191 192 193 194
      final Offset position1 = box1.localToGlobal(const Offset(40, 5));
      final Offset position2 = box2.localToGlobal(const Offset(20, 10));
      expect(position1, offsetMoreOrLessEquals(position2));
    });

    testWidgets('bottomRight - topRight', (WidgetTester tester) async {
      await tester.pumpWidget(build(targetAlignment: Alignment.bottomRight, followerAlignment: Alignment.topRight));
195 196
      final RenderBox box1 = key1.currentContext!.findRenderObject()! as RenderBox;
      final RenderBox box2 = key2.currentContext!.findRenderObject()! as RenderBox;
197 198 199 200
      final Offset position1 = box1.localToGlobal(const Offset(80, 10));
      final Offset position2 = box2.localToGlobal(const Offset(40, 0));
      expect(position1, offsetMoreOrLessEquals(position2));
    });
201 202
  });

203
  group('Composited transforms - nested', () {
204 205
    final GlobalKey key1 = GlobalKey();
    final GlobalKey key2 = GlobalKey();
206

207
    Widget build({ required Alignment targetAlignment, required Alignment followerAlignment }) {
208
      return Directionality(
209
        textDirection: TextDirection.ltr,
210
        child: Stack(
211
          children: <Widget>[
212
            Positioned(
213 214
              top: 123.0,
              left: 456.0,
215
              child: Transform.rotate(
216
                angle: 1.0, // radians
217
                child: CompositedTransformTarget(
218
                  link: link,
219
                  child: SizedBox(key: key1, width: 80.0, height: 10.0),
220
                ),
221 222
              ),
            ),
223
            Positioned(
224 225
              top: 787.0,
              left: 343.0,
226
              child: Transform.rotate(
227
                angle: -0.3, // radians
228
                child: Padding(
229
                  padding: const EdgeInsets.all(20.0),
230 231 232 233 234
                  child: CompositedTransformFollower(
                    link: LayerLink(),
                    child: Transform(
                      transform: Matrix4.skew(0.9, 1.1),
                      child: Padding(
235
                        padding: const EdgeInsets.all(20.0),
236
                        child: CompositedTransformFollower(
237
                          link: link,
238 239
                          targetAnchor: targetAlignment,
                          followerAnchor: followerAlignment,
240
                          child: SizedBox(key: key2, width: 40.0, height: 20.0),
241
                        ),
242 243 244 245 246 247
                      ),
                    ),
                  ),
                ),
              ),
            ),
248 249
          ],
        ),
250 251 252 253
      );
    }
    testWidgets('topLeft', (WidgetTester tester) async {
      await tester.pumpWidget(build(targetAlignment: Alignment.topLeft, followerAlignment: Alignment.topLeft));
254 255
      final RenderBox box1 = key1.currentContext!.findRenderObject()! as RenderBox;
      final RenderBox box2 = key2.currentContext!.findRenderObject()! as RenderBox;
256 257 258 259 260 261 262
      final Offset position1 = box1.localToGlobal(Offset.zero);
      final Offset position2 = box2.localToGlobal(Offset.zero);
      expect(position1, offsetMoreOrLessEquals(position2));
    });

    testWidgets('center', (WidgetTester tester) async {
      await tester.pumpWidget(build(targetAlignment: Alignment.center, followerAlignment: Alignment.center));
263 264
      final RenderBox box1 = key1.currentContext!.findRenderObject()! as RenderBox;
      final RenderBox box2 = key2.currentContext!.findRenderObject()! as RenderBox;
265 266 267 268 269 270 271
      final Offset position1 = box1.localToGlobal(Alignment.center.alongSize(const Size(80, 10)));
      final Offset position2 = box2.localToGlobal(Alignment.center.alongSize(const Size(40, 20)));
      expect(position1, offsetMoreOrLessEquals(position2));
    });

    testWidgets('bottomRight - topRight', (WidgetTester tester) async {
      await tester.pumpWidget(build(targetAlignment: Alignment.bottomRight, followerAlignment: Alignment.topRight));
272 273
      final RenderBox box1 = key1.currentContext!.findRenderObject()! as RenderBox;
      final RenderBox box2 = key2.currentContext!.findRenderObject()! as RenderBox;
274 275 276 277
      final Offset position1 = box1.localToGlobal(Alignment.bottomRight.alongSize(const Size(80, 10)));
      final Offset position2 = box2.localToGlobal(Alignment.topRight.alongSize(const Size(40, 20)));
      expect(position1, offsetMoreOrLessEquals(position2));
    });
278 279
  });

280
  group('Composited transforms - hit testing', () {
281 282 283
    final GlobalKey key1 = GlobalKey();
    final GlobalKey key2 = GlobalKey();
    final GlobalKey key3 = GlobalKey();
284 285 286

    bool tapped = false;

287
    Widget build({ required Alignment targetAlignment, required Alignment followerAlignment }) {
288
      return Directionality(
289
        textDirection: TextDirection.ltr,
290
        child: Stack(
291
          children: <Widget>[
292
            Positioned(
293 294
              left: 123.0,
              top: 456.0,
295
              child: CompositedTransformTarget(
296
                link: link,
297
                child: SizedBox(key: key1, height: 10.0, width: 10.0),
298
              ),
299
            ),
300
            CompositedTransformFollower(
301
              link: link,
302
              child: GestureDetector(
303 304
                key: key2,
                behavior: HitTestBehavior.opaque,
305
                onTap: () { tapped = true; },
306
                child: SizedBox(key: key3, height: 2.0, width: 2.0),
307
              ),
308
            ),
309 310
          ],
        ),
311 312 313 314 315 316 317 318 319 320 321 322 323 324 325
      );
    }

    const List<Alignment> alignments = <Alignment>[
      Alignment.topLeft, Alignment.topRight,
      Alignment.center,
      Alignment.bottomLeft, Alignment.bottomRight,
    ];

    setUp(() { tapped = false; });

    for (final Alignment targetAlignment in alignments) {
      for (final Alignment followerAlignment in alignments) {
        testWidgets('$targetAlignment - $followerAlignment', (WidgetTester tester) async{
          await tester.pumpWidget(build(targetAlignment: targetAlignment, followerAlignment: followerAlignment));
326
          final RenderBox box2 = key2.currentContext!.findRenderObject()! as RenderBox;
327 328
          expect(box2.size, const Size(2.0, 2.0));
          expect(tapped, isFalse);
329
          await tester.tap(find.byKey(key3), warnIfMissed: false); // the container itself is transparent to hits
330 331 332 333
          expect(tapped, isTrue);
        });
      }
    }
334
  });
335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352

  testWidgets('Leader after Follower asserts', (WidgetTester tester) async {
    final LayerLink link = LayerLink();
    await tester.pumpWidget(
      CompositedTransformFollower(
        link: link,
        child: CompositedTransformTarget(
          link: link,
          child: const SizedBox(height: 20, width: 20),
        ),
      ),
    );

    expect(
      (tester.takeException() as AssertionError).message,
      contains('LeaderLayer anchor must come before FollowerLayer in paint order'),
    );
  });
353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370

  testWidgets(
      '`FollowerLayer` (`CompositedTransformFollower`) has null pointer error when using with some kinds of `Layer`s',
      (WidgetTester tester) async {
    final LayerLink link = LayerLink();
    await tester.pumpWidget(
      CompositedTransformTarget(
        link: link,
        child: CompositedTransformFollower(
          link: link,
          child: const _CustomWidget(),
        ),
      ),
    );
  });
}

class _CustomWidget extends SingleChildRenderObjectWidget {
371
  const _CustomWidget();
372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411

  @override
  _CustomRenderObject createRenderObject(BuildContext context) => _CustomRenderObject();

  @override
  void updateRenderObject(BuildContext context, _CustomRenderObject renderObject) {}
}

class _CustomRenderObject extends RenderProxyBox {
  _CustomRenderObject({RenderBox? child}) : super(child);

  @override
  void paint(PaintingContext context, Offset offset) {
    if (layer == null) {
      layer = _CustomLayer(
        computeSomething: _computeSomething,
      );
    } else {
      (layer as _CustomLayer?)?.computeSomething = _computeSomething;
    }

    context.pushLayer(layer!, super.paint, Offset.zero);
  }

  void _computeSomething() {
    // indeed, use `globalToLocal` to compute some useful data
    globalToLocal(Offset.zero);
  }
}

class _CustomLayer extends ContainerLayer {
  _CustomLayer({required this.computeSomething});

  VoidCallback computeSomething;

  @override
  void addToScene(ui.SceneBuilder builder) {
    computeSomething(); // indeed, need to use result of this function
    super.addToScene(builder);
  }
412
}