Breakify

A responsive layout toolkit for Flutter.

Build responsive interfaces using breakpoints, responsive values, fluid interpolation, and adaptive widgets.

Pub Version GitHub Stars Pub Likes Pub Points License: MIT Flutter SDK

Breakify

Breakify live resize demo

Table of Contents

What is Breakify?

Breakify is a lightweight responsive layout toolkit for Flutter designed to make responsive UI easier to build and maintain.

Instead of repeatedly checking screen dimensions throughout your widgets:

if (MediaQuery.sizeOf(context).width >= 1024) {
  // ...
}

Breakify lets you describe how a value or layout should behave across screen sizes, and takes care of resolving it for you.

Why Breakify?

Without Breakify, responsive layouts often require manually checking screen sizes throughout your widgets:

if (MediaQuery.sizeOf(context).width >= 1024) {
  ...
}

or reaching for a LayoutBuilder every time:

LayoutBuilder(
  builder: (context, constraints) {
    // ...
  },
)

With Breakify, the same logic becomes declarative:

BreakifyAdaptativeLayout(
  breakpoint: BreakifyBreakpoint.lg,
  spacing: const BreakifyFluidValue(
    sm: 12,
    lg: 24,
  ),
  children: [
    LeftPanel(),
    RightPanel(),
  ],
)
Without Breakify With Breakify
Screen-size checks scattered across widgets Responsive logic centralized in one value
Manual LayoutBuilder boilerplate per widget Built-in adaptive widgets
Hard breakpoint jumps Optional fluid interpolation
Easy to forget a breakpoint case Automatic fallback to the nearest defined value

The responsive logic stays centralized, making your widgets easier to read, maintain, and reuse.

Features

  • Responsive breakpoints
  • Fluid values with smooth interpolation
  • Adaptive row/column layouts
  • Responsive containers
  • Responsive grids, including explicit and automatic column layouts
  • Horizontal grids and equal-height rows
  • Responsive list views (vertical and horizontal)
  • Main-and-secondary panel layouts
  • Conditional visibility by breakpoint, globally or locally
  • Development breakpoint banner with configurable position

Requirements

  • Dart SDK >=3.0.0
  • Flutter SDK >=3.10.0

Installation

Add Breakify to your pubspec.yaml.

dependencies:
  breakify: ^0.2.0

Then import the package.

import 'package:breakify/breakify.dart';

Quick Start

Wrap your application with BreakifyScope.

void main() {
  runApp(
    BreakifyScope(
      child: MaterialApp(
        home: HomePage(),
      ),
    ),
  );
}

This makes responsive information available throughout the widget tree.

Default Breakpoints

Breakify includes five responsive breakpoints by default.

Breakpoint Minimum width
sm 640
md 768
lg 1024
xl 1280
xxl 1536

You can also provide your own breakpoint configuration.

const breakpoints = BreakifyBreakpoints(
  sm: 500,
  md: 700,
  lg: 900,
  xl: 1200,
  xxl: 1600,
);

BreakifyScope(
  breakpoints: breakpoints,
  child: MyApp(),
)

Note: every breakpoint width shown in this README — including the Responsive Preview below — uses these defaults. Since breakpoints are fully customizable, your own app may switch layouts at different widths.

Responsive Values

Instead of manually checking the screen width, define how a value should behave.

const columns = BreakifyValue(
  sm: 1,
  md: 2,
  lg: 4,
);

final value = context.resolve(columns);

Missing breakpoints automatically inherit the nearest previous value.

For example:

Breakpoint Value
sm 1
md 2
lg 4
xl 4
xxl 4

Fluid Values

Need values to scale smoothly instead of changing abruptly?

Use BreakifyFluidValue.


`BreakifyValue` is generic, so it can resolve values such as `int`, `double`,
`EdgeInsets`, or other types used by responsive widgets. The `sm` value is
required; higher breakpoints inherit the closest value defined before them.dart
const spacing = BreakifyFluidValue(
  sm: 8,
  md: 16,
  lg: 24,
);

