| // 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' as ui; |
| |
| import 'package:flutter/rendering.dart'; |
| import 'package:flutter/widgets.dart'; |
| import 'package:flutter_test/flutter_test.dart'; |
| |
| void main() { |
| final LayerLink link = LayerLink(); |
| |
| testWidgets('Change link during layout', (WidgetTester tester) async { |
| final GlobalKey key = GlobalKey(); |
| Widget build({ LayerLink? linkToUse }) { |
| 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, |
| child: SizedBox(key: key, height: 20.0, width: 20.0), |
| ), |
| ), |
| ], |
| ); |
| }, |
| ), |
| ); |
| } |
| |
| await tester.pumpWidget(build()); |
| final RenderBox box = key.currentContext!.findRenderObject()! as RenderBox; |
| 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)); |
| }); |
| |
| 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))); |
| }); |
| |
| group('Composited transforms - only offsets', () { |
| final GlobalKey key = GlobalKey(); |
| |
| Widget build({ required Alignment targetAlignment, required Alignment followerAlignment }) { |
| return Directionality( |
| textDirection: TextDirection.ltr, |
| child: Stack( |
| children: <Widget>[ |
| Positioned( |
| left: 123.0, |
| top: 456.0, |
| child: CompositedTransformTarget( |
| link: link, |
| child: const SizedBox(height: 10.0, width: 10.0), |
| ), |
| ), |
| Positioned( |
| left: 787.0, |
| top: 343.0, |
| child: CompositedTransformFollower( |
| link: link, |
| targetAnchor: targetAlignment, |
| followerAnchor: followerAlignment, |
| child: SizedBox(key: key, height: 20.0, width: 20.0), |
| ), |
| ), |
| ], |
| ), |
| ); |
| } |
| |
| testWidgets('topLeft', (WidgetTester tester) async { |
| await tester.pumpWidget(build(targetAlignment: Alignment.topLeft, followerAlignment: Alignment.topLeft)); |
| final RenderBox box = key.currentContext!.findRenderObject()! as RenderBox; |
| 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)); |
| final RenderBox box = key.currentContext!.findRenderObject()! as RenderBox; |
| 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)); |
| final RenderBox box = key.currentContext!.findRenderObject()! as RenderBox; |
| expect(box.localToGlobal(Offset.zero), const Offset(113.0, 466.0)); |
| }); |
| }); |
| |
| group('Composited transforms - with rotations', () { |
| final GlobalKey key1 = GlobalKey(); |
| final GlobalKey key2 = GlobalKey(); |
| |
| Widget build({ required Alignment targetAlignment, required Alignment followerAlignment }) { |
| return Directionality( |
| textDirection: TextDirection.ltr, |
| child: Stack( |
| children: <Widget>[ |
| Positioned( |
| top: 123.0, |
| left: 456.0, |
| child: Transform.rotate( |
| angle: 1.0, // radians |
| child: CompositedTransformTarget( |
| link: link, |
| child: SizedBox(key: key1, width: 80.0, height: 10.0), |
| ), |
| ), |
| ), |
| Positioned( |
| top: 787.0, |
| left: 343.0, |
| child: Transform.rotate( |
| angle: -0.3, // radians |
| child: CompositedTransformFollower( |
| link: link, |
| targetAnchor: targetAlignment, |
| followerAnchor: followerAlignment, |
| child: SizedBox(key: key2, width: 40.0, height: 20.0), |
| ), |
| ), |
| ), |
| ], |
| ), |
| ); |
| } |
| testWidgets('topLeft', (WidgetTester tester) async { |
| await tester.pumpWidget(build(targetAlignment: Alignment.topLeft, followerAlignment: Alignment.topLeft)); |
| final RenderBox box1 = key1.currentContext!.findRenderObject()! as RenderBox; |
| final RenderBox box2 = key2.currentContext!.findRenderObject()! as RenderBox; |
| 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)); |
| final RenderBox box1 = key1.currentContext!.findRenderObject()! as RenderBox; |
| final RenderBox box2 = key2.currentContext!.findRenderObject()! as RenderBox; |
| 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)); |
| final RenderBox box1 = key1.currentContext!.findRenderObject()! as RenderBox; |
| final RenderBox box2 = key2.currentContext!.findRenderObject()! as RenderBox; |
| final Offset position1 = box1.localToGlobal(const Offset(80, 10)); |
| final Offset position2 = box2.localToGlobal(const Offset(40, 0)); |
| expect(position1, offsetMoreOrLessEquals(position2)); |
| }); |
| }); |
| |
| group('Composited transforms - nested', () { |
| final GlobalKey key1 = GlobalKey(); |
| final GlobalKey key2 = GlobalKey(); |
| |
| Widget build({ required Alignment targetAlignment, required Alignment followerAlignment }) { |
| return Directionality( |
| textDirection: TextDirection.ltr, |
| child: Stack( |
| children: <Widget>[ |
| Positioned( |
| top: 123.0, |
| left: 456.0, |
| child: Transform.rotate( |
| angle: 1.0, // radians |
| child: CompositedTransformTarget( |
| link: link, |
| child: SizedBox(key: key1, width: 80.0, height: 10.0), |
| ), |
| ), |
| ), |
| Positioned( |
| top: 787.0, |
| left: 343.0, |
| child: Transform.rotate( |
| angle: -0.3, // radians |
| child: Padding( |
| padding: const EdgeInsets.all(20.0), |
| child: CompositedTransformFollower( |
| link: LayerLink(), |
| child: Transform( |
| transform: Matrix4.skew(0.9, 1.1), |
| child: Padding( |
| padding: const EdgeInsets.all(20.0), |
| child: CompositedTransformFollower( |
| link: link, |
| targetAnchor: targetAlignment, |
| followerAnchor: followerAlignment, |
| child: SizedBox(key: key2, width: 40.0, height: 20.0), |
| ), |
| ), |
| ), |
| ), |
| ), |
| ), |
| ), |
| ], |
| ), |
| ); |
| } |
| testWidgets('topLeft', (WidgetTester tester) async { |
| await tester.pumpWidget(build(targetAlignment: Alignment.topLeft, followerAlignment: Alignment.topLeft)); |
| final RenderBox box1 = key1.currentContext!.findRenderObject()! as RenderBox; |
| final RenderBox box2 = key2.currentContext!.findRenderObject()! as RenderBox; |
| 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)); |
| final RenderBox box1 = key1.currentContext!.findRenderObject()! as RenderBox; |
| final RenderBox box2 = key2.currentContext!.findRenderObject()! as RenderBox; |
| 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)); |
| final RenderBox box1 = key1.currentContext!.findRenderObject()! as RenderBox; |
| final RenderBox box2 = key2.currentContext!.findRenderObject()! as RenderBox; |
| 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)); |
| }); |
| }); |
| |
| group('Composited transforms - hit testing', () { |
| final GlobalKey key1 = GlobalKey(); |
| final GlobalKey key2 = GlobalKey(); |
| final GlobalKey key3 = GlobalKey(); |
| |
| bool tapped = false; |
| |
| Widget build({ required Alignment targetAlignment, required Alignment followerAlignment }) { |
| return Directionality( |
| textDirection: TextDirection.ltr, |
| child: Stack( |
| children: <Widget>[ |
| Positioned( |
| left: 123.0, |
| top: 456.0, |
| child: CompositedTransformTarget( |
| link: link, |
| child: SizedBox(key: key1, height: 10.0, width: 10.0), |
| ), |
| ), |
| CompositedTransformFollower( |
| link: link, |
| child: GestureDetector( |
| key: key2, |
| behavior: HitTestBehavior.opaque, |
| onTap: () { tapped = true; }, |
| child: SizedBox(key: key3, height: 2.0, width: 2.0), |
| ), |
| ), |
| ], |
| ), |
| ); |
| } |
| |
| 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)); |
| final RenderBox box2 = key2.currentContext!.findRenderObject()! as RenderBox; |
| expect(box2.size, const Size(2.0, 2.0)); |
| expect(tapped, isFalse); |
| await tester.tap(find.byKey(key3), warnIfMissed: false); // the container itself is transparent to hits |
| expect(tapped, isTrue); |
| }); |
| } |
| } |
| }); |
| |
| 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'), |
| ); |
| }); |
| |
| 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 { |
| const _CustomWidget(); |
| |
| @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); |
| } |
| } |