[flutter_adaptive_scaffold] Add expanded and extra large breakpoints

[martijn00]

This aligns the material3 specs for window sizes with the official docs: https://m3.material.io/foundations/layout/applying-layout/expanded.

This adds checks for height based breakpoints: https://developer.android.com/develop/ui/compose/layouts/adaptive/window-size-classes

I would like to rename smallBody to compactBody to align that as well but that would be a breaking change. Let me know if you want that to happen.

List which issues are fixed by this PR. You must list at least one issue.

flutter/flutter#118932

Pre-launch Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I read the Tree Hygiene page, which explains my responsibilities.
• I read and followed the relevant style guides and ran the auto-formatter. (Unlike the flutter/flutter repo, the flutter/packages repo does use dart format.)
• I signed the CLA.
• The title of the PR starts with the name of the package surrounded by square brackets, e.g. [shared_preferences]
• I linked to at least one issue that this PR fixes in the description above.
• I updated pubspec.yaml with an appropriate new version according to the pub versioning philosophy, or this PR is exempt from version changes.
• I updated CHANGELOG.md to add a description of the change, following repository CHANGELOG style, or this PR is exempt from CHANGELOG changes.
• I updated/added relevant documentation (doc comments with ///).
• I added new tests to check the change I am making, or this PR is test-exempt.
• All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

[google-cla]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[martijn00]

@gspencergoog I'm looking a bit at refactoring the breakpoints into an enhanced enum.

enum Breakpoints {
  standard(begin: -1),
  small(begin: 0, end: 600, bottom: 480),
  medium(begin: 600, end: 840, top: 480, bottom: 900),
  mediumLarge(begin: 840, end: 1200, top: 900),
  large(begin: 1200, end: 1600, top: 900),
  extraLarge(begin: 1600, top: 900);

  const Breakpoints({
    required this.begin,
    this.end,
    this.top,
    this.bottom,
    this.platform,
  });

  final double begin;
  final double? end;
  final double? top;
  final double? bottom;
  final Set<TargetPlatform>? platform;

  bool isActive(BuildContext context, {bool up = false, bool isDesktop = false, bool isMobile = false}) {
    final TargetPlatform host = Theme.of(context).platform;
    final bool isRightPlatform = platform?.contains(host) ?? true;

    final double width = MediaQuery.sizeOf(context).width;
    final double height = MediaQuery.sizeOf(context).height;
    final Orientation orientation = MediaQuery.orientationOf(context);

    final double lowerBoundWidth = begin;
    final double upperBoundWidth = end ?? double.infinity;

    final double lowerBoundHeight = top ?? double.negativeInfinity;
    final double upperBoundHeight = bottom ?? double.infinity;

    final bool isWidthActive = up ? width >= lowerBoundWidth : width >= lowerBoundWidth && width < upperBoundWidth;

    final bool isHeightActive = (orientation == Orientation.landscape &&
            height >= lowerBoundHeight &&
            height < upperBoundHeight) ||
        orientation == Orientation.portrait;

    bool isPlatformActive = true;
    if (isDesktop) {
      isPlatformActive = _desktop.contains(host);
    } else if (isMobile) {
      isPlatformActive = _mobile.contains(host);
    }

    return isWidthActive && isHeightActive && isRightPlatform && isPlatformActive;
  }
}

This would enable users to better check on the enum. What do you think about that?

[gspencergoog]

I'm looking a bit at refactoring the breakpoints into an enhanced enum.

Ooh, I like that better. You'd be renaming the begin/end/top/bottom parts to be beginWidth/endWidth/beginHeight/endHeight, though, right?

[gspencergoog]

Since we're still pre-1.0 here, no need to bump to 1.0, but since you're making breaking changes, you might want to bump to 0.2.0 and note the breaking changes in the CHANGELOG.

[martijn00]

If that's the case, it would be great to make some more breaking changes hehe. I have some more ideas for bigger changes to align with Material specs. I would like to land those in smaller pieces in new PRs otherwise it would all just get one massive PR.

[gspencergoog]

Sure, we can take a look at those, but let's not put them in this PR. Best to keep the breaking changes in separate PRs so they can be more easily reverted if needed.

I didn't mean to suggest a field day for breaking changes. Let's still consider them on their merits before breaking people, even if it's a pre-1.0 package. But if they're worth it, by all means!

[martijn00]

I'm looking a bit at refactoring the breakpoints into an enhanced enum.

Ooh, I like that better. You'd be renaming the begin/end/top/bottom parts to be beginWidth/endWidth/beginHeight/endHeight, though, right?

@gspencergoog i've got this now.

enum Breakpoint {
  /// This is a standard breakpoint that can be used as a fallthrough in the
  /// case that no other breakpoint is active.
  ///
  /// It is active from a width of -1 dp to infinity.
  standard(beginWidth: -1),

  /// A window whose width is less than 600 dp, greater than 0 dp and
  /// whose height is less than 480 dp.
  small(beginWidth: 0, endWidth: 600, endHeight: 480),

  /// A window whose width is less than 840 dp, greater than 600 dp and
  /// whose height is less than 900 dp.
  medium(beginWidth: 600, endWidth: 840, beginHeight: 480, endHeight: 900),

  /// A window whose width is less than 1200 dp, greater than 840 dp and
  /// whose height is more than 900 dp.
  mediumLarge(beginWidth: 840, endWidth: 1200, beginHeight: 900),

  /// A window whose width is less than 1600 dp, greater than 1200 dp and
  /// whose height is more than 900 dp.
  large(beginWidth: 1200, endWidth: 1600, beginHeight: 900),

  /// A window whose width is greater than 1600 dp and whose height is more
  /// than 900 dp.
  extraLarge(beginWidth: 1600, beginHeight: 900);

  const Breakpoint({
    this.beginWidth,
    this.endWidth,
    this.beginHeight,
    this.endHeight,
  });

  /// The beginning width dp value. If left null then the [Breakpoint] will have
  /// no lower bound.
  final double? beginWidth;

  /// The end width dp value. If left null then the [Breakpoint] will have no
  /// upper bound.
  final double? endWidth;

  /// The beginning height dp value. If left null then the [Breakpoint] will have
  /// no lower bound.
  final double? beginHeight;

  /// The end height dp value. If left null then the [Breakpoint] will have no
  /// upper bound.
  final double? endHeight;

  /// Returns true if the [Breakpoint] is active based on the conditions of the
  /// [BuildContext].
  bool isActive(
    BuildContext context, {
    bool andUp = false,
    Set<TargetPlatform>? targetPlatform,
  }) {
    final TargetPlatform host = Theme.of(context).platform;
    final bool isRightPlatform = targetPlatform?.contains(host) ?? true;

    final double width = MediaQuery.sizeOf(context).width;
    final double height = MediaQuery.sizeOf(context).height;
    final Orientation orientation = MediaQuery.orientationOf(context);

    final double lowerBoundWidth = beginWidth ?? double.negativeInfinity;
    final double upperBoundWidth = endWidth ?? double.infinity;

    final double lowerBoundHeight = beginHeight ?? double.negativeInfinity;
    final double upperBoundHeight = endHeight ?? double.infinity;

    final bool isWidthActive = andUp
        ? width >= lowerBoundWidth
        : width >= lowerBoundWidth && width < upperBoundWidth;

    final bool isHeightActive = (orientation == Orientation.landscape &&
            height >= lowerBoundHeight &&
            height < upperBoundHeight) ||
        orientation == Orientation.portrait;

    return isWidthActive && isHeightActive && isRightPlatform;
  }
}

The problem with this approach is that you can't extend it. You wouldn't be able to do something like:
largeBreakpoint: const WidthPlatformBreakpoint(beginWidth: 1200, endWidth: 1600),

Do you have any ideas on how to do this?

[diegotori]

I'm looking a bit at refactoring the breakpoints into an enhanced enum.

Ooh, I like that better. You'd be renaming the begin/end/top/bottom parts to be beginWidth/endWidth/beginHeight/endHeight, though, right?

@gspencergoog i've got this now.

enum Breakpoint {
  /// This is a standard breakpoint that can be used as a fallthrough in the
  /// case that no other breakpoint is active.
  ///
  /// It is active from a width of -1 dp to infinity.
  standard(beginWidth: -1),

  /// A window whose width is less than 600 dp, greater than 0 dp and
  /// whose height is less than 480 dp.
  small(beginWidth: 0, endWidth: 600, endHeight: 480),

  /// A window whose width is less than 840 dp, greater than 600 dp and
  /// whose height is less than 900 dp.
  medium(beginWidth: 600, endWidth: 840, beginHeight: 480, endHeight: 900),

  /// A window whose width is less than 1200 dp, greater than 840 dp and
  /// whose height is more than 900 dp.
  mediumLarge(beginWidth: 840, endWidth: 1200, beginHeight: 900),

  /// A window whose width is less than 1600 dp, greater than 1200 dp and
  /// whose height is more than 900 dp.
  large(beginWidth: 1200, endWidth: 1600, beginHeight: 900),

  /// A window whose width is greater than 1600 dp and whose height is more
  /// than 900 dp.
  extraLarge(beginWidth: 1600, beginHeight: 900);

  const Breakpoint({
    this.beginWidth,
    this.endWidth,
    this.beginHeight,
    this.endHeight,
  });

  /// The beginning width dp value. If left null then the [Breakpoint] will have
  /// no lower bound.
  final double? beginWidth;

  /// The end width dp value. If left null then the [Breakpoint] will have no
  /// upper bound.
  final double? endWidth;

  /// The beginning height dp value. If left null then the [Breakpoint] will have
  /// no lower bound.
  final double? beginHeight;

  /// The end height dp value. If left null then the [Breakpoint] will have no
  /// upper bound.
  final double? endHeight;

  /// Returns true if the [Breakpoint] is active based on the conditions of the
  /// [BuildContext].
  bool isActive(
    BuildContext context, {
    bool andUp = false,
    Set<TargetPlatform>? targetPlatform,
  }) {
    final TargetPlatform host = Theme.of(context).platform;
    final bool isRightPlatform = targetPlatform?.contains(host) ?? true;

    final double width = MediaQuery.sizeOf(context).width;
    final double height = MediaQuery.sizeOf(context).height;
    final Orientation orientation = MediaQuery.orientationOf(context);

    final double lowerBoundWidth = beginWidth ?? double.negativeInfinity;
    final double upperBoundWidth = endWidth ?? double.infinity;

    final double lowerBoundHeight = beginHeight ?? double.negativeInfinity;
    final double upperBoundHeight = endHeight ?? double.infinity;

    final bool isWidthActive = andUp
        ? width >= lowerBoundWidth
        : width >= lowerBoundWidth && width < upperBoundWidth;

    final bool isHeightActive = (orientation == Orientation.landscape &&
            height >= lowerBoundHeight &&
            height < upperBoundHeight) ||
        orientation == Orientation.portrait;

    return isWidthActive && isHeightActive && isRightPlatform;
  }
}

The problem with this approach is that you can't extend it. You wouldn't be able to do something like: largeBreakpoint: const WidthPlatformBreakpoint(beginWidth: 1200, endWidth: 1600),

Do you have any ideas on how to do this?

Enhanced enums aren't suitable for this use case, since it would prevent a dev such as myself from defining custom breakpoints outside of the Material 3 spec.

In other words, before your PR, I had to create custom WidthPlatformBreakpoint values in order to fill in the gap.

If you go through with this change, if and when the Material Design team decides to update the breakpoints again in the future and they don't end up making it into this library immediately, then there will be no way to get around that limitation.

[gspencergoog]

The problem with this approach is that you can't extend it. You wouldn't be able to do something like: largeBreakpoint: const WidthPlatformBreakpoint(beginWidth: 1200, endWidth: 1600),

Do you have any ideas on how to do this?

Ahh, you're right, that's not going to work. Sorry, I should have realized that when you suggested it.

[martijn00]

@gspencergoog I've tried a bit more and come up with this:

class Breakpoint {
  /// Returns a const [Breakpoint] with the given constraints.
  const Breakpoint({
    this.beginWidth,
    this.endWidth,
    this.beginHeight,
    this.endHeight,
    this.platform,
    this.andUp = false,
  });

  const Breakpoint.small({this.andUp = false, this.platform})
      : beginWidth = 0,
        endWidth = 600,
        beginHeight = null,
        endHeight = 480;

  const Breakpoint.medium({this.andUp = false, this.platform})
      : beginWidth = 600,
        endWidth = 840,
        beginHeight = 480,
        endHeight = 900;

  static const Set<TargetPlatform> desktop = <TargetPlatform>{
    TargetPlatform.linux,
    TargetPlatform.macOS,
    TargetPlatform.windows
  };

  static const Set<TargetPlatform> mobile = <TargetPlatform>{
    TargetPlatform.android,
    TargetPlatform.fuchsia,
    TargetPlatform.iOS,
  };

  /// When set to true, it will include any size above the set width.
  final bool andUp;

  /// The beginning width dp value. If left null then the [Breakpoint] will have
  /// no lower bound.
  final double? beginWidth;

  /// The end width dp value. If left null then the [Breakpoint] will have no
  /// upper bound.
  final double? endWidth;

  /// The beginning height dp value. If left null then the [Breakpoint] will have
  /// no lower bound.
  final double? beginHeight;

  /// The end height dp value. If left null then the [Breakpoint] will have no
  /// upper bound.
  final double? endHeight;

  /// A Set of [TargetPlatform]s that the [Breakpoint] will be active on. If
  /// left null then it will be active on all platforms.
  final Set<TargetPlatform>? platform;

  /// A method that returns true based on conditions related to the context of
  /// the screen such as MediaQuery.sizeOf(context).width.
  bool isActive(BuildContext context) {
    final TargetPlatform host = Theme.of(context).platform;
    final bool isRightPlatform = platform?.contains(host) ?? true;

    final double width = MediaQuery.sizeOf(context).width;
    final double height = MediaQuery.sizeOf(context).height;
    final Orientation orientation = MediaQuery.orientationOf(context);

    final double lowerBoundWidth = beginWidth ?? double.negativeInfinity;
    final double upperBoundWidth = endWidth ?? double.infinity;

    final double lowerBoundHeight = beginHeight ?? double.negativeInfinity;
    final double upperBoundHeight = endHeight ?? double.infinity;

    final bool isWidthActive = andUp
        ? width >= lowerBoundWidth
        : width >= lowerBoundWidth && width < upperBoundWidth;

    final bool isHeightActive = (orientation == Orientation.landscape &&
            height >= lowerBoundHeight &&
            height < upperBoundHeight) ||
        orientation == Orientation.portrait;

    return isWidthActive && isHeightActive && isRightPlatform;
  }
}

Now you can easily use it like this: this.smallBreakpoint = const Breakpoint.small(andUp: true, platform: Breakpoint.mobile),

I can forward the existing code like this: static const Breakpoint smallAndUp = Breakpoint.small(andUp: true); to be backwards compatible.

This would remove the WidthPlatformBreakpoint.

What do you think?

[gspencergoog]

What do you think?

Yes, that looks better, and still extensible.

[gspencergoog]

[martijn00]

@gspencergoog If you merge #7310 first i'll rebase this one and update the changelog again before the release to pub.

[martijn00]

@gspencergoog rebase is done.

[martijn00]

@Renzo-Olivares @gspencergoog fixed the comments.

[Renzo-Olivares]

LGTM w/ last small nit. Thank you for the contribution!

[martijn00]

@gspencergoog @Renzo-Olivares done!

[gourgouris]

This breaks desktops. Height is irrelevant for desktops, regardless of orientation, imo :(
@martijn00

[martijn00]

Fixed in #7347