Skip to content

[flutter_adaptive_scaffold] Fix breakpoint not being active in certain cases like foldables #7549

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Sep 4, 2024
Merged

[flutter_adaptive_scaffold] Fix breakpoint not being active in certain cases like foldables #7549

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a685295
Fix breakpoint not being active in certain cases like foldables
martijn00 Aug 30, 2024
31d8b7f
Update CHANGELOG.md
martijn00 Aug 30, 2024
63358be
Fix
martijn00 Aug 30, 2024
c6a1b9a
Changelog
martijn00 Sep 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/flutter_adaptive_scaffold/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## 0.2.5

* Fix breakpoint not being active in certain cases like foldables.

## 0.2.4

* Compare breakpoints to each other using operators.
Expand Down
9 changes: 4 additions & 5 deletions packages/flutter_adaptive_scaffold/lib/src/breakpoints.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,6 +284,7 @@ class Breakpoint {
final double width = MediaQuery.sizeOf(context).width;
final double height = MediaQuery.sizeOf(context).height;
final Orientation orientation = MediaQuery.orientationOf(context);
final bool isPortrait = orientation == Orientation.portrait;

final double lowerBoundWidth = beginWidth ?? double.negativeInfinity;
final double upperBoundWidth = endWidth ?? double.infinity;
Expand All @@ -295,11 +296,9 @@ class Breakpoint {
? width >= lowerBoundWidth
: width >= lowerBoundWidth && width < upperBoundWidth;

final bool isHeightActive = isDesktop(context) ||
orientation == Orientation.portrait ||
(orientation == Orientation.landscape && andUp
? isWidthActive || height >= lowerBoundHeight
: height >= lowerBoundHeight && height < upperBoundHeight);
final bool isHeightActive = isPortrait || isWidthActive || andUp
? isWidthActive || height >= lowerBoundHeight
: height >= lowerBoundHeight && height < upperBoundHeight;

return isWidthActive && isHeightActive && isRightPlatform;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/flutter_adaptive_scaffold/pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
name: flutter_adaptive_scaffold
description: Widgets to easily build adaptive layouts, including navigation elements.
version: 0.2.4
version: 0.2.5
issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+flutter_adaptive_scaffold%22
repository: https://github.com/flutter/packages/tree/main/packages/flutter_adaptive_scaffold

Expand Down
105 changes: 104 additions & 1 deletion packages/flutter_adaptive_scaffold/test/breakpoint_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -517,6 +517,23 @@ void main() {
await tester.pumpAndSettle();
expect(find.byKey(const Key('Breakpoints.smallMobile')), findsOneWidget);
expect(find.byKey(const Key('Breakpoints.mediumMobile')), findsNothing);
expect(find.byKey(const Key('Breakpoints.small')), findsNothing);
expect(find.byKey(const Key('Breakpoints.smallDesktop')), findsNothing);
expect(find.byKey(const Key('Breakpoints.medium')), findsNothing);
expect(find.byKey(const Key('Breakpoints.mediumDesktop')), findsNothing);
expect(find.byKey(const Key('Breakpoints.mediumLarge')), findsNothing);
expect(
find.byKey(const Key('Breakpoints.mediumLargeMobile')), findsNothing);
expect(find.byKey(const Key('Breakpoints.mediumLargeDesktop')),
findsNothing);
expect(find.byKey(const Key('Breakpoints.large')), findsNothing);
expect(find.byKey(const Key('Breakpoints.largeMobile')), findsNothing);
expect(find.byKey(const Key('Breakpoints.largeDesktop')), findsNothing);
expect(find.byKey(const Key('Breakpoints.extraLarge')), findsNothing);
expect(
find.byKey(const Key('Breakpoints.extraLargeMobile')), findsNothing);
expect(
find.byKey(const Key('Breakpoints.extraLargeDesktop')), findsNothing);
});

testWidgets(
Expand All @@ -526,7 +543,24 @@ void main() {
SimulatedLayout.smallLandscapeMediumPortrait.slot(tester));
await tester.pumpAndSettle();
expect(find.byKey(const Key('Breakpoints.smallMobile')), findsNothing);
expect(find.byKey(const Key('Breakpoints.mediumMobile')), findsNothing);
expect(find.byKey(const Key('Breakpoints.mediumMobile')), findsOneWidget);
expect(find.byKey(const Key('Breakpoints.small')), findsNothing);
expect(find.byKey(const Key('Breakpoints.smallDesktop')), findsNothing);
expect(find.byKey(const Key('Breakpoints.medium')), findsNothing);
expect(find.byKey(const Key('Breakpoints.mediumDesktop')), findsNothing);
expect(find.byKey(const Key('Breakpoints.mediumLarge')), findsNothing);
expect(
find.byKey(const Key('Breakpoints.mediumLargeMobile')), findsNothing);
expect(find.byKey(const Key('Breakpoints.mediumLargeDesktop')),
findsNothing);
expect(find.byKey(const Key('Breakpoints.large')), findsNothing);
expect(find.byKey(const Key('Breakpoints.largeMobile')), findsNothing);
expect(find.byKey(const Key('Breakpoints.largeDesktop')), findsNothing);
expect(find.byKey(const Key('Breakpoints.extraLarge')), findsNothing);
expect(
find.byKey(const Key('Breakpoints.extraLargeMobile')), findsNothing);
expect(
find.byKey(const Key('Breakpoints.extraLargeDesktop')), findsNothing);
});

