Features

• Responsive breakpoints
• Responsive values with automatic fallback
• Fluid values with smooth interpolation
• Adaptive row/column layouts
• Responsive containers
• Responsive grids
• Responsive list views
• Conditional visibility by breakpoint
• Development breakpoint banner
• Lightweight and dependency-free

Installation

Add Breakify to your pubspec.yaml.

dependencies:
  breakify: ^0.1.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.

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(),
)

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:

Fluid Values

Need values to scale smoothly instead of changing abruptly?

Use BreakifyFluidValue.

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.

BuildContext Extensions

Breakify provides useful extensions for accessing responsive information.

context.breakpoint

Returns the current breakpoint.

context.breakifyWidth

Returns the current width.

context.resolve(value)

Resolves any BreakifyResolvable.

Widgets

BreakifyAdaptiveLayout

Automatically switches between a Column and a Row.

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

BreakifyGrid

Responsive grid with configurable columns.

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

BreakifyListView

Responsive list with configurable spacing.

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

BreakifyContainer

Centers content while limiting its maximum width.

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

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(),
)

BreakifyBuilder

Build widgets based on the current breakpoint.

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

BreakifyDebugBanner

Displays the current breakpoint during development.

BreakifyDebugBanner(
  child: MyApp(),
)

Why Breakify?

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

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

or

LayoutBuilder(
  builder: ...
)

Breakify lets you describe how your UI should behave instead.

BreakifyAdaptiveLayout(
  breakpoint: BreakifyBreakpoint.lg,
  spacing: const BreakifyFluidValue(
    sm: 12,
    lg: 24,
  ),
  children: [
    LeftPanel(),
    RightPanel(),
  ],
)

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

Example

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.

GitHub: https://github.com/josueSerna