blob: 5a84f4476e413e619358c94531ebc0a0e8cc7241 [file] [log] [blame]
// Copyright 2013 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 'package:flutter/material.dart';
import 'package:flutter_adaptive_scaffold/src/adaptive_layout.dart';
import 'package:flutter_adaptive_scaffold/src/breakpoints.dart';
import 'package:flutter_adaptive_scaffold/src/slot_layout.dart';
import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets(
'slot layout displays correct item of config based on screen width',
(WidgetTester tester) async {
MediaQuery slot(double width) {
return MediaQuery(
// TODO(stuartmorgan): Replace with .fromView once this package requires
// Flutter 3.8+.
// ignore: deprecated_member_use
data: MediaQueryData.fromWindow(WidgetsBinding.instance.window)
.copyWith(size: Size(width, 800)),
child: Directionality(
textDirection: TextDirection.ltr,
child: SlotLayout(
config: <Breakpoint, SlotLayoutConfig>{
TestBreakpoint0(): SlotLayout.from(
key: const Key('0'), builder: (_) => const SizedBox()),
TestBreakpoint400(): SlotLayout.from(
key: const Key('400'), builder: (_) => const SizedBox()),
TestBreakpoint800(): SlotLayout.from(
key: const Key('800'), builder: (_) => const SizedBox()),
},
),
),
);
}
await tester.pumpWidget(slot(300));
expect(find.byKey(const Key('0')), findsOneWidget);
expect(find.byKey(const Key('400')), findsNothing);
expect(find.byKey(const Key('800')), findsNothing);
await tester.pumpWidget(slot(500));
expect(find.byKey(const Key('0')), findsNothing);
expect(find.byKey(const Key('400')), findsOneWidget);
expect(find.byKey(const Key('800')), findsNothing);
await tester.pumpWidget(slot(1000));
expect(find.byKey(const Key('0')), findsNothing);
expect(find.byKey(const Key('400')), findsNothing);
expect(find.byKey(const Key('800')), findsOneWidget);
});
testWidgets('adaptive layout displays children in correct places',
(WidgetTester tester) async {
await tester.pumpWidget(await layout(width: 400, tester: tester));
await tester.pumpAndSettle();
expect(tester.getTopLeft(topNavigation), Offset.zero);
expect(tester.getTopLeft(secondaryNavigation), const Offset(390, 10));
expect(tester.getTopLeft(primaryNavigation), const Offset(0, 10));
expect(tester.getTopLeft(bottomNavigation), const Offset(0, 790));
expect(tester.getTopLeft(testBreakpoint), const Offset(10, 10));
expect(tester.getBottomRight(testBreakpoint), const Offset(200, 790));
expect(tester.getTopLeft(secondaryTestBreakpoint), const Offset(200, 10));
expect(
tester.getBottomRight(secondaryTestBreakpoint), const Offset(390, 790));
});
testWidgets('adaptive layout correct layout when body vertical',
(WidgetTester tester) async {
await tester.pumpWidget(
await layout(width: 400, tester: tester, orientation: Axis.vertical));
await tester.pumpAndSettle();
expect(tester.getTopLeft(topNavigation), Offset.zero);
expect(tester.getTopLeft(secondaryNavigation), const Offset(390, 10));
expect(tester.getTopLeft(primaryNavigation), const Offset(0, 10));
expect(tester.getTopLeft(bottomNavigation), const Offset(0, 790));
expect(tester.getTopLeft(testBreakpoint), const Offset(10, 10));
expect(tester.getBottomRight(testBreakpoint), const Offset(390, 400));
expect(tester.getTopLeft(secondaryTestBreakpoint), const Offset(10, 400));
expect(
tester.getBottomRight(secondaryTestBreakpoint), const Offset(390, 790));
});
testWidgets('adaptive layout correct layout when rtl',
(WidgetTester tester) async {
await tester.pumpWidget(await layout(
width: 400, tester: tester, directionality: TextDirection.rtl));
await tester.pumpAndSettle();
expect(tester.getTopLeft(topNavigation), Offset.zero);
expect(tester.getTopLeft(secondaryNavigation), const Offset(0, 10));
expect(tester.getTopLeft(primaryNavigation), const Offset(390, 10));
expect(tester.getTopLeft(bottomNavigation), const Offset(0, 790));
expect(tester.getTopLeft(testBreakpoint), const Offset(200, 10));
expect(tester.getBottomRight(testBreakpoint), const Offset(390, 790));
expect(tester.getTopLeft(secondaryTestBreakpoint), const Offset(10, 10));
expect(
tester.getBottomRight(secondaryTestBreakpoint), const Offset(200, 790));
});
testWidgets('adaptive layout correct layout when body ratio not default',
(WidgetTester tester) async {
await tester
.pumpWidget(await layout(width: 400, tester: tester, bodyRatio: 1 / 3));
await tester.pumpAndSettle();
expect(tester.getTopLeft(topNavigation), Offset.zero);
expect(tester.getTopLeft(secondaryNavigation), const Offset(390, 10));
expect(tester.getTopLeft(primaryNavigation), const Offset(0, 10));
expect(tester.getTopLeft(bottomNavigation), const Offset(0, 790));
expect(tester.getTopLeft(testBreakpoint), const Offset(10, 10));
expect(tester.getBottomRight(testBreakpoint),
offsetMoreOrLessEquals(const Offset(136.7, 790), epsilon: 1.0));
expect(tester.getTopLeft(secondaryTestBreakpoint),
offsetMoreOrLessEquals(const Offset(136.7, 10), epsilon: 1.0));
expect(
tester.getBottomRight(secondaryTestBreakpoint), const Offset(390, 790));
});
final Finder begin = find.byKey(const Key('0'));
final Finder end = find.byKey(const Key('400'));
Finder slideIn(String key) => find.byKey(Key('in-${Key(key)}'));
Finder slideOut(String key) => find.byKey(Key('out-${Key(key)}'));
testWidgets(
'slot layout properly switches between items with the appropriate animation',
(WidgetTester tester) async {
await tester.pumpWidget(slot(300));
expect(begin, findsOneWidget);
expect(end, findsNothing);
await tester.pumpWidget(slot(500));
await tester.pump();
await tester.pump(const Duration(milliseconds: 500));
expect(tester.widget<SlideTransition>(slideOut('0')).position.value,
const Offset(-0.5, 0));
expect(tester.widget<SlideTransition>(slideIn('400')).position.value,
const Offset(-0.5, 0));
await tester.pump();
await tester.pump(const Duration(milliseconds: 500));
expect(tester.widget<SlideTransition>(slideOut('0')).position.value,
const Offset(-1.0, 0));
expect(tester.widget<SlideTransition>(slideIn('400')).position.value,
Offset.zero);
await tester.pumpAndSettle();
expect(begin, findsNothing);
expect(end, findsOneWidget);
});
testWidgets('AnimatedSwitcher does not spawn duplicate keys on rapid resize',
(WidgetTester tester) async {
// Populate the smaller slot layout and let the animation settle.
await tester.pumpWidget(slot(300));
await tester.pumpAndSettle();
expect(begin, findsOneWidget);
expect(end, findsNothing);
// Jumping back between two layouts before allowing an animation to complete.
// Produces a chain of widgets in AnimatedSwitcher that includes duplicate
// widgets with the same global key.
for (int i = 0; i < 2; i++) {
// Resize between the two slot layouts, but do not pump the animation
// until completion.
await tester.pumpWidget(slot(500));
await tester.pump(const Duration(milliseconds: 100));
expect(begin, findsOneWidget);
expect(end, findsOneWidget);
await tester.pumpWidget(slot(300));
await tester.pump(const Duration(milliseconds: 100));
expect(begin, findsOneWidget);
expect(end, findsOneWidget);
}
});
testWidgets('slot layout can tolerate rapid changes in breakpoints',
(WidgetTester tester) async {
await tester.pumpWidget(slot(300));
expect(begin, findsOneWidget);
expect(end, findsNothing);
await tester.pumpWidget(slot(500));
await tester.pump();
await tester.pump(const Duration(milliseconds: 100));
expect(tester.widget<SlideTransition>(slideOut('0')).position.value,
offsetMoreOrLessEquals(const Offset(-0.1, 0), epsilon: 0.05));
expect(tester.widget<SlideTransition>(slideIn('400')).position.value,
offsetMoreOrLessEquals(const Offset(-0.9, 0), epsilon: 0.05));
await tester.pumpWidget(slot(300));
await tester.pumpAndSettle();
expect(begin, findsOneWidget);
expect(end, findsNothing);
});
// This test reflects the behavior of the internal animations of both the body
// and secondary body and also the navigational items. This is reflected in
// the changes in LTRB offsets from all sides instead of just LR for the body
// animations.
testWidgets('adaptive layout handles internal animations correctly',
(WidgetTester tester) async {
final Finder testBreakpoint = find.byKey(const Key('Test Breakpoint'));
final Finder secondaryTestBreakpoint =
find.byKey(const Key('Secondary Test Breakpoint'));
await tester.pumpWidget(await layout(width: 400, tester: tester));
await tester.pump();
await tester.pump(const Duration(milliseconds: 100));
expect(tester.getTopLeft(testBreakpoint), const Offset(1, 1));
expect(tester.getBottomRight(testBreakpoint),
offsetMoreOrLessEquals(const Offset(395.8, 799), epsilon: 1.0));
expect(tester.getTopLeft(secondaryTestBreakpoint),
offsetMoreOrLessEquals(const Offset(395.8, 1.0), epsilon: 1.0));
expect(tester.getBottomRight(secondaryTestBreakpoint),
offsetMoreOrLessEquals(const Offset(594.8, 799.0), epsilon: 1.0));
await tester.pump();
await tester.pump(const Duration(milliseconds: 400));
expect(tester.getTopLeft(testBreakpoint), const Offset(5, 5));
expect(tester.getBottomRight(testBreakpoint),
offsetMoreOrLessEquals(const Offset(294.2, 795), epsilon: 1.0));
expect(tester.getTopLeft(secondaryTestBreakpoint),
offsetMoreOrLessEquals(const Offset(294.2, 5.0), epsilon: 1.0));
expect(tester.getBottomRight(secondaryTestBreakpoint),
offsetMoreOrLessEquals(const Offset(489.2, 795.0), epsilon: 1.0));
await tester.pump();
await tester.pump(const Duration(milliseconds: 400));
expect(tester.getTopLeft(testBreakpoint), const Offset(9, 9));
expect(tester.getBottomRight(testBreakpoint),
offsetMoreOrLessEquals(const Offset(201.7, 791), epsilon: 1.0));
expect(tester.getTopLeft(secondaryTestBreakpoint),
offsetMoreOrLessEquals(const Offset(201.7, 9.0), epsilon: 1.0));
expect(tester.getBottomRight(secondaryTestBreakpoint),
offsetMoreOrLessEquals(const Offset(392.7, 791), epsilon: 1.0));
await tester.pump();
await tester.pump(const Duration(milliseconds: 100));
expect(tester.getTopLeft(testBreakpoint), const Offset(10, 10));
expect(tester.getBottomRight(testBreakpoint), const Offset(200, 790));
expect(tester.getTopLeft(secondaryTestBreakpoint), const Offset(200, 10));
expect(
tester.getBottomRight(secondaryTestBreakpoint), const Offset(390, 790));
});
testWidgets('adaptive layout does not animate when animations off',
(WidgetTester tester) async {
final Finder testBreakpoint = find.byKey(const Key('Test Breakpoint'));
final Finder secondaryTestBreakpoint =
find.byKey(const Key('Secondary Test Breakpoint'));
await tester.pumpWidget(
await layout(width: 400, tester: tester, animations: false));
await tester.pump();
await tester.pump(const Duration(milliseconds: 100));
expect(tester.getTopLeft(testBreakpoint), const Offset(10, 10));
expect(tester.getBottomRight(testBreakpoint), const Offset(200, 790));
expect(tester.getTopLeft(secondaryTestBreakpoint), const Offset(200, 10));
expect(
tester.getBottomRight(secondaryTestBreakpoint), const Offset(390, 790));
});
}
class TestBreakpoint0 extends Breakpoint {
@override
bool isActive(BuildContext context) {
return MediaQuery.of(context).size.width >= 0;
}
}
class TestBreakpoint400 extends Breakpoint {
@override
bool isActive(BuildContext context) {
return MediaQuery.of(context).size.width > 400;
}
}
class TestBreakpoint800 extends Breakpoint {
@override
bool isActive(BuildContext context) {
return MediaQuery.of(context).size.width > 800;
}
}
final Finder topNavigation = find.byKey(const Key('Top Navigation'));
final Finder secondaryNavigation =
find.byKey(const Key('Secondary Navigation Small'));
final Finder primaryNavigation =
find.byKey(const Key('Primary Navigation Small'));
final Finder bottomNavigation =
find.byKey(const Key('Bottom Navigation Small'));
final Finder testBreakpoint = find.byKey(const Key('Test Breakpoint'));
final Finder secondaryTestBreakpoint =
find.byKey(const Key('Secondary Test Breakpoint'));
Widget on(BuildContext _) {
return const SizedBox(width: 10, height: 10);
}
Future<MediaQuery> layout({
required double width,
required WidgetTester tester,
Axis orientation = Axis.horizontal,
TextDirection directionality = TextDirection.ltr,
double? bodyRatio,
bool animations = true,
}) async {
await tester.binding.setSurfaceSize(Size(width, 800));
return MediaQuery(
data: MediaQueryData(size: Size(width, 800)),
child: Directionality(
textDirection: directionality,
child: AdaptiveLayout(
bodyOrientation: orientation,
bodyRatio: bodyRatio,
internalAnimations: animations,
primaryNavigation: SlotLayout(
config: <Breakpoint, SlotLayoutConfig>{
TestBreakpoint0(): SlotLayout.from(
key: const Key('Primary Navigation Small'), builder: on),
TestBreakpoint400(): SlotLayout.from(
key: const Key('Primary Navigation Medium'), builder: on),
TestBreakpoint800(): SlotLayout.from(
key: const Key('Primary Navigation Large'), builder: on),
},
),
secondaryNavigation: SlotLayout(
config: <Breakpoint, SlotLayoutConfig>{
TestBreakpoint0(): SlotLayout.from(
key: const Key('Secondary Navigation Small'), builder: on),
TestBreakpoint400(): SlotLayout.from(
key: const Key('Secondary Navigation Medium'), builder: on),
TestBreakpoint800(): SlotLayout.from(
key: const Key('Secondary Navigation Large'), builder: on),
},
),
topNavigation: SlotLayout(
config: <Breakpoint, SlotLayoutConfig>{
TestBreakpoint0():
SlotLayout.from(key: const Key('Top Navigation'), builder: on),
TestBreakpoint400():
SlotLayout.from(key: const Key('Top Navigation1'), builder: on),
TestBreakpoint800():
SlotLayout.from(key: const Key('Top Navigation2'), builder: on),
},
),
bottomNavigation: SlotLayout(
config: <Breakpoint, SlotLayoutConfig>{
TestBreakpoint0(): SlotLayout.from(
key: const Key('Bottom Navigation Small'), builder: on),
TestBreakpoint400():
SlotLayout.from(key: const Key('bnav1'), builder: on),
TestBreakpoint800():
SlotLayout.from(key: const Key('bnav2'), builder: on),
},
),
body: SlotLayout(
config: <Breakpoint, SlotLayoutConfig>{
TestBreakpoint0(): SlotLayout.from(
key: const Key('Test Breakpoint'),
builder: (_) => Container(color: Colors.red),
),
TestBreakpoint400(): SlotLayout.from(
key: const Key('Test Breakpoint 1'),
builder: (_) => Container(color: Colors.red),
),
TestBreakpoint800(): SlotLayout.from(
key: const Key('Test Breakpoint 2'),
builder: (_) => Container(color: Colors.red),
),
},
),
secondaryBody: SlotLayout(
config: <Breakpoint, SlotLayoutConfig>{
TestBreakpoint0(): SlotLayout.from(
key: const Key('Secondary Test Breakpoint'),
builder: (_) => Container(color: Colors.blue),
),
TestBreakpoint400(): SlotLayout.from(
key: const Key('Secondary Test Breakpoint 1'),
builder: (_) => Container(color: Colors.blue),
),
TestBreakpoint800(): SlotLayout.from(
key: const Key('Secondary Test Breakpoint 2'),
builder: (_) => Container(color: Colors.blue),
),
},
),
),
),
);
}
AnimatedWidget leftOutIn(Widget child, Animation<double> animation) {
return SlideTransition(
key: Key('in-${child.key}'),
position: Tween<Offset>(
begin: const Offset(-1, 0),
end: Offset.zero,
).animate(animation),
child: child,
);
}
AnimatedWidget leftInOut(Widget child, Animation<double> animation) {
return SlideTransition(
key: Key('out-${child.key}'),
position: Tween<Offset>(
begin: Offset.zero,
end: const Offset(-1, 0),
).animate(animation),
child: child,
);
}
MediaQuery slot(double width) {
return MediaQuery(
// TODO(stuartmorgan): Replace with .fromView once this package requires
// Flutter 3.8+.
// ignore: deprecated_member_use
data: MediaQueryData.fromWindow(WidgetsBinding.instance.window)
.copyWith(size: Size(width, 800)),
child: Directionality(
textDirection: TextDirection.ltr,
child: SlotLayout(
config: <Breakpoint, SlotLayoutConfig>{
TestBreakpoint0(): SlotLayout.from(
inAnimation: leftOutIn,
outAnimation: leftInOut,
key: const Key('0'),
builder: (_) => const SizedBox(width: 10, height: 10),
),
TestBreakpoint400(): SlotLayout.from(
inAnimation: leftOutIn,
outAnimation: leftInOut,
key: const Key('400'),
builder: (_) => const SizedBox(width: 10, height: 10),
),
},
),
),
);
}