Container(
  padding: EdgeInsets.all(
    context.resolve(spacing),
  ),
)

Instead of jumping from one value to another, Breakify interpolates between breakpoints.

Interpolation is linear between each pair of defined breakpoint values. Values before the first defined point use the first value, and values after the last defined point use the last value. If a different breakpoint configuration is needed for one fluid value, use overrideBreakpoints. Use resolveRounded when the interpolated result should be rounded to the nearest logical pixel.

BuildContext Extensions

Breakify provides useful extensions for accessing responsive information.

context.breakpoint

Returns the current breakpoint.

For widgets using BreakifyScope, this is the breakpoint resolved from the scope's width. Widgets that use BreakifyBuilder resolve their breakpoint from the width in their local BoxConstraints.

context.breakifyWidth

Returns the current width.

context.resolve(value)

Resolves any BreakifyResolvable.

Widgets

BreakifyAdaptativeLayout

Automatically switches between a Column and a Row.

BreakifyAdaptativeLayout(
  breakpoint: BreakifyBreakpoint.lg,
  spacing: const BreakifyValue(
    sm: 12,
    lg: 24,
  ),
  children: [
    Sidebar(),
    Content(),
  ],
)

distributeEvenly controls whether horizontal children use Expanded (true) or Flexible (false). stretchChildren applies CrossAxisAlignment.stretch to the vertical layout. Spacing can be a BreakifyValue or a BreakifyFluidValue.

BreakifyGrid

Responsive grid with configurable columns, spacing, and aspect ratio.

BreakifyGrid(
  columns: const BreakifyValue(
    sm: 2,
    md: 3,
    lg: 4,
  ),
  spacing: const BreakifyFluidValue(
    sm: 8,
    lg: 20,
  ),
  children: products,
)

columns, spacing, crossAxisSpacing, mainAxisSpacing, and childAspectRatio support responsive values. When both spacing and an axis specific spacing are provided, the axis-specific value takes precedence. padding, physics, shrinkWrap, and scrollDirection are forwarded to the underlying scrollable grid.

It also supports:

  • Horizontal scrolling — set scrollDirection: Axis.horizontal to scroll sideways instead of vertically. In this mode, columns controls the number of rows instead of columns, and childAspectRatio is still expressed as width / height.
  • Equal-height rows — set equalHeight: true to make every item in a row match the height of the tallest item in that row. Useful for grids with items of varying intrinsic height. Currently only supported with Axis.vertical.
BreakifyGrid(
  columns: const BreakifyValue(sm: 1, md: 2, lg: 3),
  scrollDirection: Axis.horizontal,
  spacing: const BreakifyFluidValue(sm: 8, lg: 20),
  children: cards,
)

BreakifyResponsiveGrid

Automatically calculates how many columns fit while keeping a minimum item width.

BreakifyResponsiveGrid(
  minItemWidth: 240,
  maxColumns: 4,
  spacing: 16,
  children: products,
)

When the parent provides an unbounded width, the grid uses minItemWidth as its finite fallback width.

The column count is calculated from the available width after horizontal padding and the space required between items. maxColumns caps the result, while at least one column is always used. Unlike BreakifyGrid, this widget does not require a value for each breakpoint and responds to the local width provided by its parent.

BreakifyPanelLayout

Places a main panel beside a vertical stack of secondary panels from the selected breakpoint onward.

BreakifyPanelLayout(
  breakpoint: BreakifyBreakpoint.lg,
  spacing: const BreakifyFluidValue(sm: 12, lg: 24),
  mainPanel: MainContent(),
  secondaryPanels: [
    SummaryCard(),
    ActionsCard(),
  ],
)

Below the breakpoint, all panels are arranged vertically. At the breakpoint, the main panel and the secondary panel column are arranged horizontally.