testWidgets(
Expand All @@ -537,6 +571,22 @@ void main() {
await tester.pumpAndSettle();
expect(find.byKey(const Key('Breakpoints.smallMobile')), findsOneWidget);
expect(find.byKey(const Key('Breakpoints.largeMobile')), findsNothing);
expect(find.byKey(const Key('Breakpoints.small')), findsNothing);
expect(find.byKey(const Key('Breakpoints.smallDesktop')), findsNothing);
expect(find.byKey(const Key('Breakpoints.medium')), findsNothing);
expect(find.byKey(const Key('Breakpoints.mediumDesktop')), findsNothing);
expect(find.byKey(const Key('Breakpoints.mediumLarge')), findsNothing);
expect(
find.byKey(const Key('Breakpoints.mediumLargeMobile')), findsNothing);
expect(find.byKey(const Key('Breakpoints.mediumLargeDesktop')),
findsNothing);
expect(find.byKey(const Key('Breakpoints.large')), findsNothing);
expect(find.byKey(const Key('Breakpoints.largeDesktop')), findsNothing);
expect(find.byKey(const Key('Breakpoints.extraLarge')), findsNothing);
expect(
find.byKey(const Key('Breakpoints.extraLargeMobile')), findsNothing);
expect(
find.byKey(const Key('Breakpoints.extraLargeDesktop')), findsNothing);
});

testWidgets(
Expand All @@ -547,6 +597,48 @@ void main() {
await tester.pumpAndSettle();
expect(find.byKey(const Key('Breakpoints.smallMobile')), findsNothing);
expect(find.byKey(const Key('Breakpoints.largeMobile')), findsNothing);
expect(find.byKey(const Key('Breakpoints.small')), findsNothing);
expect(find.byKey(const Key('Breakpoints.smallDesktop')), findsNothing);
expect(find.byKey(const Key('Breakpoints.medium')), findsNothing);
expect(find.byKey(const Key('Breakpoints.mediumDesktop')), findsNothing);
expect(find.byKey(const Key('Breakpoints.mediumLarge')), findsNothing);
expect(find.byKey(const Key('Breakpoints.mediumLargeMobile')),
findsOneWidget);
expect(find.byKey(const Key('Breakpoints.mediumLargeDesktop')),
findsNothing);
expect(find.byKey(const Key('Breakpoints.large')), findsNothing);
expect(find.byKey(const Key('Breakpoints.largeDesktop')), findsNothing);
expect(find.byKey(const Key('Breakpoints.extraLarge')), findsNothing);
expect(
find.byKey(const Key('Breakpoints.extraLargeMobile')), findsNothing);
expect(
find.byKey(const Key('Breakpoints.extraLargeDesktop')), findsNothing);
});

testWidgets(
'Layout for mediumLargeLandscapeMediumPortrait shows correct slot configuration',
(WidgetTester tester) async {
await tester.pumpWidget(
SimulatedLayout.mediumLargeLandscapeMediumPortrait.slot(tester));
await tester.pumpAndSettle();
expect(find.byKey(const Key('Breakpoints.smallMobile')), findsNothing);
expect(find.byKey(const Key('Breakpoints.largeMobile')), findsNothing);
expect(find.byKey(const Key('Breakpoints.small')), findsNothing);
expect(find.byKey(const Key('Breakpoints.smallDesktop')), findsNothing);
expect(find.byKey(const Key('Breakpoints.medium')), findsNothing);
expect(find.byKey(const Key('Breakpoints.mediumDesktop')), findsNothing);
expect(find.byKey(const Key('Breakpoints.mediumLarge')), findsNothing);
expect(find.byKey(const Key('Breakpoints.mediumLargeMobile')),
findsOneWidget);
expect(find.byKey(const Key('Breakpoints.mediumLargeDesktop')),
findsNothing);
expect(find.byKey(const Key('Breakpoints.large')), findsNothing);
expect(find.byKey(const Key('Breakpoints.largeDesktop')), findsNothing);
expect(find.byKey(const Key('Breakpoints.extraLarge')), findsNothing);
expect(
find.byKey(const Key('Breakpoints.extraLargeMobile')), findsNothing);
expect(
find.byKey(const Key('Breakpoints.extraLargeDesktop')), findsNothing);
});
});

Expand Down Expand Up @@ -673,6 +765,17 @@ void main() {
expect(find.byKey(const Key('Breakpoints.small')), findsNothing);
expect(find.byKey(const Key('Breakpoints.mediumAndUp')), findsOneWidget);
});

testWidgets(
'slotAndUp shows correct slot for mediumLargeLandscapeMediumPortrait layout',
(WidgetTester tester) async {
// mediumLargeLandscapeMediumPortrait layout should show the mediumAndUp slot.
await tester.pumpWidget(
SimulatedLayout.mediumLargeLandscapeMediumPortrait.slotAndUp(tester));
await tester.pumpAndSettle();
expect(find.byKey(const Key('Breakpoints.small')), findsNothing);
expect(find.byKey(const Key('Breakpoints.mediumAndUp')), findsOneWidget);
});
});

// Test for `spacing`.
Expand Down
4 changes: 3 additions & 1 deletion packages/flutter_adaptive_scaffold/test/simulated_layout.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,9 @@ enum SimulatedLayout {
smallPortraitMediumLargeLandscape(
width: 360, height: 900, navSlotKey: 'bottomNavigation'),
smallLandscapeMediumLargePortrait(
width: 900, height: 360, navSlotKey: 'primaryNavigation');
width: 900, height: 360, navSlotKey: 'primaryNavigation'),
mediumLargeLandscapeMediumPortrait(
width: 841, height: 668, navSlotKey: 'primaryNavigation');

const SimulatedLayout({
required double width,
Expand Down