simple_responsiveness 0.0.1

simple_responsiveness: ^0.0.1 copied to clipboard

This package allows you to add responsiveness to your application, by adding a breakpoint system that can be used throughout your app.

Features #

• Custom breakpoints
• Both display and text scaling aware

Getting started #

Create your breakpoints:

enum BreakpointName {
  small,
  medium,
  large,
}

Configure your breakpoints, somewhere high up in the widget tree.

ResponsiveConfiguration(
  breakpoints: {
    BreakpointName.small: Breakpoint(
      startWidth: 0,
      endWidth: 349,
      margin: 16,
      bodyWidth: double.maxFinite,
      layoutColumns: 4,
    ),
    BreakpointName.medium: Breakpoint(
      startWidth: 350,
      endWidth: 799,
      margin: 32,
      bodyWidth: 840,
      layoutColumns: 10,
    ),
    BreakpointName.large: Breakpoint(
      startWidth: 800,
      endWidth: double.infinity,
      margin: 64,
      bodyWidth: double.maxFinite,
      layoutColumns: 12,
    ),
  },
  child: MaterialApp(...),
)

Usage #

Throughout you can retrieve Responsiveness from the context.

Container(
  width: Responsiveness.of<BreakpointName>(context).bodyWidth(),
  margin: EdgeInsets.symmetric(
    horizontal: Responsiveness.of<BreakpointName>(context).margin(),
  ),
  child: ...,
)