codecov

A Flutter package that provides window size classes as defined by Material Design 3. Inspired by Jetpack Compose.

Features

  • Width classes from Material Design 3: compact, medium, expanded, large, extra-large
  • Height classes from Android: compact, medium, expanded
  • Comparison operators & Comparable<T>
  • of(context) method for widgets
  • Raw breakpoint values

Usage

Matching window classes to layouts

import 'package:window_size_classes/window_size_classes.dart';

Widget build(BuildContext context) {
  final widthClass = WindowWidthClass.of(context);

  return switch (widthClass) {
    WindowWidthClass.compact => CompactLayout(),
    WindowWidthClass.medium => MediumLayout(),
    WindowWidthClass.expanded => ExpandedLayout(),
    _ => LargeLayout(), // large and extraLarge
  };
}

Responsive Navigation

Widget build(BuildContext context) {
  final widthClass = WindowWidthClass.of(context);
  
  if (widthClass >= WindowWidthClass.expanded) {
    // Wide layout: permanent navigation rail
    return Row(children: [
      NavigationRail(/* ... */),
      Expanded(child: content),
    ]);
  } else {
    // Narrow layout: bottom navigation or drawer
    return Scaffold(
      body: content,
      bottomNavigationBar: NavigationBar(/* ... */),
    );
  }
}

Using Height Classes

Widget build(BuildContext context) {
  final heightClass = WindowHeightClass.of(context);
  
  return Scaffold(
    appBar: heightClass != WindowHeightClass.compact 
        ? AppBar(title: Text('My App'))  // Hide app bar when height is limited
        : null,
    body: content,
  );
}

Comparison Operators

Widget build(BuildContext context) {
  final showSidebar = WindowWidthClass.of(context) > WindowWidthClass.compact;
  
  return showSidebar 
    ? TwoColumnLayout() 
    : SingleColumnLayout();
}

Resources

Libraries

window_size_classes
Window size classes for adaptive Material Design 3 layouts.