mainFlex and secondaryFlex control the horizontal width ratio. If secondaryPanels is empty, the layout remains vertical. The breakpoint is resolved from the layout's available local width, so padding or parent constraints can make it differ from the global screen breakpoint.

BreakifyListView

Responsive list with configurable spacing and separators.

BreakifyListView(
  spacing: const BreakifyValue(
    sm: 8,
    lg: 16,
  ),
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
)

Supports a custom separator widget (replacing the default spacing) and scrollDirection: Axis.horizontal for horizontal lists.

When separator is provided, it replaces the responsive spacing between items. Use shrinkWrap and appropriate scroll physics when placing the list inside another scrollable widget. Horizontal spacing is applied along the horizontal axis.

BreakifyContainer

Centers content while limiting its maximum width.

BreakifyContainer(
  maxWidth: const BreakifyValue(
    sm: 1200,
  ),
  child: content,
)

maxWidth and padding support BreakifyValue and BreakifyFluidValue. margin and alignment use Flutter's regular layout types.

BreakifyVisibility

Show or hide widgets depending on the current breakpoint.

BreakifyVisibility(
  minBreakpoint: BreakifyBreakpoint.lg,
  child: Sidebar(),
)

Or show only on specific breakpoints.

BreakifyVisibility.only(
  visibleIn: {
    BreakifyBreakpoint.sm,
    BreakifyBreakpoint.xl,
  },
  child: Logo(),
)

Use mode: BreakifyVisibilityMode.local to resolve visibility from the width available to the widget instead of the global BreakifyScope width.

The default mode is BreakifyVisibilityMode.global. Use minBreakpoint to show a child from a breakpoint upward, maxBreakpoint to show it up to a breakpoint, or combine both to define an inclusive range. replacement is rendered while the child is hidden; if it is omitted, the widget uses an empty SizedBox.

BreakifyVisibility(
  minBreakpoint: BreakifyBreakpoint.lg,
  mode: BreakifyVisibilityMode.local,
  replacement: MobileMenu(),
  child: DesktopSidebar(),
)

global uses the width exposed by BreakifyScope; local uses the finite width available where the widget is placed. If the local width is unbounded, it falls back to the global width.

BreakifyBuilder

Build widgets based on the current breakpoint.

BreakifyBuilder(
  builder: (context, breakpoint, constraints) {
    return Text(
      breakpoint.name,
    );
  },
)

The builder receives the current BuildContext, the resolved BreakifyBreakpoint, and the local BoxConstraints. It is useful when a layout needs custom behavior that is not covered by the built-in widgets.

BreakifyDebugBanner

Displays the current breakpoint during development.

BreakifyDebugBanner(
  child: MyApp(),
)

Use enabled to hide the banner without removing it from the tree, corner to select one of the four screen corners, and breakpoints to use a custom configuration. This widget is intended for development and should usually be disabled in production.

BreakifyDebugBanner(
  enabled: true,
  corner: BreakifyBannerCorner.bottomLeft,
  child: MyApp(),
)

Responsive Preview

The screenshots below were captured from the app in /example, resized across each breakpoint.

These previews use Breakify's default breakpoint widths (see the Default Breakpoints table above). Breakpoints are fully customizable via BreakifyBreakpoints, so an app using custom values will switch layouts at different widths — the behavior shown here (how many columns, how the layout adapts) is what stays consistent, not the exact pixel value.

sm breakpoint preview
sm · phone 		md breakpoint preview
md · large phone / small tablet 		lg breakpoint preview
lg · tablet / small laptop 		xl breakpoint preview
xl · laptop / desktop 		xxl breakpoint preview
xxl · large desktop

Example App

A complete example application is available in the example folder.

Run the example on Flutter Web:

flutter run -d chrome

Or run it on any connected device (Android, iOS, desktop, or the default emulator):

flutter run

License

This project is licensed under the MIT License.

Author

Developed and maintained by Josue Serna Muñoz.

GitHub: https://github.com/josueSerna

Libraries

breakify
Breakify is a lightweight responsive layout package for Flutter.