media_break_points library

A comprehensive library for responsive design in Flutter applications.

This library provides a set of tools to create responsive UIs that adapt to different screen sizes and device types. It follows standard responsive design patterns with breakpoints for extra small (xs), small (sm), medium (md), large (lg), extra large (xl), and extra extra large (xxl) screen sizes.

The library consists of several components:

  1. Media Query utilities (media_query.dart):

    • Functions to determine the current screen size breakpoint
    • Extensions on BuildContext for easy breakpoint checking
    • Utilities to apply different values based on screen size

  2. Adaptive widgets (adaptive.dart):

    • Widgets that display different content based on screen size
    • Support for animated transitions between layouts
    • Utilities for creating responsive values

  3. Responsive Grid System (grid.dart):

    • A flexible grid layout that adapts to different screen sizes
    • Support for different column spans at different breakpoints

  4. Responsive Spacing (spacing.dart):

    • Utilities for creating responsive paddings, margins, and gaps

  5. Responsive Typography (typography.dart):

    • Utilities for creating text styles that adapt to different screen sizes

  6. Device Detection (device.dart):

    • Utilities for detecting device types and capabilities

  7. Responsive Visibility (visibility.dart):

    • Widgets for showing or hiding content based on screen size

  8. Responsive Layout Builder (layout_builder.dart):

    • A flexible builder for creating different layouts at different breakpoints

  9. Configuration (config.dart):

    • Utilities for customizing the library's behavior

Example usage:

// Check current breakpoint if (context.isSmall) { // Use mobile layout } else if (context.isLarge) { // Use desktop layout }

// Apply different values based on screen size final padding = valueFor

// Use responsive grid ResponsiveGrid( children: ResponsiveGridItem( xs: 12, // Full width on extra small screens sm: 6, // Half width on small screens md: 4, // One-third width on medium screens child: Container(color: Colors.red), ), ResponsiveGridItem( xs: 12, sm: 6, md: 4, child: Container(color: Colors.blue), ), , )

// Use responsive visibility ResponsiveVisibility( visibleWhen: { Condition.largerThan(name: BreakPoint.sm): true, }, replacement: MobileMenu(), child: DesktopMenu(), )

// Use responsive layout builder ResponsiveLayoutBuilder( xs: (context, _) => MobileLayout(), md: (context, _) => TabletLayout(), lg: (context, _) => DesktopLayout(), )

Classes

AdaptiveContainer
A container that displays different content based on the current breakpoint.
AdaptiveSlot
A widget that builds content based on a builder function.
Condition
A condition for responsive visibility.
DeviceDetector
A utility class for detecting device types in Flutter applications.
MediaBreakPointsConfig
Configuration options for customizing the media breakpoints.
ResponsiveGrid
A responsive grid layout that adapts to different screen sizes.
ResponsiveGridItem
An item in a ResponsiveGrid that can span different numbers of columns based on the current breakpoint.
ResponsiveLayoutBuilder
A widget that builds different layouts based on the current breakpoint.
ResponsiveSpacing
A utility class for responsive spacing in Flutter applications.
ResponsiveTextStyle
A utility class for responsive typography in Flutter applications.
ResponsiveVisibility
A widget that shows or hides its child based on the current breakpoint.

Enums

BreakPoint
Defines standard breakpoints for responsive design.
DeviceType
Enum representing different device types.

Extensions

BreakPointExtension on BreakPoint
Extension methods for the BreakPoint enum.
BuildContextExtension on BuildContext
Extension methods for BuildContext to easily check screen sizes.
BuildValueExtension on BuildContext
Extension on BuildContext to provide a more concise way to use ValueBuilder.
DeviceContextExtension on BuildContext
Extension methods for BuildContext to easily check device types.

Properties

screenSize ↔ Map<BreakPoint, (double, double)>
Defines the range of screen widths for each breakpoint.
getter/setter pair

Functions

breakpoint(BuildContext c) → BreakPoint
Determines the current breakpoint based on screen width and orientation.
getConsiderOrientation() → bool
Gets whether orientation is considered when determining breakpoints.
initMediaBreakPoints(MediaBreakPointsConfig config) → void
Initialize the library with custom configuration.
isLg(BuildContext context) → bool
Whether the screen is large (lg).
isMd(BuildContext context) → bool
Whether the screen is medium (md).
isSm(BuildContext context) → bool
Whether the screen is small (sm).
isXl(BuildContext context) → bool
Whether the screen is extra large (xl).
isXs(BuildContext context) → bool
Whether the screen is extra small (xs).
isXXl(BuildContext context) → bool
Whether the screen is extra extra large (xxl).
setConsiderOrientation(bool value) → void
Sets whether orientation should be considered when determining breakpoints.
strRep<T>(BuildContext context) → String
Returns a string representation of the current screen size and breakpoint.
valBetween(double val, double start, double end) → bool
Checks if a value is between (inclusive) a start and end range.
ValueBuilder<T>(BuildContext context, ValueBuilderFunc<T> f) → T
Executes a value builder function with the given context.
valueFor<T>(BuildContext context, {T? xs, T? sm, T? md, T? lg, T? xl, T? xxl, T? defaultValue}) → T?
Returns a value corresponding to the current breakpoint.

Typedefs

AdaptiveTransition = Widget Function(Widget, Animation<double>)
A function type that defines how to transition between widgets.
ResponsiveLayoutWidgetBuilder = Widget Function(BuildContext context, BreakPoint breakpoint)
A builder function that creates a widget based on the current breakpoint.
ValueBuilderFunc<T> = T Function()
A function type that builds a value of type T.