diff --git a/CHANGELOG.md b/CHANGELOG.md index bff7e2a..d8bb328 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## 0.8.8 + + - Make `ScreenBreakpoints.normal` mandatory (small/normal/large) and improve device detection (watch/phone/tablet/desktop). + ## 0.8.7 - Similar to 0.8.6 with changes to the `README.md`. diff --git a/README.md b/README.md index d639f19..871a6b2 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ It aims to provide you with widgets that make it easy to build different UI's al Add responsive_builder as dependency to your pubspec file. ``` -responsive_builder2: ^0.8.7 +responsive_builder2: ^0.8.8 ``` ## Usage @@ -167,9 +167,9 @@ import 'package:responsive_builder2/responsive_builder2.dart'; //ScreenTypeLayout with custom breakpoints supplied ScreenTypeLayout( breakpoints: ScreenBreakpoints( - tablet: 600, - desktop: 950, - watch: 300 + small: 300, + normal: 600, + large: 950, ), mobile: Container(color:Colors.blue), tablet: Container(color: Colors.yellow), @@ -187,7 +187,7 @@ If you want to set the breakpoints for the responsive builders once you can call ```dart void main() { ResponsiveSizingConfig.instance.setCustomBreakpoints( - ScreenBreakpoints(large: 550, small: 200), + ScreenBreakpoints(small: 200, normal: 550, large: 1000), ); runApp(MyApp()); } diff --git a/example/ios/Flutter/ephemeral/flutter_lldb_helper.py b/example/ios/Flutter/ephemeral/flutter_lldb_helper.py new file mode 100644 index 0000000..a88caf9 --- /dev/null +++ b/example/ios/Flutter/ephemeral/flutter_lldb_helper.py @@ -0,0 +1,32 @@ +# +# Generated file, do not edit. +# + +import lldb + +def handle_new_rx_page(frame: lldb.SBFrame, bp_loc, extra_args, intern_dict): + """Intercept NOTIFY_DEBUGGER_ABOUT_RX_PAGES and touch the pages.""" + base = frame.register["x0"].GetValueAsAddress() + page_len = frame.register["x1"].GetValueAsUnsigned() + + # Note: NOTIFY_DEBUGGER_ABOUT_RX_PAGES will check contents of the + # first page to see if handled it correctly. This makes diagnosing + # misconfiguration (e.g. missing breakpoint) easier. + data = bytearray(page_len) + data[0:8] = b'IHELPED!' + + error = lldb.SBError() + frame.GetThread().GetProcess().WriteMemory(base, data, error) + if not error.Success(): + print(f'Failed to write into {base}[+{page_len}]', error) + return + +def __lldb_init_module(debugger: lldb.SBDebugger, _): + target = debugger.GetDummyTarget() + # Caveat: must use BreakpointCreateByRegEx here and not + # BreakpointCreateByName. For some reasons callback function does not + # get carried over from dummy target for the later. + bp = target.BreakpointCreateByRegex("^NOTIFY_DEBUGGER_ABOUT_RX_PAGES$") + bp.SetScriptCallbackFunction('{}.handle_new_rx_page'.format(__name__)) + bp.SetAutoContinue(True) + print("-- LLDB integration loaded --") diff --git a/example/ios/Flutter/ephemeral/flutter_lldbinit b/example/ios/Flutter/ephemeral/flutter_lldbinit new file mode 100644 index 0000000..e3ba6fb --- /dev/null +++ b/example/ios/Flutter/ephemeral/flutter_lldbinit @@ -0,0 +1,5 @@ +# +# Generated file, do not edit. +# + +command script import --relative-to-command-file flutter_lldb_helper.py diff --git a/example/lib/views/home/home_view.dart b/example/lib/views/home/home_view.dart index 644ec02..10f47b1 100644 --- a/example/lib/views/home/home_view.dart +++ b/example/lib/views/home/home_view.dart @@ -10,7 +10,7 @@ class HomeView extends StatelessWidget { @override Widget build(BuildContext context) { return ScreenTypeLayout.builder2( - breakpoints: ScreenBreakpoints(large: 650, small: 250), + breakpoints: ScreenBreakpoints(small: 250, normal: 500, large: 650), desktop: (_, __) => HomeViewDesktop(), phone: (_, __) => OrientationLayoutBuilder( portrait: (context) => HomeMobileView(isPortrait: true), diff --git a/lib/src/helpers/helpers.dart b/lib/src/helpers/helpers.dart index c9df8cc..25b71fd 100644 --- a/lib/src/helpers/helpers.dart +++ b/lib/src/helpers/helpers.dart @@ -5,7 +5,8 @@ import 'package:flutter/widgets.dart'; import 'package:responsive_builder2/responsive_builder2.dart'; import 'package:universal_platform/universal_platform.dart'; -import 'device_width.dart' as width; +import 'device_width.dart' if (dart.library.js_interop) 'device_width_web.dart' + as width; /// Determines if the current platform is web or desktop (WASM compatible) final _isWebOrDesktop = kIsWeb || @@ -30,15 +31,23 @@ DeviceScreenType getDeviceType(Size size, isWebOrDesktop = isWebOrDesktop ??= _isWebOrDesktop; double deviceWidth = width.deviceWidth(size, isWebOrDesktop); - // Replaces the defaults with the user defined definitions + // Use provided breakpoint with middle (normal) threshold if (breakpoint != null) { - if (deviceWidth > breakpoint.large) { + // Desktop or Tablet for very large widths + if (deviceWidth >= breakpoint.large) { return _desktopOrTablet(isWebOrDesktop); } + // Watch for very small widths if (deviceWidth < breakpoint.small) { return DeviceScreenType.watch; } + + // Classify phone/tablet using normal + if (deviceWidth < breakpoint.normal) { + return DeviceScreenType.phone; + } + return DeviceScreenType.tablet; } if (deviceWidth >= ResponsiveSizingConfig.instance.breakpoints.large) { @@ -49,7 +58,12 @@ DeviceScreenType getDeviceType(Size size, return DeviceScreenType.watch; } - return DeviceScreenType.phone; + // Use global normal threshold + final globalNormal = ResponsiveSizingConfig.instance.breakpoints.normal; + if (deviceWidth < globalNormal) { + return DeviceScreenType.phone; + } + return DeviceScreenType.tablet; } /// Helper function to determine if a large screen should be treated as desktop @@ -98,6 +112,9 @@ RefinedSize getRefinedSize( if (deviceWidth >= refinedBreakpoint.desktopNormal) { return RefinedSize.normal; } + + // Below desktopNormal threshold + return RefinedSize.small; } if (deviceScreenType == DeviceScreenType.tablet) { @@ -112,6 +129,9 @@ RefinedSize getRefinedSize( if (deviceWidth >= refinedBreakpoint.tabletNormal) { return RefinedSize.normal; } + + // Below tabletNormal threshold + return RefinedSize.small; } if (deviceScreenType == DeviceScreenType.phone) { @@ -126,6 +146,9 @@ RefinedSize getRefinedSize( if (deviceWidth >= refinedBreakpoint.mobileNormal) { return RefinedSize.normal; } + + // Below mobileNormal threshold + return RefinedSize.small; } if (deviceScreenType == DeviceScreenType.watch) { diff --git a/lib/src/responsive_sizing_config.dart b/lib/src/responsive_sizing_config.dart index fddce84..9d37e31 100644 --- a/lib/src/responsive_sizing_config.dart +++ b/lib/src/responsive_sizing_config.dart @@ -45,8 +45,9 @@ class ResponsiveSizingConfig { /// * [small]: 300 logical pixels - devices below this width are considered /// mobile static const ScreenBreakpoints _defaultBreakPoints = ScreenBreakpoints( - large: 600, small: 300, + normal: 600, + large: 950, ); /// Custom breakpoints that override the defaults when set. diff --git a/lib/src/sizing_information.dart b/lib/src/sizing_information.dart index 6220bc8..833d9d3 100644 --- a/lib/src/sizing_information.dart +++ b/lib/src/sizing_information.dart @@ -75,27 +75,44 @@ class SizingInformation { /// Manually define screen resolution breakpoints for device type detection. /// /// This class allows you to override the default breakpoints used to determine -/// whether a device should be considered small (mobile) or large -/// (tablet/desktop). The breakpoints are defined in logical pixels. +/// whether a device should be considered a watch, phone, tablet, or desktop. +/// The breakpoints are defined in logical pixels. +/// +/// Behavior with three-tier classification when [normal] is provided: +/// - width < [small] => watch +/// - [small] <= width < [normal] => phone +/// - [normal] <= width < [large] => tablet +/// - width >= [large] => desktop or tablet (based on platform) +/// +/// If [normal] is null, legacy two-tier behavior is used: +/// - width < [small] => watch +/// - [small] <= width < [large] => phone +/// - width >= [large] => desktop or tablet (based on platform) class ScreenBreakpoints { - /// The breakpoint below which a device is considered small (mobile) + /// The breakpoint below which a device is considered a watch final double small; + /// The breakpoint between phone and tablet. + /// + /// Values greater than or equal to [normal] and less than [large] + /// will be considered tablet. + final double normal; + /// The breakpoint above which a device is considered large (tablet/desktop) final double large; /// Creates a new [ScreenBreakpoints] instance. /// - /// Both [small] and [large] parameters are required and should be specified - /// in logical pixels. + /// [small], [normal] and [large] are required and should be specified in logical pixels. const ScreenBreakpoints({ required this.small, + required this.normal, required this.large, }); @override String toString() { - return "Large: $large, Small: $small"; + return "Large: $large, Normal: $normal, Small: $small"; } } diff --git a/pubspec.yaml b/pubspec.yaml index d0ab47d..7995a56 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: responsive_builder2 description: A set of widgets that can be used to define a readable responsive UI for widgets. -version: 0.8.7 +version: 0.8.8 homepage: https://github.com/Corkscrews/responsive_builder funding: diff --git a/test/helpers/helpers_test.dart b/test/helpers/helpers_test.dart index a574a8d..4679323 100644 --- a/test/helpers/helpers_test.dart +++ b/test/helpers/helpers_test.dart @@ -35,7 +35,7 @@ void main() { test( 'given break point with desktop at 1200 and width at 1201 should return desktop', () { - final breakPoint = ScreenBreakpoints(large: 550, small: 300); + final breakPoint = ScreenBreakpoints(small: 300, normal: 550, large: 1200); final screenType = getDeviceType(Size(1201, 1400), breakPoint); expect(screenType, DeviceScreenType.desktop); }); @@ -43,7 +43,7 @@ void main() { test( 'given break point with tablet at 550 and width at 1199 should return tablet', () { - final breakPoint = ScreenBreakpoints(large: 550, small: 300); + final breakPoint = ScreenBreakpoints(small: 300, normal: 550, large: 1200); final screenType = getDeviceType(Size(1199, 1400), breakPoint, false); expect(screenType, DeviceScreenType.tablet); }); @@ -51,7 +51,7 @@ void main() { test( 'given break point with watch at 150 and width at 149 should return watch', () { - final breakPoint = ScreenBreakpoints(large: 550, small: 150); + final breakPoint = ScreenBreakpoints(small: 150, normal: 550, large: 1200); final screenType = getDeviceType(Size(149, 340), breakPoint); expect(screenType, DeviceScreenType.watch); }); @@ -59,7 +59,7 @@ void main() { test( 'given break point with desktop 1200, tablet 550, should return mobile if width is under 550 above 150', () { - final breakPoint = ScreenBreakpoints(large: 550, small: 150); + final breakPoint = ScreenBreakpoints(small: 150, normal: 550, large: 1200); final screenType = getDeviceType(Size(549, 800), breakPoint); // ignore: deprecated_member_use_from_same_package expect(screenType.ordinal, DeviceScreenType.mobile.ordinal); @@ -72,7 +72,7 @@ void main() { 'When global config desktop set to 800, should return desktop when width is 801', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 550, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 800)); final screenType = getDeviceType(Size(801, 1000)); expect(screenType, DeviceScreenType.desktop); @@ -81,7 +81,7 @@ void main() { 'When global config tablet set to 550, should return tablet when width is 799', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 550, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 550, large: 1000)); final screenType = getDeviceType(Size(799, 1000), null, false); expect(screenType, DeviceScreenType.tablet); @@ -90,7 +90,7 @@ void main() { 'When global config tablet set to 550, should return mobile when width is 799', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 550, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 550, large: 1000)); final screenType = getDeviceType(Size(799, 1000), null, false); expect(screenType, DeviceScreenType.tablet); @@ -100,7 +100,7 @@ void main() { 'When global config watch set to 200, should return watch when width is 199', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 550, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 550, large: 1000)); final screenType = getDeviceType(Size(799, 1000), null, false); expect(screenType, DeviceScreenType.tablet); @@ -113,8 +113,8 @@ void main() { 'When global config desktop set to 1000, should return desktop when custom breakpoint desktop is 800 and width is 801', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); - final breakPoint = ScreenBreakpoints(large: 750, small: 200); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); + final breakPoint = ScreenBreakpoints(small: 200, normal: 500, large: 750); final screenType = getDeviceType(Size(801, 1000), breakPoint); expect(screenType, DeviceScreenType.desktop); }); @@ -122,8 +122,8 @@ void main() { 'When global config tablet set to 600, should return tablet when custom breakpoint tablet is 800 and width is 801', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); - final breakPoint = ScreenBreakpoints(large: 800, small: 200); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); + final breakPoint = ScreenBreakpoints(small: 200, normal: 800, large: 1200); final screenType = getDeviceType(Size(801, 1000), breakPoint, false); expect(screenType, DeviceScreenType.tablet); }); @@ -131,8 +131,8 @@ void main() { 'When global config is set tablet 600, desktop 800, should return mobile if custom breakpoint has range of 200, 300 and width is 201', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); - final breakPoint = ScreenBreakpoints(large: 300, small: 200); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); + final breakPoint = ScreenBreakpoints(small: 200, normal: 250, large: 300); final screenType = getDeviceType(Size(201, 500), breakPoint); // ignore: deprecated_member_use_from_same_package expect(screenType.ordinal, DeviceScreenType.mobile.ordinal); @@ -142,8 +142,8 @@ void main() { 'When global config watch set to 200, should return watch if custom breakpoint watch is 400 and width is 399', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); - final breakPoint = ScreenBreakpoints(large: 800, small: 400); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); + final breakPoint = ScreenBreakpoints(small: 400, normal: 700, large: 800); final screenType = getDeviceType(Size(399, 1000), breakPoint); expect(screenType, DeviceScreenType.watch); }); @@ -154,7 +154,7 @@ void main() { 'When called with mobile size in small range, should return RefinedSize.small', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); final breakPoint = RefinedBreakpoints( mobileSmall: 300, mobileNormal: 370, @@ -173,7 +173,7 @@ void main() { 'When called with mobile size in normal range, should return RefinedSize.normal', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); final breakPoint = RefinedBreakpoints( mobileSmall: 300, mobileNormal: 370, @@ -192,7 +192,7 @@ void main() { 'When called with mobile size in large range, should return RefinedSize.large', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); final breakPoint = RefinedBreakpoints( mobileSmall: 300, mobileNormal: 370, @@ -211,7 +211,7 @@ void main() { 'When called with mobile size in extraLarge range, should return RefinedSize.extraLarge', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); final breakPoint = RefinedBreakpoints( mobileSmall: 300, mobileNormal: 370, @@ -230,7 +230,7 @@ void main() { 'When called with desktop size in small range, should return RefinedSize.small', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); final breakPoint = RefinedBreakpoints( tabletSmall: 850, tabletNormal: 900, @@ -248,7 +248,7 @@ void main() { 'When called with desktop size in normal range, should return RefinedSize.normal', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); final breakPoint = RefinedBreakpoints( tabletSmall: 850, tabletNormal: 900, @@ -266,7 +266,7 @@ void main() { 'When called with desktop size in large range, should return RefinedSize.large', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); final breakPoint = RefinedBreakpoints( tabletSmall: 850, tabletNormal: 900, @@ -284,7 +284,7 @@ void main() { 'When called with desktop size in extraLarge range, should return RefinedSize.extraLarge', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); final breakPoint = RefinedBreakpoints( tabletSmall: 850, tabletNormal: 900, diff --git a/test/helpers_test.dart b/test/helpers_test.dart index 5f5fd2f..dac4de1 100644 --- a/test/helpers_test.dart +++ b/test/helpers_test.dart @@ -33,7 +33,7 @@ void main() { test( 'given break point with desktop at 1200 and width at 1201 should return desktop', () { - final breakPoint = ScreenBreakpoints(large: 550, small: 300); + final breakPoint = ScreenBreakpoints(small: 300, normal: 550, large: 1200); final screenType = getDeviceType(Size(1201, 1400), breakPoint); expect(screenType, DeviceScreenType.desktop); }); @@ -41,7 +41,7 @@ void main() { test( 'given break point with tablet at 550 and width at 1199 should return tablet', () { - final breakPoint = ScreenBreakpoints(large: 550, small: 300); + final breakPoint = ScreenBreakpoints(small: 300, normal: 550, large: 1200); final screenType = getDeviceType(Size(1199, 1400), breakPoint, false); expect(screenType, DeviceScreenType.tablet); }); @@ -49,7 +49,7 @@ void main() { test( 'given break point with watch at 150 and width at 149 should return watch', () { - final breakPoint = ScreenBreakpoints(large: 550, small: 150); + final breakPoint = ScreenBreakpoints(small: 150, normal: 550, large: 1200); final screenType = getDeviceType(Size(149, 340), breakPoint); expect(screenType, DeviceScreenType.watch); }); @@ -57,7 +57,7 @@ void main() { test( 'given break point with desktop 1200, tablet 550, should return mobile if width is under 550 above 150', () { - final breakPoint = ScreenBreakpoints(large: 550, small: 150); + final breakPoint = ScreenBreakpoints(small: 150, normal: 550, large: 1200); final screenType = getDeviceType(Size(549, 800), breakPoint); expect(screenType, DeviceScreenType.phone); }); @@ -68,7 +68,7 @@ void main() { 'When global config desktop set to 800, should return desktop when width is 801', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 550, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 800)); final screenType = getDeviceType(Size(801, 1000)); expect(screenType, DeviceScreenType.desktop); @@ -77,7 +77,7 @@ void main() { 'When global config tablet set to 550, should return tablet when width is 799', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 550, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 550, large: 1000)); final screenType = getDeviceType(Size(799, 1000), null, false); expect(screenType, DeviceScreenType.tablet); @@ -86,7 +86,7 @@ void main() { 'When global config tablet set to 550, should return mobile when width is 799', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 550, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 550, large: 1000)); final screenType = getDeviceType(Size(799, 1000), null, false); expect(screenType, DeviceScreenType.tablet); @@ -96,7 +96,7 @@ void main() { 'When global config watch set to 200, should return watch when width is 199', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 550, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 550, large: 1000)); final screenType = getDeviceType(Size(799, 1000), null, false); expect(screenType, DeviceScreenType.tablet); @@ -109,8 +109,8 @@ void main() { 'When global config desktop set to 1000, should return desktop when custom breakpoint desktop is 800 and width is 801', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); - final breakPoint = ScreenBreakpoints(large: 750, small: 200); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); + final breakPoint = ScreenBreakpoints(small: 200, normal: 500, large: 750); final screenType = getDeviceType(Size(801, 1000), breakPoint); expect(screenType, DeviceScreenType.desktop); }); @@ -118,8 +118,8 @@ void main() { 'When global config tablet set to 600, should return tablet when custom breakpoint tablet is 800 and width is 801', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); - final breakPoint = ScreenBreakpoints(large: 800, small: 200); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); + final breakPoint = ScreenBreakpoints(small: 200, normal: 800, large: 1200); final screenType = getDeviceType(Size(801, 1000), breakPoint, false); expect(screenType, DeviceScreenType.tablet); }); @@ -127,8 +127,8 @@ void main() { 'When global config is set tablet 600, desktop 800, should return mobile if custom breakpoint has range of 200, 300 and width is 201', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); - final breakPoint = ScreenBreakpoints(large: 300, small: 200); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); + final breakPoint = ScreenBreakpoints(small: 200, normal: 250, large: 300); final screenType = getDeviceType(Size(201, 500), breakPoint); expect(screenType, DeviceScreenType.phone); }); @@ -136,8 +136,8 @@ void main() { 'When global config watch set to 200, should return watch if custom breakpoint watch is 400 and width is 399', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); - final breakPoint = ScreenBreakpoints(large: 800, small: 400); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); + final breakPoint = ScreenBreakpoints(small: 400, normal: 700, large: 800); final screenType = getDeviceType(Size(399, 1000), breakPoint); expect(screenType, DeviceScreenType.watch); }); @@ -148,7 +148,7 @@ void main() { 'When called with mobile size in small range, should return RefinedSize.small', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); final breakPoint = RefinedBreakpoints( mobileSmall: 300, mobileNormal: 370, @@ -167,7 +167,7 @@ void main() { 'When called with mobile size in normal range, should return RefinedSize.normal', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); final breakPoint = RefinedBreakpoints( mobileSmall: 300, mobileNormal: 370, @@ -186,7 +186,7 @@ void main() { 'When called with mobile size in large range, should return RefinedSize.large', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); final breakPoint = RefinedBreakpoints( mobileSmall: 300, mobileNormal: 370, @@ -205,7 +205,7 @@ void main() { 'When called with mobile size in extraLarge range, should return RefinedSize.extraLarge', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); final breakPoint = RefinedBreakpoints( mobileSmall: 300, mobileNormal: 370, @@ -224,7 +224,7 @@ void main() { 'When called with desktop size in small range, should return RefinedSize.small', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); final breakPoint = RefinedBreakpoints( tabletSmall: 850, tabletNormal: 900, @@ -242,7 +242,7 @@ void main() { 'When called with desktop size in normal range, should return RefinedSize.normal', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); final breakPoint = RefinedBreakpoints( tabletSmall: 850, tabletNormal: 900, @@ -260,7 +260,7 @@ void main() { 'When called with desktop size in large range, should return RefinedSize.large', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); final breakPoint = RefinedBreakpoints( tabletSmall: 850, tabletNormal: 900, @@ -278,7 +278,7 @@ void main() { 'When called with desktop size in extraLarge range, should return RefinedSize.extraLarge', () { ResponsiveSizingConfig.instance - .setCustomBreakpoints(ScreenBreakpoints(large: 600, small: 200)); + .setCustomBreakpoints(ScreenBreakpoints(small: 200, normal: 600, large: 1000)); final breakPoint = RefinedBreakpoints( tabletSmall: 850, tabletNormal: 900, diff --git a/test/responsive_sizing_config_test.dart b/test/responsive_sizing_config_test.dart index 63adfd7..3f2ef82 100644 --- a/test/responsive_sizing_config_test.dart +++ b/test/responsive_sizing_config_test.dart @@ -18,7 +18,8 @@ void main() { final config = ResponsiveSizingConfig.instance; final breakpoints = config.breakpoints; expect(breakpoints.small, 300); - expect(breakpoints.large, 600); + expect(breakpoints.large, 950); + expect(breakpoints.normal, 600); }); test('default refined breakpoints are returned if not set', () { @@ -40,7 +41,7 @@ void main() { test('setCustomBreakpoints sets custom breakpoints', () { final config = ResponsiveSizingConfig.instance; - const custom = ScreenBreakpoints(small: 111, large: 999); + const custom = ScreenBreakpoints(small: 111, normal: 555, large: 999); config.setCustomBreakpoints(custom); expect(config.breakpoints.small, 111); expect(config.breakpoints.large, 999); diff --git a/test/sizing_information_test.dart b/test/sizing_information_test.dart index fe93d6b..266e7c5 100644 --- a/test/sizing_information_test.dart +++ b/test/sizing_information_test.dart @@ -61,10 +61,12 @@ void main() { group('ScreenBreakpoints', () { test('constructor and toString', () { - const breakpoints = ScreenBreakpoints(small: 300, large: 1200); + const breakpoints = ScreenBreakpoints(small: 300, normal: 700, large: 1200); expect(breakpoints.small, 300); + expect(breakpoints.normal, 700); expect(breakpoints.large, 1200); expect(breakpoints.toString(), contains('Large: 1200')); + expect(breakpoints.toString(), contains('Normal: 700')); expect(breakpoints.toString(), contains('Small: 300')); }); });