Skip to content

Commit

Permalink
[flutter_adaptive_scaffold] use MediaQuery.sizeOf instead of `Media…
Browse files Browse the repository at this point in the history
…Query.of` to prevent unnecessary rebuilds (#6544)

the `isActive` method uses `MediaQuery.of(context).size.width`, which triggers widget rebuilds whenever a property of `MediaQuery` changes, even when the size.width doesn't change.

instead, we should be using `MediaQuery.sizeOf(context).width`.  

fixes: flutter/flutter#146801
  • Loading branch information
waleedf112 committed Apr 30, 2024
1 parent af6fae4 commit ebd138d
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 5 deletions.
4 changes: 4 additions & 0 deletions packages/flutter_adaptive_scaffold/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## 0.1.10+2

* Reduce rebuilds when invoking `isActive` method.

## 0.1.10+1

* Removes a broken design document link from the README.
Expand Down
4 changes: 2 additions & 2 deletions packages/flutter_adaptive_scaffold/lib/src/breakpoints.dart
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ class WidthPlatformBreakpoint extends Breakpoint {

// Null boundaries are unbounded, assign the max/min of their associated
// direction on a number line.
final double width = MediaQuery.of(context).size.width;
final double width = MediaQuery.sizeOf(context).width;
final double lowerBound = begin ?? double.negativeInfinity;
final double upperBound = end ?? double.infinity;

Expand Down Expand Up @@ -126,6 +126,6 @@ abstract class Breakpoint {
const Breakpoint();

/// A method that returns true based on conditions related to the context of
/// the screen such as MediaQuery.of(context).size.width.
/// the screen such as MediaQuery.sizeOf(context).width.
bool isActive(BuildContext context);
}
2 changes: 1 addition & 1 deletion packages/flutter_adaptive_scaffold/pubspec.yaml
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.1.10+1
version: 0.1.10+2
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
42 changes: 40 additions & 2 deletions packages/flutter_adaptive_scaffold/test/breakpoint_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/material.dart';
import 'package:flutter_adaptive_scaffold/src/breakpoints.dart';
import 'package:flutter_test/flutter_test.dart';
import 'simulated_layout.dart';

Expand Down Expand Up @@ -51,4 +51,42 @@ void main() {
expect(find.byKey(const Key('Breakpoints.largeDesktop')), findsOneWidget);
expect(find.byKey(const Key('Breakpoints.largeMobile')), findsNothing);
}, variant: TargetPlatformVariant.desktop());

testWidgets('Breakpoint.isActive should not trigger unnecessary rebuilds',
(WidgetTester tester) async {
await tester.pumpWidget(const DymmyWidget());
expect(find.byKey(const Key('button')), findsOneWidget);

// First build.
expect(DymmyWidget.built, isTrue);

// Invoke `isActive` method.
await tester.tap(find.byKey(const Key('button')));
DymmyWidget.built = false;

// Should not rebuild after modifying any property in `MediaQuery`.
tester.platformDispatcher.textScaleFactorTestValue = 2;
await tester.pumpAndSettle();
expect(DymmyWidget.built, isFalse);
});
}

class DymmyWidget extends StatelessWidget {
const DymmyWidget({super.key});

static bool built = false;
@override
Widget build(BuildContext context) {
built = true;
return Directionality(
textDirection: TextDirection.ltr,
child: ElevatedButton(
key: const Key('button'),
onPressed: () {
Breakpoints.small.isActive(context);
},
child: const SizedBox(),
),
);
}
}

0 comments on commit ebd138d

Please sign in to comment.