responsiveByViewportWidth<T> method

T responsiveByViewportWidth<T>({ required Map<double, T> breakpoints, required T fallback, })

Picks a value by call-site viewport width, choosing the highest threshold that is <= the current width.

breakpoints maps a minimum width (logical px) to the value that applies at or above it; fallback is returned when the width is below every threshold. Selection is order-independent — entries are sorted internally, so the input map's insertion order does not matter.

final columns = context.responsiveByViewportWidth<int>(
  breakpoints: {0: 1, 600: 2, 1024: 3},
  fallback: 1,
);

Width read (shared with clampByViewportWidth): reads the nearest MediaQuery width at the call site (MediaQuery.sizeOf(this).width) — not the ResponsiveScope's device class. In a normal single- MediaQuery app this equals the device width; it diverges only under a deliberately nested MediaQuery override, where it tracks the local sub-region (the intended "size to fit the space here" behavior — note the Viewport in the name). It rebuilds per-pixel by design and requires only a MediaQuery ancestor — no ResponsiveScope needed.

Implementation

T responsiveByViewportWidth<T>({
  required Map<double, T> breakpoints,
  required T fallback,
}) {
  final width = MediaQuery.sizeOf(this).width;
  final entries = breakpoints.entries.toList()
    ..sort((a, b) => b.key.compareTo(a.key)); // high → low
  for (final entry in entries) {
    if (entry.key <= width) return entry.value;
  }
  return fallback;
}