ct_responsive

A package to handle and empower responsive development patterns with the help of custom widgets and extension functions.

Orientation

Custom widget and extension methods to make working with device orientation possible.

ResponsiveByOrientation

• Takes in a landscapeChild
• Takes in a portraitChild
• Builds the correct child depending on the device orientation

ResponsiveByOrientation(
  landscapeChild: landScapeChild,
  portraitChild: portraitChild,
);

Extension Functions

Extension functions for concise access to ResponsiveByOrientation

// Custom Widget Equivalent
ResponsiveByOrientation(
  landscapeChild: landScapeChild,
  portraitChild: portraitChild,
);

// extension 1
portraitChild.whenOrientationLandscape(landScapeChild);

// extension 2
landscapeChild.whenOrientationPortrait(portraitChild);

ValueByOrientation

• Works on values of any type.
• Takes portraitValue, landscapeValue and BuildContext
• Returns the correct value using MediaQuery internally and exposes it on the value getter

Text(
  ValueByOrientation(
    "landscapeText",
    "portraitText", 
    context,
  ).value,
),

can also be extended to other values and types, as exemplified in the extension functions.

Extension functions

Extension functions on Object allowing this to be available for any type and make available ValueByOrientation class with defaults.

Text(
  '$_counter',
  style: Theme.of(context).textTheme.headline4.copyWith(
    fontSize: 34.0.valueWhenOrientaitonLandscape(
      context,
      21.0,
    ),
  ),
),

Text(
  '$_counter',
  style: Theme.of(context).textTheme.headline4.copyWith(
    fontSize: 34.0.valueWhenOrientaitonPortrait(
      context,
      21.0,
    ),
  ),
),