feat: add elastic glass dock motion and Android tablet layouts
This commit is contained in:
david1465833828
@@ -25,7 +25,7 @@ void main() {
|
||||
await gesture.cancel();
|
||||
await tester.pumpAndSettle();
|
||||
});
|
||||
testWidgets('tap cursor travels monotonically with no size jitter', (
|
||||
testWidgets('tap has bounded elastic stretch and settles on the new icon', (
|
||||
tester,
|
||||
) async {
|
||||
await tester.pumpWidget(_dock());
|
||||
@@ -35,17 +35,123 @@ void main() {
|
||||
final target = tester.getCenter(find.byIcon(Icons.assignment_rounded)).dx;
|
||||
await tester.tap(find.byIcon(Icons.assignment_rounded));
|
||||
await tester.pump();
|
||||
var previous = resting.center.dx;
|
||||
for (var frame = 0; frame < 50; frame++) {
|
||||
var widest = resting.width;
|
||||
var furthest = resting.center.dx;
|
||||
for (var frame = 0; frame < 70; frame++) {
|
||||
await tester.pump(const Duration(milliseconds: 16));
|
||||
final rect = tester.getRect(lens);
|
||||
expect(rect.width, closeTo(resting.width, 0.05));
|
||||
expect(rect.height, closeTo(resting.height, 0.05));
|
||||
expect(rect.center.dx, greaterThanOrEqualTo(previous - 0.05));
|
||||
expect(rect.center.dx, lessThanOrEqualTo(target + 0.05));
|
||||
previous = rect.center.dx;
|
||||
widest = widest > rect.width ? widest : rect.width;
|
||||
furthest = furthest > rect.center.dx ? furthest : rect.center.dx;
|
||||
expect(rect.width, lessThan(resting.width * 1.4));
|
||||
expect(rect.center.dx, lessThan(target + 8));
|
||||
}
|
||||
expect(previous, closeTo(target, 0.05));
|
||||
expect(widest, greaterThan(resting.width * 1.06));
|
||||
expect(furthest, greaterThan(target + 0.1));
|
||||
expect(tester.getCenter(lens).dx, closeTo(target, 0.1));
|
||||
expect(tester.getSize(lens).width, closeTo(resting.width, 0.1));
|
||||
});
|
||||
testWidgets('drag deforms the dock body while labels remain readable', (
|
||||
tester,
|
||||
) async {
|
||||
await tester.pumpWidget(_dock());
|
||||
await tester.pumpAndSettle();
|
||||
final body = find.byType(GlassRefraction).first;
|
||||
final resting = tester.getRect(body);
|
||||
final labelSize = tester.getSize(find.text('考试'));
|
||||
final gesture = await tester.startGesture(
|
||||
tester.getCenter(find.byKey(const Key('dock-cursor'))),
|
||||
);
|
||||
await tester.pump(const Duration(milliseconds: 180));
|
||||
await gesture.moveBy(const Offset(75, 0));
|
||||
await tester.pump();
|
||||
await tester.pump(const Duration(milliseconds: 150));
|
||||
expect(tester.getSize(body).width, greaterThan(resting.width + 5));
|
||||
expect(tester.getSize(body).height, greaterThan(resting.height + 2));
|
||||
expect(tester.getSize(find.text('考试')), labelSize);
|
||||
await gesture.up();
|
||||
await tester.pumpAndSettle();
|
||||
expect(tester.getSize(body), resting.size);
|
||||
});
|
||||
testWidgets(
|
||||
'rapid reverse taps keep position continuous and finish on last tab',
|
||||
(tester) async {
|
||||
await tester.pumpWidget(_dock());
|
||||
await tester.pumpAndSettle();
|
||||
final lens = find.byType(GlassRefraction).last;
|
||||
await tester.tap(find.byIcon(Icons.person_rounded));
|
||||
await tester.pump();
|
||||
await tester.pump(const Duration(milliseconds: 90));
|
||||
final before = tester.getCenter(lens);
|
||||
final beforeSize = tester.getSize(lens);
|
||||
await tester.tap(find.byIcon(Icons.calendar_month_rounded));
|
||||
await tester.pump();
|
||||
expect((tester.getCenter(lens) - before).distance, lessThan(1));
|
||||
expect(tester.getSize(lens).width, closeTo(beforeSize.width, 0.1));
|
||||
await tester.pumpAndSettle();
|
||||
expect(
|
||||
tester.getCenter(lens).dx,
|
||||
closeTo(
|
||||
tester.getCenter(find.byIcon(Icons.calendar_month_rounded)).dx,
|
||||
0.1,
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
testWidgets('reversing a tap at the edge preserves glass size and position', (
|
||||
tester,
|
||||
) async {
|
||||
await tester.pumpWidget(_dock());
|
||||
await tester.pumpAndSettle();
|
||||
final lens = find.byType(GlassRefraction).last;
|
||||
final body = find.byType(GlassRefraction).first;
|
||||
await tester.tap(find.byIcon(Icons.person_rounded));
|
||||
await tester.pump();
|
||||
await tester.pump(const Duration(milliseconds: 230));
|
||||
final before = tester.getRect(lens);
|
||||
final bodyBefore = tester.getRect(body);
|
||||
await tester.tap(find.byIcon(Icons.calendar_month_rounded));
|
||||
await tester.pump();
|
||||
final after = tester.getRect(lens);
|
||||
expect(after.width, closeTo(before.width, 0.1));
|
||||
expect(after.height, closeTo(before.height, 0.1));
|
||||
expect(after.center.dx, closeTo(before.center.dx, 0.1));
|
||||
expect(tester.getSize(body).width, closeTo(bodyBefore.width, 0.1));
|
||||
await tester.pumpAndSettle();
|
||||
expect(
|
||||
tester.getCenter(lens).dx,
|
||||
closeTo(
|
||||
tester.getCenter(find.byIcon(Icons.calendar_month_rounded)).dx,
|
||||
0.1,
|
||||
),
|
||||
);
|
||||
});
|
||||
testWidgets('dock body follows a moving drag and springs back on cancel', (
|
||||
tester,
|
||||
) async {
|
||||
await tester.pumpWidget(_dock());
|
||||
await tester.pumpAndSettle();
|
||||
final body = find.byType(GlassRefraction).first;
|
||||
final resting = tester.getRect(body);
|
||||
final gesture = await tester.startGesture(
|
||||
tester.getCenter(find.byKey(const Key('dock-cursor'))),
|
||||
);
|
||||
await tester.pump(const Duration(milliseconds: 110));
|
||||
await tester.pump(const Duration(milliseconds: 350));
|
||||
await gesture.moveBy(const Offset(24, 0));
|
||||
await tester.pump();
|
||||
await tester.pump(const Duration(milliseconds: 350));
|
||||
final held = tester.getRect(body);
|
||||
await gesture.moveBy(const Offset(60, 0));
|
||||
await tester.pump();
|
||||
await tester.pump(const Duration(milliseconds: 100));
|
||||
expect(tester.getSize(body).width, greaterThan(held.width + 0.5));
|
||||
await gesture.cancel();
|
||||
await tester.pumpAndSettle();
|
||||
final settled = tester.getRect(body);
|
||||
expect(settled.left, closeTo(resting.left, 0.05));
|
||||
expect(settled.top, closeTo(resting.top, 0.05));
|
||||
expect(settled.width, closeTo(resting.width, 0.05));
|
||||
expect(settled.height, closeTo(resting.height, 0.05));
|
||||
});
|
||||
testWidgets('base and selected cursor both refract the live backdrop', (
|
||||
tester,
|
||||
@@ -75,6 +181,44 @@ void main() {
|
||||
expect(tester.getCenter(lens).dx, closeTo(target, 0.05));
|
||||
expect(tester.getSize(lens), resting);
|
||||
});
|
||||
testWidgets(
|
||||
'changing reduced motion during a tap does not leave frozen deformation',
|
||||
(tester) async {
|
||||
final reduced = ValueNotifier(false);
|
||||
var selected = 0;
|
||||
await tester.pumpWidget(
|
||||
MaterialApp(
|
||||
home: StatefulBuilder(
|
||||
builder: (context, setState) => ValueListenableBuilder<bool>(
|
||||
valueListenable: reduced,
|
||||
builder: (context, value, _) => MediaQuery(
|
||||
data: MediaQueryData(disableAnimations: value),
|
||||
child: Center(
|
||||
child: GlassDock(
|
||||
selectedIndex: selected,
|
||||
onSelected: (index) => setState(() => selected = index),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
await tester.pumpAndSettle();
|
||||
final lens = find.byType(GlassRefraction).last;
|
||||
final size = tester.getSize(lens);
|
||||
await tester.tap(find.byIcon(Icons.assignment_rounded));
|
||||
await tester.pump();
|
||||
await tester.pump(const Duration(milliseconds: 120));
|
||||
reduced.value = true;
|
||||
await tester.pump();
|
||||
reduced.value = false;
|
||||
await tester.pumpAndSettle();
|
||||
expect(tester.getSize(lens).width, closeTo(size.width, 0.05));
|
||||
expect(tester.getSize(lens).height, closeTo(size.height, 0.05));
|
||||
reduced.dispose();
|
||||
},
|
||||
);
|
||||
testWidgets('held cursor enlarges before dragging and returns on release', (
|
||||
tester,
|
||||
) async {
|
||||
|
||||
Reference in New Issue
Block a user